模块化

1.CommonJS

（1） commonjs规范主要是针对于服务器端的，如node.js。
CommonJS module基本要求如下:
①require用来表示是一个函数，它仅有字符串参数，且要遵守Module Identifiers的规定，该方法返回指定的模块API
②如果存在依赖的其它模块，那么依次加载
③仅能使用标示符exports导出API
如：

   var add=require('math').add;
   exports.increment=function(val){
    return add(val,1);
   }

很多库支持AMD规范，如MooTools 、jQuery 、qwery 、bonzo 甚至还有 firebug

2.AMD和CMD

（全称:异步模块定义）是针对于浏览器端的规范，模块书写格式如:

define(function(require, exports, module) {
    var base = require('base');
    exports.show = function() {
        // todo with module base
    }
});

实现AMD的库有RequireJS 、curl 、Dojo 、bdLoad、JSLocalnet 、Nodules等。
AMD、CMD是用在浏览器端的，异步的；

CMD规范兼容了Commonjs规范和AMD规范;

define(function(require, exports, module){
  var a = require('./a.js');
  a.func();
  require('./b.js');
  b.func();

  //对外提供接口
  exports.func = {……}

  //或使用下面这种方式
  module.exports = {
   ……
  }
})

cmd和amd的区别：
1）amd是提前执行，cmd是延迟执行；
2）cmd推崇依赖就近，amd推崇依赖前置
3）amd的require分全局和局部，cmd没有全局require

3.requirejs 和 seajs

3.1 require.js

1）可解决的问题：实现js文件的异步加载，避免网页失去响应；
管理模块之间的依赖性，便于代码的编写和维护；

　<script src="js/require.js" defer async="true" ></script>

  //加载主模块main.js
 <script src="js/require.js" data-main="js/main" ></script>

主模块main.js
(1) 加载顺序：’moduleA’, ‘moduleB’, ‘moduleC’是异步加载，默认它们是在同一个目录下，后面的回调函数是当前面指定的模块都加载成功后，才被调用。

　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　　　moduleA.add(1,1);
　　});

(2)指定模块的加载路径

 require.config({
   baseUrl:"js/lib",
   paths:{
     "A":"moduleA",
     "B":"moduleB",
    }
  })

(3)modeuleA.js写法
无依赖

define(function(){
  var add = function(x,y){
   return x + y;
  };
  return{
   add: add ;
  }
})

(4)加载非AMD规范的库

require.config({
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　  //表明模块的依赖性
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

3.2 seajs

1.一个文件就是一个模块;
通过export暴露接口,通过require引入依赖；

define(function(require,export,module){
        var util = require('./util.js');
        util.dosomething();

       //异步加载
      require.async('./b',function(b){
        b.dosomething();
       })
       //对外暴露接口
       exports.init = function(){

  }
});

3.3 Requirejs与Seajs的区别

（1）定位不同：requireJS想成为浏览器、Rhino/Node等环境的模块加载器；而Sea.js则专注于web浏览器端；
（2）RequireJS遵循AMD（异步模块定义）规范，而Sea.js遵循CMD（通用模块定义）
（3）插件机制不同：RequireJS采取的是在源码中预留接口的形式，插件较单一；Sea.js采取的是通过事件机制，插件较丰富
（4）对开发调试的支持有差异：Sea.js 非常关注

a.js

//commonjs
function funcA(){
 console.log('hello webpack');
}
module.exports = funcA; 

//AMD
define(function(){
  function init(){
   console.log('hello webpack');
  }
  return{
   init: init
  }
});

b.js

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

//AMD方式进行加载
require(["a"],function(){
  a.init();
})