前端模塊規範區別與應用

前端模塊規範有:AMD,CMD,CommonJs,UMD

一.總覽

1.瀏覽器端

• AMD是requireJs在推廣過程當中對模塊定義的規範(異步模塊規範)
• CMD是seaJs在推廣過程當中對模塊定義的規範(普通模塊規範)

2.node端

•     commonJs(同步模塊規範)

3.瀏覽器和node兼容端

• UMD(通用模塊規範)

4.ES6內置模塊化module

  import引入一個模塊

  export [default] 對外暴露一個對象

 

二.應用

1.AMD

提早執行(異步加載:依賴先執行)--依賴前置

提供define(定義模塊)和require(調用模塊)方法來進行模塊化編程

   define（id？，dependencies？，factory);

require([module], callback);

//Utils模塊
define(function(){
 function Utils(name) {
         this._name = name;
  }
 Utils.add = function(a, b) {
       return a + b;
  }
 return Utils;
})

//加載和使用
// 配置各個模塊地址
require.config({
 　paths: {
　　　　　"Utils": "./js/lib/Utils"
　 },
   shim: {}　　　　    
});
//加載指定模塊
require(["Utils"], function(Utils) {
      
});

 

2.CMD 

延遲執行(按需加載)--依賴就近

在 CMD 規範中，一個模塊就是一個文件

define(factory);  //factory能夠是個函數,也能夠是個對象或字符串
define(id?, deps?, factory)  //字符串id-模塊標識,數組deps-依賴模塊(define(function(require, exports){

//require(id) 接受 模塊標識 做爲惟一參數
  var a = require('./a'); a.doSomething()
 //require.async(id, callback?) 方法用來在模塊內部異步加載模塊，並支持指定回調
  require.async('./b', function(b) { b.doSomething(); });
 //加載多個模塊 require.async(['./c', './d'], function(c, d) { c.doSomething(); d.doSomething(); });
 //require.resolve(id)模塊系統內部的路徑解析機制來解析並返回模塊路徑
  console.log(require.resolve('./b'));
 // 對外提供 foo 屬性
  exports.foo = 'bar'; // 對外提供 doSomething 方法
  exports.doSomething = function() {}; //return 直接向外提供接口
  return { foo: 'bar', doSomething: function() {} };
 // 僅僅是  的一個引用,並不會改變  的值。所以給  賦值是無效的，不能用來更改模塊接口 module.exports = { foo: 'bar', doSomething: function() {} }; })
exportsmodule.exportsmodule.exportsexports

 

3.commonJs

加載模塊是同步的,只有加載完成後才能執行後面的操做

模塊分爲:

(1)模塊引用(require)

(2)模塊定義(exports)

(3)模塊標識(module)

//模塊
function Utils(name) {
     this._name = name;
}
Utils.add = function(a, b) {
   return a + b;
}
// 將類 Utils 做爲當前文件的模塊導出
module.exports = Utils;

//加載模塊
var Utils = require('./Utils.js');
console.log(Utils.add(10, 20));