Javascript模块化：CommonJs,AMD,CMD

1.模块化特点

每个文件就是一个模块，有自己的作用域。

在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

1.CommonJS（适合服务器端）

同步加载模块    

规范实现：nodejs,webpack

使用：

     通过require来加载模块；

      通过exports和moduld.exports来暴露模块中的内容；

     *exports指向module.exports,可以给exports对象添加属性方法，但不可以直接赋值

     (直接复制会切断exports和module.exports之间的联系)

   例子：

   a.js

function hello (){}

module.exports.hello = hello;

b.js

var a = require('./a');

a.hello();

3.AMD （Asynchronous Module Definition，适合浏览器端）

异步加载模块，允许指定回调函数

规范实现：require.js,curl.js

使用：

define(id?,dependencies?,factory);

require([module], callback);

例子：

define('a',['jquery'],function(jquery){

//do something

return {};

})

require(['a'],function(a){

//do something

})

4.CMD规范

同步加载模块

通用模块定义 (Common Module Definition) 是 SeaJS 在推广过程中对模块定义的规范化产出

输出的模块兼容CommonJS规范

使用：

define(function(require,exports,module){
    var a = require('a')
    function hello(){

    }
    module.export.hello = hello;
});

 

参考：http://javascript.ruanyifeng.com/nodejs/module.html#

https://www.cnblogs.com/chenguangliang/p/5856701.html

以上模块化规范都是基于ES5的。

ES6已经实现了模块化功能，完全可以取代 CommonJS 和 AMD 等规范，成为浏览器和服务器通用的模块解决方案。

但基于浏览器对ES6的支持，浏览器兼容性问题，一切还待推行。

ES6学习可参考：http://es6.ruanyifeng.com/#docs/module