当前位置:网站首页 / web开发 / 正文

【转载】浅析JS中的模块规范(CommonJS,AMD,CMD)

时间:2016年01月04日 | 作者 : aaronyang | 分类 : web开发 | 浏览: 1069次 | 评论 0

如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已。

现在就看看吧,这些规范到底是啥东西,干嘛的。


一、CommonJS

 CommonJS就是为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中。

 CommonJS能有一定的影响力,我觉得绝对离不开Node的人气,不过喔,Node,CommonJS,浏览器甚至是W3C之间有什么关系呢,我找到了个贴切的图:


  |---------------浏览器----- ------------------|        |--------------------------CommonJS----------------------------------|

 

  |  BOM  |       | DOM |        | ECMAScript |         | FS |           | TCP |         | Stream |        | Buffer |          |........|

 

  |-------W3C-----------|       |---------------------------------------Node--------------------------------------------------|

 

 

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。

比如说我们就可以这样用了:

 

复制代码

 //sum.js

 exports.sum = function(){...做加操作..};

 

 //calculate.js

 var math = require('sum');

 exports.add = function(n){

     return math.sum(val,n);

 };

复制代码

 

 

虽说Node遵循CommonJS的规范,但是相比也是做了一些取舍,填了一些新东西的。

不过,说了CommonJS也说了Node,那么我觉得也得先了解下NPM了。NPM作为Node的包管理器,不是为了帮助Node解决依赖包的安装问题嘛,那它肯定也要遵循CommonJS规范啦,它遵循包规范(还是理论)的。

CommonJS WIKI讲了它的历史,还介绍了modules和packages等。

 

 

二、AMD

CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,为什么这么说呢?

这需要分析一下浏览器端的js和服务器端js都主要做了哪些事,有什么不同了:

 

 

 

---------------------------------------服务器端JS   |    浏览器端JS-------------------------------------------

 

                                   相同的代码需要多次执行  |    代码需要从一个服务器端分发到多个客户端执行

 

                                     CPU和内存资源是瓶颈   |    带宽是瓶颈

 

                                        加载时从磁盘中加载   |    加载时需要通过网络加载

 

---------------------------------------------------------------------------------------------------------------

 

 

 

于是乎,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。

AMD就只有一个接口:define(id?,dependencies?,factory);

它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样:

 

 define(['dep1','dep2'],function(dep1,dep2){...});

 

要是没什么依赖,就定义简单的模块,下面这样就可以啦:

 define(function(){
     var exports = {};
     exports.method = function(){...};
     return exports;
});


咦,这里有define,把东西包装起来啦,那Node实现中怎么没看到有define关键字呢,它也要把东西包装起来呀,其实吧,只是Node隐式包装了而已.....

RequireJS就是实现了AMD规范的呢。

这有AMD的WIKI中文版,讲了很多蛮详细的东西,用到的时候可以查看:AMD的WIKI中文版

 

 

三、CMD

大名远扬的玉伯写了seajs,就是遵循他提出的CMD规范,与AMD蛮相近的,不过用起来感觉更加方便些,最重要的是中文版,应有尽有:seajs官方doc

define(function(require,exports,module){...});

用过seajs吧,这个不陌生吧,对吧。


推荐您阅读更多有关于“web,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表