设为首页 收藏本站
查看: 1845|回复: 0

[经验分享] 彻底弄懂CommonJS和AMD/CMD!

[复制链接]

尚未签到

发表于 2017-2-25 10:44:51 | 显示全部楼层 |阅读模式
  JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已。 现在就看看吧,这些规范到底是啥东西,干嘛的。
  一、CommonJS




CommonJS就是为JS的表现来制定规范,NodeJS是这种规范的实现,webpack 也是以CommonJS的形式来书写。因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中。它的终极目标是提供一个类似Python,Ruby和Java标准库。  CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
  require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。
  虽说Node遵循CommonJS的规范,但是相比也是做了一些取舍,填了一些新东西的。
  不过,说了CommonJS也说了Node,那么我觉得也得先了解下NPM了。NPM作为Node的包管理器,不是为了帮助Node解决依赖包的安装问题嘛,那它肯定也要遵循CommonJS规范啦,它遵循包规范(还是理论)的。
  CommonJS WIKI讲了它的历史,还介绍了modules和packages等。
  二、AMD
  CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,为什么这么说呢?
  这需要分析一下浏览器端的js和服务器端js都主要做了哪些事,有什么不同了:
  于是乎,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。
  AMD就只有一个接口:define(id?,dependencies?,factory);
  它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,像这样:



1 define(['dep1','dep2'],function(dep1,dep2){...});
  要是没什么依赖,就定义简单的模块,下面这样就可以啦:



1 define(function(){
2     var exports = {};
3     exports.method = function(){...};
4     return exports;
5 });
  咦,这里有define,把东西包装起来啦,那Node实现中怎么没看到有define关键字呢,它也要把东西包装起来呀,其实吧,只是Node隐式包装了而已.....
  RequireJS就是实现了AMD规范的呢。
  这有AMD的WIKI中文版,讲了很多蛮详细的东西,用到的时候可以查看:AMD的WIKI中文版
  三、CMD
  大名远扬的玉伯写了seajs,就是遵循他提出的CMD规范,与AMD蛮相近的,不过用起来感觉更加方便些,最重要的是中文版,应有尽有:seajs官方doc



1 define(function(require,exports,module){...});
  用过seajs吧,这个不陌生吧,对吧。
  前面说AMD,说RequireJS实现了AMD,CMD看起来与AMD好像呀,那RequireJS与SeaJS像不像呢?
  虽然CMD与AMD蛮像的,但区别还是挺明显的,官方非官方都有阐述和理解,我觉得吧,说的都挺好:
  官方阐述SeaJS与RequireJS异同
  SeaJS与RequireJS的最大异同(这个说的也挺好)

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346961-1-1.html 上篇帖子: Express使用手记:核心入门 下篇帖子: 前端神器!!gulp livereload实现浏览器自动刷新
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表