00:01
我们继续的来介绍V的功能。这张我们来看一下在wait中如何使用web assembly。Web symbol是一个可移植、体积小、加载快,并且兼容web的全新技术,是大前端的重要内容。自从提出来以后就一直的被火热关注,它可以实现JS在宿主环境中,比如在浏览器里边直接的调用CC加加等程序前端的性能,从此有了一个更好的解决方案。我们先来搭建一个能将C和C加加编译成点w asm的环境,接下来呢,我们在wait中来引入这个文件,关于web assembly不是我们这堂课重点讲解的内容,如果感兴趣的小伙伴呢,可以去访问一下web assembly的官方网站web assembly diogg去了解详细的内容。接下来我们详细的给大家讲解一下如何在我们本地搭建一个能编译点WM的这样的一个环境。
01:06
这个环境分成很多的步骤,我们详细的给大家讲解一下,大家照着我的PPT去演练就可以了。第一步呢,大家先安装gate,我相信大家机器上应该是已经安装好了,如果没有安装的话,大家可以去gate的官方网站gate-SSCM去下载相关的操作系统的版本,安装好gate以后,我们来安装c make。如果是Mac系统,大家可以是通过home b就是install去安装c make就可以了,如果是Windows系统的话呢,大家可以参照官网去找相关的解决方案,第三步我们来安装GCC,就是的编译程序,这个的话如果大家是Mac系统的话,大家可以直接安装X code就可以了,Windows系统的话,大家可以安装Windows studio。第四步我们来编辑em script,这个的话分成五个步骤,第一步我们先到get上面去克隆一个项目啊,Dug的emsdk。
02:07
然后我们进入到这个em SDK的目录下面,然后执行一下安装,安装的方法呢,就是当前目录下的emssdk install latest,注意这个呢跟某些网站说的不一样,有的小伙伴可能会去看关于web assembly的中文网站,那么这里边呢,安装的版本可能跟这个不一样,所以大家一定按照我们PPT展示的这个方法去做是没有问题的。接着呢,我们再去执行ES SDK act latest,后面一定加上杠杠。Permanent,不然的话可能会有问题,最后呢,我们再执行一下source当前目录下的essdk_Env.SH这个shell脚本,第四步完成以后呢,我们看第五步我们就可以编辑一个C程序了,这里呢,你可能会问为什么没有慢的一个入口文件,我们可以直接的去写一个C的函数就可以了,然后呢,我们就可以在JS里边去调用这个函数。
03:06
然后接下来呢,我们再去编译一个点w asm的文件,我们搭建这个环境,其实实上就是为了调用一个em MCC去把我们的C编译成一个WM的文件,具体的这句话呢,大家抄一下就可以了。注意两点,第一呢,我们先找到我们C的原文件的位置,我当前是在S2C目录下面有个ma.C文件,输出的话呢,是放到了一个disc目录下面,然后编译成一个ma.WM这个文件编译好了以后呢,我们就可以把它拿到wait里面去执行一个import,导入我们ma.WM把它当成是一个模块。然后呢,我们去调用这个初始化的函数,会返回一个promise,在promise的这个回调函数中,我们就可以通过export去访问我们在C语言里边写的这个I的方法了,这样的话我们就实现了在浏览器端通过JS来去调用一个C程序了。
04:04
下面呢,我们来详细的演示一下。我已经按照PPT里的步骤,在我wait目录下面创建了一个em SDK这样的目录,它就是我们当前的一个能将我们C编译成WM这样的一个文件的环境。那我们来简单的看一下,这个目录下的内容还是不少的,接下来呢,我们在这个目录上面点击右键,创建一个新的目录,取名为src,我们在S2C里面创建一个新的文件,叫做ma.C我们要去写一段C的程序,我们先来定义一个函数,函数的反回值的类型是int,函数的名字叫I函数借出两个参数,一个是X一个是Y,它的类型都是int函数题里边我们要返回X和Y的和。这里呢,我们不需要写入口函数慢,也不需要导出I,我们只需要定义一下这个函数就好了,这样的话我们在JS里边就可以调用了。
05:07
这个C文件编写好了以后,我们在DMSDK的目录下面创建一个新的文件夹,叫做disc,我们打算把它编译好的内容放在我们D目录下面,然后我们进入到emsdk这个目录下面,然后将我们PPT里边那个编译命令粘贴过来。然后我们看,我们要编译S2C下面的master.c放到我们D目录下面,取名为master.w好,我们回撤一下,好发现呢这里报了个错,说我return X加Y后面没有分号,C语言的话不像JS必须得加分号,我们打开这个原代码,在这后面呢加个分号保存一下,然后我们再去编译一下。好,OK,编译成功了,下面呢,我们打开这个list目录,我们能看到master wm就已经创建起来了,但是我们打开它以后发现呢,它并不能够直接的观看,因为这是一个二进制的文件,那怎么办呢?我们下面必需要在我们的V里去载入它。
06:12
我们先把这两个文件关闭掉,接下来我们去copy一下这个文件,把它粘到我们vanilla这个目录下面。然后我们试图在manner JS里边把它导入,现在呢,我们先把这个manner JS ctrl c ctrl v copy一个,然后我们把它给保存一下,取名为叫做web worker,然后呢,我们把这个web worker的代码先删除掉,来去在这个man.JS里边试图的去载入man.W怎么做呢?首先我们还是需要像一个模块一样导入它,我们导入一个名字叫in net,初始化,然后from应该是当前目录下面的math。点WM。
07:00
我们把这个文件给导入进来,导入进来以后呢,我们就去调用一下这个in这个函数,这个函数返回的是promise,所以在后边呢,我们可以加个then,在then的后边我们可以给一个回调函数,比方说它的行参是export,发发题里边我们就可以拿到export了,我们先consolelo一下,Export保存一下,我们把我们的项目启动一下,现在把它关闭掉,然后我们在我ITA上面点击右键open,嗯,打开我们这个终端,然后接着执行一下PN PM run DV。好,我们的项目呢,启动在3000上,我们点击一下打开我们的控制台。好,Console我们看到这里打印了一个对象,对象里边就有ADD的这个方法了,所以我们就可以直接调用了,我们调一下export下的爱的方法,我们传入一个四五保存一下,好,大家看到在控制台上面就打印了一个九,注意这个代码呢,是我们读取的一个C编译成的一个WM这样的一个代码。
08:09
这个例子呢,我们只是简单的引入一个C的函数,如果我们把一个大型的C项目,或者是一个比方说C语言写的一个程序放到我们页面里,我们就可以通过这个web assembly技术来提高我们前端的性能了。好,关于web assembly我们就讲这么多,大家加油。
我来说两句