08. 尚硅谷_JS模块化规范_CMD规范应用.avi原创

咱们呢，这节课主要来讲这个啊，第三种模块化规范叫CD，那讲之前呢，我还是先在大家再把AMD这个知识点过一下，哎，让大家让你们先敲实，让你们心里面哎大概有个印象。首先你要知道AMD它里面是不是依赖一个库叫require GS啊，这个时候就要大家，呃知道当我们说require GS的时候，相当于是在说AMD，因为这两种叫法呢，哎，市面上都有人在说，比如说你懂不懂require GS啊，那这个时候你和AMD是一样的啊，一样的，那么AMD它是专门用于浏览器端的一种模块化规范。他们在浏览器当中加载是义务的，哎，这是它的概念。下面这些东西，其实敲一遍你会感觉。Becomes看上去复杂一点。但其实也没有多难。首先它定义暴露模块。当我去定义这个模块的时候，我们使用的是DeFine啊，这个时候定义模块呢，有两种情况，一种是没有依赖的模块，还有一种呢是有依赖的模块。

如果说是没有依赖的模块，那么这个时候我们传入的参数呢，只有一个function。而在这个函数内部所写的所有内容，就是我们当前模块的内容。最后呢，暴露模块这一项，我们用的是return，对，用return去暴露。那还有第一有依赖的模块，就是你传入的参数，首先第一个应该是一个数组。而这个数图里面放置的就是我们所有依赖的模块。这个时候呢，哎，一定不要忘了在后面去申明行参。因为到时候他要找到加载到对应的模块车，把那个模块对象注入到这个位置。哎，这种方式呢，叫显示声明依赖注入。显示声明意外出入。其实就这么点东西，但是呢，用AMMB啊，用这块GS这种模块化规范的时候，一定要注意它最终引入的时候，你说我页面引入的时候，除了引入这个require GS，我是不是直接利用它里面有个data命的属性。

找到的是我们的什么？这叫主模块。也就是他和我们不用模块规范的时候是不一样的。那个时候你得分别是不是都得去引入，现在我只有一个script标签。好，有了这个以后，哎，它呢，自动加载的是这个主模块。那加载主模块的时候，我们要注意，哎，不是这个。加载主模块的时候要注意。我们引入其他的模块，汇集到主模块的时候，用的是块GS这个方法。哎，这种形式呢，也是用的写事声明依赖着。

但是光有这一步是不够的。光有他不够。为什么说不够呢？因为现在，哎，你比如说我这随时有可能有依赖的模块对象。而我们识别这个依赖模块，首先这相当于是他模块的名字。我怎么通过这个模块名字来去加载对应的模块呢？现在我说的模块就是GS文件。那你得提前去干嘛，去给人家配置一下。哎，在这块GS.conflict在配置的时候pass里边。你通过模块去给模块映射一个路径，最后他就能找到对应的模块。这个时候我们要注意写query什么内置支持AMD这种语法，哎，它内置支持。当你是AMD语法的时候。我解剖瑞。

他直接定义了个模块，名字叫什么呢，在这儿。呃，在你的源码最后边。模块名就叫小写的解克瑞，所以我们在用这个模块名字的时候一定要用上它。哎，其他的没有什么问题，安不支持，我们是不是有单独的配置方法。好。整完这些以后，我呢，先把这个关掉，它把这些收起来，咱们接下来来看下面一种叫CMD。哎，这边呢，颜色有点暗，是因为这个相对于其他三个来说，在市面上的应用不是太多。而且呢，他现在已经呃出售了。而且卖给卖给的是国国外的。一些公司，那这个时候哎，我们就作为了解来看一下，先来看说明哎。你得知道CMD这种模块化规范，它也适用于浏览器端，也是模块的加载是一步的。

啊，它有一个特点，就是模块在使用时才会去加载。你说我什么时候用，什么时候去读它。我们来看一下语法，一看大家就能懂。如何定义暴露模块，如何使用模块看？当我点开这个，你乍一看是不是感觉和AMD的规范一模一样？上来是不是用DeFine定义？那这个时候在CMD里边，它不管你定义有有没有依赖的模块，那始终都是一个参数，就是一个方式。但是不一样的是，这一把我们在这个函数里面必须写三个东西啊，你要用，用的话你就得传。三个型材，一个是块，一个xports，还有一个Mo。我们又看到了这三个，这三个又和谁一样呢？和谁一样？Comment sue啊，那其实你看完这你们应该能想到这三个是干嘛的。

Mo和export，这个是在我模块内部之中去暴露接口的。而这块儿呢？这个什么时候用，一旦说你当前定义的模块要依赖于其他的模块，那这个时候我就去运用块去引入。只不过是他这扩展了一种方式。哎，叫同步引入，又叫异步引入，有两种方式，同步引入的话，就是用这块直接指向你的模块名字。还有一步，引入require.think。哎，你有看到a sick表示的意思。这个方法调用传两个参数，第一个是你引入模块的相对路径。第二个就是对应的回调，也就是说一旦引入这个模块成功了，它会自动注入到这个函数里面。G，而你就可以去使用。但是也是要注意。这儿得声明一个型材。

最终暴露的方式一样，Export。引入模块，嗯，引入模块的话，也是最终你在组模块，这要把其他的汇聚过来。这个时候呢，我不需要向外去暴露，所以呢，我们只需要用第一个参数块就够了，把其他的汇聚过来。那其实大家看完这些你应该能发现CMD，它这种语法其实就是把AMD和com GS的特点搬过来，一人一半。De，用的AMD，暴露用的common GS。人家其实就是说一人哎，用他们一半的思想自己在组合。完了就成自己写的一个规范。那么它这是在浏览器端实现，也需要依赖一个库，叫c.GS。哎，c.GS好，那这个时候这有一个网址啊，大家完了可以去访问，其实我这也我刚刚的机器打开了，这是它的官网，你看看啥也没了。

啥也没了。这不是我这里有这个网址吗？而且你看我其他都有背景色，唯独这个没有。是因为它不重要，我怕他挡住我后面的背景。哎，给它一个透明的。然后呢，刚刚请大家练的时候，我因为这个每次访问特别慢，我就打开它了。我发现一次比一次狠了，最早CGS的官网和这块是一样的。也是大概一样，这边有一个导航啊，什么API，这边有个教程。然后呢，前几个班发现他只给一句话，说当前这个c.GS is什么。什么意思啊？出售了，如果有什么疑问打我们什么啊技术人员的电话，现在连那句话也没了，嗯，还有一段时间是c.GS官网，打开好几个老外的图片。那现在就没了，没了的话还好咱们用的是本地已经下载好的c.JS这个库。

哎，所以说相当于这是老祖宗留下来的一个文物了，那这个时候我们还是得来过一下，哎，防止以后你们进阿里的时候用吧。对吧，因为阿里说的还是有有人在用啊，这是这这个就是阿里一个人写的。来，我们来看一下。嗯，这边呢，还是有一个教程，这个教程呢，这些东西咱们就先不看了，就跟着下边走来，来到我们第四个下边，哎，我们应该是第五了，第五个下边就index，我呢在这先去创建一个GS文件。删掉它是因为是大写。我再去来一次GS，然后呢，在这个下边，哎，再来个lips，同理，这放的是C点这个库，那咱就直接拿过来吧，啊，在这个下边有个lips。

这不有c.GS吗？好，放到我们的LIS下面走，你来这个呢，诶正好看一个东西，它是不是压缩的，大家看到这个了没有。是不是这些啊，它在开发定义的时候肯定不是AB，你放心吧。这为什么是ABC直线呢？就是因为压缩了，压缩了以后会被写abcd所代替。啊。好，那再往下这有个MOS。MOS呢，我在我们的GS下面，我也去创建一个，然后那么我们把这些干扰收起来啊。我呢在这去创建一个，比如说嗯。mo1.gs好了，它有了以后，接下来啊，我们得整四个。再来一个，把这个换成三，嗯，好，在这儿再来一个。四个有了，有了以后我们接下来再往下走，哎，注意看这你还得去创建一个命S，一看到这些我就能想到它，通常来说它用来表示的是最终的主模块。

也是其他的模块是不是要汇集到这儿。好，那我们再往下看，这是不是有1.hc吗？我们已经准备好了。那接下来我们就要写写吧。就根据刚才我那些思维导图里面的，首先我先定义没有依赖的模块。那你说上来，你应该结合着AMD和common GS来敲，他也没有坏处啊，正好是巩固之前的。顺便你还能学一种新的。上来是不是一个，它里面有三个参数，这是固定的啊X。还有一个叫module，在这个里边你就可以写你自己的东西了，来个message，这一把MODULE1好，然后呢，我来一个function，就fo吧，那这个时候我可以去return这个message没有问题。

但是在这要注意，你暴露模块的时候，它也有自己的特点了。这一把我应该是用这两个呢，呃，两，要不然用组合式的，要不然用xport去暴露都行都行，那我们先来一个modu.XEXP，我让他们等一个对象，这个对象里边我是不是应该放这个fo。嗯，没问题，那再来一个哎，DeFine，然后方式。然后呢，这是X，最后一个是module。这些套路都差不多啊。Let module2，那接下来我们再来一个函数function，这把呢，来个半吧。这一次我可以，你比如说我们直接给他consolelo这个message也行，好来在这呢，我再去暴露一把，这一把，你比如说我的mo.export我能不能让它直接等于这个bar。

懂我的意思吗？啊，那这是一个再来一个。好在这个里边let换一个吧，使得大家看的。来个MODEL3啊。再走，发现这把，来个fun。哎，我呢，就快速的让他在这儿，你比如来个data，就标识当前的模块就OK了。X，哎，这个应该是xport点来个什么呀。毛九三等于。找你，哎，这就随意发挥。我现在是不是给它里面添加那个属性，这个属性对应是个对象里面有个函数。好，第一个摸一，我让他跟任何的没有依赖，第二和三，现在我先做一个操作。

DeFine，来一个，哎，小写的function，我呢先把自己的这些东西该写的写了，这把我们来标识一下，它是四，那接下来我先去先去干一件事情。我要依赖于模块二和模块三。你既然依赖人家，你是不是得引入他，引入的话，我们刚讲了有两种方式，一种叫同步。同步引入，哎，同步引入的话，一个你比如说MODULE2。等于哪同步引入，直接用铝块来引入，里边放置的是路径。这对于我们来说不难。当企业录进去了。MODULE2。模二，我们回头看一下，我在这儿暴露的是不是相当于一个函数啊？是不是吗？Xbox是不是直接等于82G函数，那也就是意味着我马上要使用的话，我应该是MODU2去调用它。

接下来还有一种方式叫。E步引入，哎，E步引入let一个MODULE3等于啊E步不应该是这样的。第一步，第一步大家看一下，它是require a think。是不是这样？好，那我们也就是利用require.as sync think，它是一个方法，第一个参数是什么呢？是你的路径。当前路径下的，诶。我看它这没有提示，那我就自己切了，是不是就是它其实在这是不是可以省略这个GS。接下来第二个参数是引入成功以后的回调函数，我去写一个MODEL3，那在这个里面我就可以使用这个MODEL3。

我看猫三怎么用？我这个名字其实没定义好，你说在这边怎么用啊。你要知道现在我引入的MODU3是一个什么数据类型。已入什么？你看它暴露，Xbo点暴露是吧？MODU3肯定是个对象，这个对象和Xbox是等价的。所以我为什么说我一看我说我没写好呢？是因为接下来我马上要用的方式是MODEL3点。Module。我这不是定了吗，对吗？还是王93G。对不对啊。然后呢？它里面是不是有有个函数啊，有叫f fun，那这一把我是不是去调用一下fun啊啊。好，没问题。那。这些二和三我们也录了，接下来我们来写一个自己的吧，F fun2，哎，我们上面有一个，我比如说我在这，我去我们自己的这个message，就是上面这个没问题吧。

最终，你别忘了，你得把自己的暴露出去。XP点，比如说FUN2等于。FUN2。能不能看懂？给它里面添加属性，对应的是一个方法，好了，MODEL4我也写完了，那接下来我们得整主模块了。主模块首先你能想到它不需要向外暴露了，那我们就先把基本的写上，你说我这现在只需要传一个参数就好，OK了。而这一个参数里边，我们用于科二是不是直接引入它就好了。哎，我问一下，现在咱们需要考虑引入哪几个模块。你先来分析我这个模块一是不是只暴露了，还没和别人打交道呢？好，模块一说明要引过去。

然后呢，二和三，你会发现它是不是被四依赖的。也说它在四里面用的，那也就是说这这个时候我们只需要把一和四引入进来，是不是就OK了。来let一个module等于require一个。当前路径下的。引入进来以后，MODU1我们就能去使用它，现在MODU1是不是一个对象里面是不是有Mo。好了，那再来一个，来一个MODU4，我让它等于一个，哎。当企业落地下的。我们找到这个MODU4MO4，我们刚刚暴露的是什么呢？是不是就是它。这个牌大家能不能跟得上？

MO4等价于它，所以你通过手机找到FU2，发现它正好对应的是这个函数，所以直接调用。哎，你把这些东西写完以后，哎写完以后最后一步我们要在浏览器端去实现它，那这个时候我们这inex我们准备好了，哎准备哎我这还没闪，其实这给大家写出来了。这一步你看你先得引入c.GS这个库，而这一步是同时括号GS是一样的，你用人家的语法是不是引入人家的库啊。接下来你再写标签。在这里边一旦说你引入了CGS，这个库，自动多了一个对象叫CGS。它里面有一个方法叫use use这个直译过来是什么使用的意思？而在这个里边传入的东西是什么呢？是我们要找到我们主模块的一个路径，主模块是不是在这儿，我们看一下这个路径对不对啊。

GS下边module下边main JS，其实这个路径是对的，那这个时候你就可以打开你的页面看一下。废了了，关了吧。我刚才开两个是为了证明，我是怕有一个没刷出来，其实发现他就是这样哎。来，咱们来检查一下。R e Qu。I4，看这。我这是不是忘了声明了，看到没有？不就这吗？好，来。刷新走你。哪边又忘了失眠了。那就三。写的一时兴起了，就忘了一块xbos，然后呢，再来一个Mo，我再看下二吧。

一没问题吧，来刷新。243是不是有了一为什么没出来，哎，是因为我一这不是用的colo，咱们是不是用的值呢？那也就说我当前的函数调用的话，它是给我返回了一个值，我应该去干嘛。咱们是不是应该是在这边去打印一下哎。来。这个顺序有了，我现在问一下大家有没有什么疑问啊。你看一下啊，1243，记住了输出顺序啊，1243好。你想你首先加载的是主模块，那当主模块去加载的时候，我在这一步是不是引入的一，然后我去打印一没有问题吧。但是接下来为什么是二？然后又是一个四，最后是三呢，那这个顺序可能有同学想不明白，我不应该先执行四的这个吗？

为什么先执行这两个？也好理解，你看啊，当我们二这个模块的时候，其实我这一步还不会执行呢，我是不是应该先去读它里面的文件啊。那一旦读这个里边的文件，你看一下我这这不是同步引入是模块二吗。所以二这一步是不是立马跟着去执行了？好，二执行的也就我们几接着下来打印的应该是二。哎，那我们再看下边大家说为什么是四，最后是三呢？如果是按照我刚才说的，是不是应该是先把三的给我整出来。又因为31故的。异步的，异步的意思就是说我现在这个回调函数是不是得等我其他的执行完了他才能上来。

所以我们在这儿先执行的是主线车上了是不是它。能理解吗？这不没跟上了吗？没事啊，来咱们再看。刚刚的顺序我是这样设计的，哎，没有按顺序来排出来。就是说我们看到的输出是1243。为什么是123，你可以去看一下。那当我的script标签一加载的时候，肯定是先读的是主模块。读到主模块这上来第一个是不是引入的模块一。然后执行模块一，这是很正常的。没有任何问题，然后接下来我这是不是又去读模块四啊。模块四里面它有依赖关系啊。那这个时候到代码执行到这了吧，那执行到这他干了些什么事，是不是执行模块二里面的东西啊。所以打印出来的是二，也就说第二步为二。

接下来有的同学可能在这儿不懂，说那二完了，不应该是三吗？注意，我这都写了一步引入，异步引入的意思，这个回调函数。什么时候执行呢？首先它是个异步任务，那么这个回调函数是不是先被放到世界队列里面啊？然后跳过好不会阻塞，接下来咔咔只要说这加载完了就回到了我主模块上了，哎出来出来时加载完了，加载完了我是不是应该先执行主线程上的它。那这一步一直行，MODU4里面的FU1直行，就这一步嘛，去打印我自己的。打印完了，发现主线程上的全部执行完了，好异步的，哎，这个回调函数通过，哎，他之前通过螺旋的方式一直在问他，那现在我执行完了，像钩子一样把这个函数来勾出来去执行。

哎，这就是我们输出的数据。啊啊，你们接下来的时间就照这个教程把这个过一遍啊，什么都有。