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; 
}