00:00
来咱们接着上节课来讲,上节课呢,我们讲了这个,呃,模块,模块化的它的一个进化史,从而呢,我们说了用模块化会带来一些问题。那么这节课呢,我们就来学一下模块化的规范,哎,模块化规范我点击这个打开你会看到,诶,这有四个分类,而现在常用的模块化规范就是这四种。就这四种,其实有一种大家见过。哪一种呢?Common GS,哎,在哪里见过呢?No里面no就是基于common GS这种模块化规范来编写的。啊好,那这种先放上说,然后还有下面还有三种,但其中有一种大家看这个颜色。叫什么?呃,变灰色,那是因为这一种,我先说一下啊,这三种要求大家必须找这一种作为了解就OK。啊,CMD这种规范是阿里的一个人的。
01:03
阿里一个人写的,但是呢,在外边使用的不是太广泛,也就是阿里内部的一小部分在用它,哎在用它,而且CD这个规范,哎,我发现我为什么说它不重要呢,是因为我发现他卖了,卖给那个国外了。啊,所以说哪天不能用,能不能用我们还不知道啊,作为先作为了解那AMS6啊这个。这个这三个是重点,我们一个一个来看,哎,大家还记不记得我们昨天ES6第15个,我说这个昨天不能讲,就不放在模块化讲,就是它。好,咱们先来看第一个,哎,Common GS大家学过的话,咱们就好办啊。先来看说明,嗯,CGS,首先它每一个文件都可以当做一个模块,记住了,这些文件说的都是GS文件。好,那么CGS在服务器端渲染,它有个特点,它加载运行是同步的。
02:05
一讲到这个臀部,我们能想到什么?同步带来的后果是什么?是吧,会等待,相当于是阻塞啊。好,那在服务器端加载它没有什么太大的问题,无非不过是我等待的时间长一点。但是呢,你在浏览器端去加载模块的时候就有问题。你想,比如说我在浏览器端有一个模块,我需要发请求问服务器要好来到了server这一块,那么server这一块这有正好是它前边还有好几个模块需要加载。也就是因为你当前的请求到了,但是不能立马什么返回给我浏览器当一个模块啊,他只能在这排队的好,那么这个中间很有可能耽误的时间很长。啊,这个时候在浏览器呢,很有可能用户一直在等。
03:03
体验特别差。用户体验不好,甚至是我这个模块大的话,你会看到浏览器那个。刷新了,有时候你网速不好,你们也能看到转,是不是一直在转,转的时候转的时间长,浏览器的屏幕会发白变模糊。最终导致就是1404。二。这就是说我们在浏览器端使用GS的话就有问题。然后呢,还有。Com JS里面是不是有一种括号语法?浏览器都不认识。浏览器引擎不认识,那么这个时候我们在浏览器端要使用啊,使用com GS这种规范,你得提前去编译打包处理它。处理到什么地步,让浏览器可以认识?好,我们先来看它的基本语法,点开这个来,我没有点开后面的,我先问一下大家如何去向外暴露模块。
04:06
好,就这一种吗?Export export吧,哎,这个东西这两种方式很好,那如何引入呢?哎,好,都记着写这块,那来我点开暴露模块的方式有两种,一种叫module.export等于一个value,还有一种方式啊,Xport点叉叉叉等于VALUE6。哎,这样要灵活一点,我说这个value是不是可以是任意的数据类型。对,咱们要灵活一点啊,之前有个同学我就讲完这了,我让他敲它就等于个暴露什么model X,就等于这个value这个字。然后一直运行不起来,就过来问我说,老师,你不是说这写的必须要报吗?啊,这个value泛指的是任意数据类型啊。
05:02
这是一个现在,既然大家知道这些了,那咱们聊一个东西。上边暴露模块,他们暴露的本质是谁?你只有知道了暴露的本质是谁,你才能在引入的时候去灵活的应用它。暴露的本质是谁啊?能不能找到这个东西?没想过是吧?对,暴露的本质肯定是个对象啊。关键这个对象是谁啊,哪个对象。看这你显示什么。想不到的,我给大家说一下啊,记死了modu.X或者说是X点叉叉叉等于value,它俩暴露的本质都是XP这个对象。都是暴露的他。
06:01
为什么这样说?先来看第一种,Monitor X等于个value,它在等于一个值之前,Monitor X其实原来就有值,它是一个空的对象。这是它的特点。是控制对象,而你等于value,相当于做了个什么操作啊。拿后边的数据,是不是把前面的控制对象给覆盖了。下面这组好理解,X po点叉叉叉等于value,也就是意味着我是不是可以无限的给xbo对象里面去添加属性,或者说是方法呀?所以说他俩暴露的本质都是这个记住了啊,这个就是说有可能呃,有可能别人会和你交流这个。好,那么我们来看一下引入模块,就像大家刚才说的是用的铝块,它引入呢有两种情况。我们的模块通常分为自定义模块和第三方模块,而这两种方式你在引入的时候要注意一个路径的问题。
07:06
自定义的模块,我们是不是要整一个相对路径找到它?而第三方的模块呢,我们直接引用的是模块的名字,大家之前应该是叫包名。对不对,你是不是去NPM下载一个包,然后我是不是快直接引入这个报名。啊。好,这是它的,哎,一些基本的语法,我们来看一下如何去实现啊,在服务极端,这肯定是no的了。然后在浏览器端,我们刚说了,你在浏览器端要用起common GS这种模块化规范,你需要提前去编译打包处理。B打包的工具叫ify。Browse sorry。诶,他说的是com GS浏览器端打包工具,其实现在不能这么这么说了,其实ES6里边也用到它。
08:04
Browse这儿不是有个官网吗?哎,答完了可以去访问一下,我呢,这边我已经有了。把这个钱关了。我来找一下,在这看到这个没有,我点击一下来,咱们来访问一下,哎,这就是browse s的官网,这一看就是老外写的。一看就老想,太简单了,特别简洁,也没有广告。他呃,这个东西是什么,知道是什么不。这叫魔法帽啊,就是魔法帽为什么要换一个,这个用来表示他当前很神奇,我估计他是这样想的啊。啊,往下来看下一边呢,这不是教大家如何去使用吗?NPM1杠杠g pro这一步是干嘛的?杠G,一看到杠G是不是全局安装安装这个包,那下面这些车,哎,我看到了这个包UNQ。
09:03
你看这是不是引入个unq这个,你块二一看没有路径,这是不是引入unq这个包啊,这个包呢,待会我也会用到,哎,告诉大家这个库哎,这个包可以干嘛?哎,这个pro s的官网东西也不多,大家现在可以去看一下,来回到我们的这个代码这。我这呢,第二个这呢,就是我们common GS-no,就是基于哎服务器端的一个教程,到时候我们就跟着这个教程来就OK。大家看我这work这零二杠no的,这现在是不是空的,来上来我们就照着这个目录哎去走一遍,你这些东西都不知道大家能不能看懂。我为什么要列出这些东西呢?是因为你去浏览一些技术性的官网,它上面是不是也有教程,而它的教程里面往往都是跟教程走,都是这样的,你得能看懂这些的意思是吧?告诉我们去创建这是什么,创建个。
10:02
文件夹好,来,也说我在这儿来一个modus。走,你在这个下边,我得需要modu1.gs。这没问题吧,这不是在它下面缩进的一个吗?然后你还得整来来个。换个二。再来一个三,哎,有三个就够了,那么这三个分别代表的是一个模块吧,然后我再去它的Y次,我去创建个app.js。你们之前脑子里边通常也有这样的做法。因为你是模块化,最终我是不是要把其他的模块汇集到这个主模块。哎,那接下来再来看,哎,这这个东西package Jason。我先问下来这个文件怎么去创建呢。而。
11:03
右键。哦,大家之前拍精神知道有他你们是不是下载完弄的项目它自动就有了。那自己会创建吗?啊,你们意思是在这右键什么创建一个啊,这也是一种方式啊,首先我们要知道一个常识,Package通常就是放在我当前项目的跟路径下。跟目录像这个一定要知道,好,你们之前是是这个意思是吧,大家可以这样杰森啊,然后呢,自己去写,首先他是一个结算对象B。在这边啊,那如果是那是webw的东西,如果不是没有webw呢。没有办法,我自己写啊,啊,那你们不要太依赖于这个工具啊,要自己会整就行,我拿命令能不能生成啊。
12:02
那在这第一种,你比如说我们去创建一个啊,你可以随便写,你比如common GS-not,这是不是一个模块,这个包名啊。还有一个东西是必不可少的。谁?也是拍机里面很有可能有很多的信息,但是你在初始化的时候必须有两个,一个叫内马。这报名。为什么必须有它呢?你这个包是不是随时有可能去发布啊,你没有报名的话,别人怎么去下载,我都不知道你这个叫啥无名氏。还有一个东西必须要有谁啊?W是针对你当前这个工程的一个版本。那为什么要有它呢?它也是对我当前项目的一个标识。而且你的项目之后是不是肯定要更新去迭代它。
13:02
那这样的话,我当前的项目要升级了,升级的话你的版本号是不是也是水涨船高跟着走啊。你像杰瑞里面是不是有很多版本,如果是没有版本号的话,那我用户想要指定某一个版本去下载的话,根本下载不下来。所以这个是必须的,哎,通常来说有的是习惯0.0.1,还通常来说是这样的1.0.0。这没问题吧,那这种手手动创建没问题,然后呢,我们得学会用力去创建它。怎么去创建呢?你如果通过秘密行。这个上面有命令行知道吧。是不是他然后呢。我怎么进入呢?你们说的是进入他CD啥会拖吗来。这是不是进来了?来,现在我是不是进入到这个根目录上啊,接下来如何去生成一个阶层。
14:06
N PM in it别T了,In it in就初始化的意思,然后回车对不对,看一个回车,注意了,光标现在是不是在那停着。你要看当前显示的信息都是什么。好,这是package name是报名吧,包名是问你后边这个你要要不要。为什么是这个报名是你当前项目根目录的名字?有没有发现什么问题?我先强调一个事情,Pack杰森里边的包名不能有中文,不能有大写。而我现在我这个文件名称是不是有大写。那你看他这儿问我的有没有。
15:00
他已经帮我是不是转化为小写了,不好意思,你们的肯定还是大写,应该是。你们现在用的note版本是多少?最新的啥时候装的。你大家看一下note版本会看吧,是八点几吗?八点几才是最新的,不过也没关系,为什么我说这个是最新的,哎,因为他是今年五月份才发布的,有很多的公司也没有在用呢。而你们如果说你们的note是八六点几的话,你们的APM对应的肯定是三点几。肯定是三点几,而我如果是no的版本是八点几的话,它内置的NPM版本是五点几。这没问题吧?那接下来啊,我就要说一个事情。行了,不要谈那个了。我刚刚不是说NPM1吗?如果说大家执行这个命令,这问你们用不用这个苞米,你们一定要注意,你们三点几的话,它没有这么智能,他只能把这个名字拿过来,你说意味着这还是大写。
16:14
你要是没有注意这个,你说哦,就用这个吧,然后你会去敲回车,你会发现下面提示你不能用。因为有大写,那这个时候你是不是应该刚刚的光标是不是在这儿,你应该在这个后边自己写一个你想要起的包名,这时候我们自己要注意不能有中文,不能有大写。哎,之前有的同学看我这咔咔回车能移动敲,他也移动敲,移动敲的话,你连报名这一关你通不过。哎,一直在那儿停着。啊,我现在没有关系,来我再撤销一下。现在是没有,我去NPM。In回车,那这个时候如果说我这有大写的话,哎,或者说我不用它的,你不满足于他这个包名的话,你就可以自己什么去取一个。
17:05
他一个回车。这不是问你版本是不是用1.0.0嘛,然后接下来就是我们的责任是咔咔移动回车,一直到这个AOK。Yes,看一回车到这儿。走到这一步的时候,不要去坐,等这个拍给你出来,你应该是去随便点一个位置。他是不是就出来了,不要在那死等啊,然后我进来。注意这个是不是刚刚我手动设置的一个报名版本号没问题,这些描述呀,作者呀,这些没有什么营养含量。什么时候你可以用它,等你们以后。比较厉害的时候,你可以上传,包括get up上面,让别人下载的时候一定要备注一下你们的名字,顺便呢,小捎带可以把我的名字写上,这个我我不介意啊,哎,就这个意思。
18:02
好。现在我们是不是通过命令去生成了一个它?干一点,机子现在有了,接下来大家看这一步。我要去下载刚刚那个UEQ,我们刚刚是不是在的官网去看到一个,它其实你下载之前可以在哪去搜一下呢?我去哪搜。Am。就是他。这不是一个包吗?你用什么包?是不是可以在NPM官网上搜搜啊?Q,来点击一下。搜到这些包打开的话,其实它里面呢,都会有教程啊。我们一般来说是很多东西都得上网去找,找到了你也能看到他的教程。首先第一步是教咱们安装啊,接下来我先问大家,就是你们自己看能不能看懂,这是一个数组,这没有关系,接下来这一步,你看到这一步了,我就问你UNQ这个包引入进来以后,它是一个什么数据类型?
19:12
自己能不能想到?首先你看前边这个块二是不是引入这个包,引入了以后,我立马是是加括号调用啊,也就是意味着unq这个包最终向外暴露的是一个function。然后调用的时候是不需要传一个参数,你看看放进去的是不是一个速度。再看它最终print print是输出的意思,输出的是什么?1235和之前的有什么区别?来去,除了unq就是唯一的意思。来,这个包可以去除啊,待会儿咱们来测一下。呃。在这来。这一版啊,我去下载这个包,这个杠杠save是什么意思呢。
20:01
添加依赖。你们想说的是不是往泰杰森里面去写?我杀了他。下载完了吧。是不是进来了?为什么可以进来呢?是因为你们还是三的版本,这个杠杠费是必须要加的,如果不加的话,他虽然说是局部安装,但是呢,但是就像大家刚才说的,不会把依赖写到配监测里面,而在NPM5里面,杠杠save已经是一个默认的属性了。这个之后我会单独给你们讲的,嗯,好,那接下来我们开始来编写一下模块吧,这一次来我们去暴露模块,暴露模块呢,用Mo点看,有个是pert po等于一个value,这没问题吧,这次呢,我们去暴露一个,呃,对象吧,接下来再见。
21:02
好,module.xexp等于一个对象,这个对象里边,比如说我来个message,这没问题,来个MODU1,接下来我来个fo来给它来一个函数。在这呢,你去console log这个raise.message是不是就OK了?能懂我的意思吧?这就相当于暴露了一个对象去,那再来MODULE2这来给它排出去吧。暴露一个函数啊,暴露一个函数,我们使用的方式呢,还是这种哎。Module加X等于一个,相当于是。Function。Mo xports注意了,这个S千万不能丢啊,因为你有时候你输这个。对,我看能不能看到xport呢?他这还没有,我们接下来要用到X,所以这两个一定要搞清楚。
22:03
让它等于个function,那么在这我就直接去console log这个当前的模块叫MODU2。好,没问题,那接下来我们换一种暴露方式,还有一个叫xbo点,看它是不是等于value,这一把,你看X po是不是出来了。前面不要忘了这个东西,Xbo xbo.fo等于function可以吧,那这个时候来,我去consolo一个fo调用。表示一下MODU3,我问一下呢,这种包方式有什么特点?我问你能不能继续暴露?一我的意思是我能不能接着往下面继续再写一个,只不过是我把这个换一下。
23:00
可以不?这就是说为什么大家要理解这个东西,你使用X po这种暴露方式是不是无限的吗?这个对象里面去添加属性啊。那我回头问你一句,这种方式我能不能继续再往下?再写。这种。怎么说呢,你这样写没啥问题,但是你现在相当于是这这一堆代码,你写的是没用的,白写了,因为什么下面这个是不是立马又把xbo这个对象重新去覆盖了。哎,这就是他的特点。那有了这三个以后,这都是模块,最终我是不是要汇集到主模块啊。将其他的模块啊,汇集到什么主模块。也就意味着我要去引入了,怎么写,说let一个MODULE1等于我们是不是用的语法是块。
24:06
这个时候你得传一个相对路径吧,我是不是找到,我看APP是不是在这,那应该是当前路径下的,先找modus Mo是不是找到文件夹,然后呢,MODU1康再来两份。二把这个也换了,三这来个二,这来个三,现在我要去使用这些模块,你们理解没理解,我刚才说的暴露的本质就该现在了,我先问你先看一下第一个我要输出这个model,一我应该如何去使用呢?怎么写?我要输出的意思是,我最终肯定是我的意思是要调用这个函数吧。
25:01
你怎么写呢?你得知道MODEL1现在是什么,它是一个对象。看一个,你看看有多智能,大家知道吗。这是不是都知道你要调用这个加号了,因为它里面自动是不是就有这个Mo的方法,那摩丢二要输出的话怎么办呢。毛九二点。什么东西啊?是吗?现在的MODULE2等价于这个函数,MODULE2不就是代表是Xbox吗?是不是函数啊,那也就是说我们要使用马丁二的话,看到这没有。太智能了啊。那MODEL3呢?这两个我肯定是都要输出了。怎么写?有同学一到这就反应不过来了。
26:04
你得知道现在MODEL3是谁,是不是还是XP对象啊,那它现在是对象,我是不是通过对象,这相当于是找它里边的属性嘛,所以我们应该是MODU3点,你看看还有一个。这叫。二没问题吧?那接下来我们去运行它。第一,简单的方式,我是不是可以run了,这是工具,那我通过no的命令能不能运行呢?啊,我们最终运行是哪个命令,找到这谁啊,不就是APP吗。APP在哪?是不是在我的根目录下?那不就是note app.js吗?懂吗?就和大家之前说的no找B的下面3W是一样的。哎,好,现在运行了,你看123是不是都输错了。没有问题。
27:01
然后哎,我们再说一下,我们刚刚是不是下载了个第三方的库叫unq啊。那这个时候我来到MODEL3这,我问他,我这是不是还能继续去冒落呀?这没问题吧,我暴露一个A等于数组,然后呢,在这来我随便整点。呃,再来个几啊。五吧。再来一个比较好。现在这有个数组,那么我在APP这能不能拿到那个数组啊。可以速度在哪,是不是在MODU3里面。然后我们先把unq刚刚下载那个库引进来。和大家说一个,哎,大家都会这样做的事情,也是默认的一个事情,当你引入第三方的库的时候,要放到你这些自定义库的上面。这个知道吧。比如let一个,现在有个UNQ,我把它引入进来,就块一个。
28:03
这什么直接就是unq啊,没有什么路径了,就是报名现在UNQ是不是一个函数啊,那函数的话,我最终的用法肯定是直接调用了吧。调用的话,他是不是需要传个参,我应该传谁进去。MODULE3点点谁呢?AR相当于把那个数组放进去了吧,然后它现在是不是一个函数调用,那么它其实是有一个什么。返回值吧,你去干嘛?Along这个返回值。这没问题吧,接下来来重新去跑一遍,你看我输出的结果。我们原来的数据是什么呢,这一类。除了去虫,其实他还干了一件事情,排序,但是他这个排序有点小bug,有点小问题啊,就是不是bug。我加的11。
29:02
看着啊。按理说11是不是应该在最后啊你。那你说它是根据什么排序的。根据什么排序的?根据你数字的第一位,它的编码。去排序的,唯一的编码肯定比他们要靠前,没问题吧?啊。哎,这呢就是common GS,它基于呃,No的一个啊练习,因为我们之前也用过,也不难,哎,重点的是大家要理解那个暴露的本质。而我这边呢,都有一些教程,如果说大家刚刚那些套路不熟的话,你就跟着教程去敲,没有关系,多敲两遍就熟了,没问题吧。
我来说两句