js模塊化規范

1. CommonJS

• 用於服務端模塊化編程，比如nodejs就采用此規范；
• 一個文件就是一個模塊，require方法用來加載模塊，該方法讀取一個文件並執行，最后返回文件內部的module.exports對象；
• require是默認讀取.js文件的，所以require(模塊名)可以不寫后綴；
• 同步加載，由於服務端加載的模塊一般在本地，所以可以這樣；但是在客戶器端如果一個模塊過大就會導致頁面“假死”；
• module.exports屬性表示當前模塊對外輸出的接口，其他文件加載該模塊，實際上就是讀取module.exports變量；為了方便也可以用exports，exports指向module.exports；即exports = module.exports = {}
• exports.xxx相當於在導出的對象上添加屬性，該屬性對調用模塊可見；
• exports =  相當於給exports重新賦值，這樣就切斷了和module.exports的關聯，調用模塊就不能訪問exports的對象及其屬性；

2. AMD

• 加載模塊：require([module], function(module){})；
• 定義模塊：define([module], function(module){})；module為依賴模塊；
• require.js（前端模塊化管理的工具庫）實現js文件的異步加載，避免網頁失去響應；管理模塊之間的依賴性，便於代碼的編寫和維護；require.js是使用創建script元素，通過指定script元素的src屬性來實現加載模塊的；
• 依賴前置，盡早的執行模依賴塊，執行順序不一定是先1后2；
• 加載非規范的模塊

  require.config({
      baseUrl: "js/lib",
      paths: {
          "jquery": "jquery.min",
  　　  "underscore": "underscore.min",
  　　  "backbone": "backbone.min"
  　 },
      shim: {
          'underscore':{
              exports: '_'
  　　　},
  　　　'backbone': {
  　　　　deps: ['underscore', 'jquery'],
  　　　　exports: 'Backbone'
  　　　}
  　}
  });
  // exports值（輸出的變量名），表明這個模塊外部調用時的名稱；deps數組，表明該模塊的依賴性

3. CMD

• define(function(require, exports, module){
      var a = require('a');
      a.foo();
  };
• Sea.js
• 依賴就近，且在真正需要使用依賴模塊時才執行該模塊，順序固定；
• AMD和CMD最大的區別是對依賴模塊的執行時機處理不同，而不是加載的時機或者方式不同，二者皆為異步加載模塊；
• AMD依賴前置，js可以方便知道依賴模塊是誰，立即加載；而CMD就近依賴，需要使用把模塊變為字符串解析一遍才知道依賴了那些模塊

4. requirejs簡單實現

//標記已經加載成功的個數 
var REQ_TOTAL = 0; 
//模塊導出 
window.exports = {}; 
//記錄各個模塊的順序 
var exp_arr = [];
//判斷是否數組 
function isArray(param) { 
  return param instanceof Array; 
} 
//require 真正實現 
function require(arr, callback) { 
  var req_list; 
  if(isArray(arr)) { 
    req_list = arr; 
  } else { 
    req_list = [arr]; 
  } 
  var req_len = req_list.length; 
  //模塊逐個加載 
  for(var i=0;i<req_len;i++) { 
    var req_item = req_list[i]; 
    var $script = createScript(req_item, i); 
    var $node = document.querySelector('head'); 
    (function($script) { 
      //檢測script 的onload事件 
      $script.onload = function() { 
        REQ_TOTAL++; 
        var script_index = $script.getAttribute('index'); 
        exp_arr[script_index] = exports; 
        window.exports = {}; 
        //所有鏈接加載成功后，執行callback 
        if(REQ_TOTAL == req_len) { 
          callback && callback.apply(exports, exp_arr); 
        } 
      } 
      $node.appendChild($script); 
    })($script); 
  } 
} 
//創建一個script標簽 
function createScript(src, index) { 
  var $script = document.createElement('script'); 
  $script.setAttribute('src', src); 
  $script.setAttribute('index', index); 
  return $script; 
}