CommonJS,RequireJS,AMD/CMD之间的关系
- CommonJS是一个JavaScript面向服务端、桌面开发环境提供的API,它提供包括模块化、命令行等特性。其中在模块加载上CommonJS采用同步加载。著名的NodeJS就是采用的CommonJS标准实现的模块加载机制。
- AMD 是 RequireJS 在推广过程中对模块定义的规范,它定义了兼容浏览器应用的异步模块加载方式。
- CMD 是 SeaJS 在推广过程中对模块定义的规范。
- AMD:提前执行(异步加载:依赖先执行)+延迟执行。
- CMD:延迟执行(运行到需加载,根据顺序执行)。
为什么要模块化?
- 网站开发的方式正在转换成Web apps的方式。
- 随着网站变大,代码变的越来越复杂。
- 配置变的很困难。
- 开发者们想要分离式的模块或文件。
- 开发者们只想要一部分代码发送HTTP请求。
之前如何写?
Anonymous Closures
Global Import
1 2 3
| (function ($, YAHOO) { }(jQuery, YAHOO));
|
Module Export
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| var MODULE = (function () { var my = {}, privateVariable = 1; function privateMethod() { } my.moduleProperty = 1; my.moduleMethod = function () { }; return my; }());
|
Augmentation(耦合)
1 2 3 4 5 6 7
| var MODULE = (function (my) { my.anotherMethod = function () { }; return my; }(MODULE));
|
Loose Augmentation(松耦合)
1 2 3 4 5
| var MODULE = (function (my) { return my; }(MODULE || {}));
|
Tight Augmentation(紧耦合)
1 2 3 4 5 6 7 8 9
| var MODULE = (function (my) { var old_moduleMethod = my.moduleMethod; my.moduleMethod = function () { }; return my; }(MODULE));
|
Cloning and Inheritance
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| var MODULE_TWO = (function (old) { var my = {}, key; for (key in old) { if (old.hasOwnProperty(key)) { my[key] = old[key]; } } var super_moduleMethod = old.moduleMethod; my.moduleMethod = function () { }; return my; }(MODULE));
|
Sub-modules
1 2 3 4 5 6
| MODULE.sub = (function () { var my = {}; return my; }());
|
参考:
http://requirejs.org/
http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs