前端模塊化 commonjs AMD CMD ES6模塊化

模塊化

1.什么是模塊化

  • 將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件), 并進行組合在一起
  • 塊的內部數據與實現是私有的, 只是向外部暴露一些接口(方法)與外部其它模塊通信

2.模塊化的理解

模塊化是一種處理復雜系統分解為更好的可管理模塊的方式。簡單來說就是解耦,簡化開發,一個模塊就是實現特定功能的文件,可以更方便地使用別人的代碼,想要什么功能,就加載什么模塊。模塊開發需要遵循一定的規范

3.模塊化的好處

  • 避免命名沖突(減少命名空間污染)
  • 更好的分離, 按需加載
  • 更高復用性
  • 高可維護性

4.模塊化的作用

  • 減少JS文件的請求次數
    通過模塊化將JS文件整合為一個入口,然后引入頁面可以有效的減少對JS文件的請求

  • 使各JS文件的依賴關系清晰
    在模塊化中可以清晰的分析各模塊的引用關系,明確JS代碼的結構

  • 降低項目的維護成本
    當有某個模塊需要添加或減少某個功能使,不需要將整個代碼重構,只需要在相應的模塊進行修改就可以

CommonJS規范

Node 應用由模塊組成,采用 CommonJS 模塊規范,前端的webpack也是對CommonJS原生支持的。每個文件就是一個模塊,有自己的作用域。在一個文件里面定義的變量、函數、類,都是私有的,對其他文件不可見。在服務器端,模塊的加載是運行時同步加載的;在瀏覽器端,模塊需要提前編譯打包處理。

基本語法

定義模塊

es1.js
var name = "Tom";
var age = 16;
function say(name,age){
   console.log(name+"is"+age+"years old")
}
//語法1
module.exports.name = name;
module.exports.age = age;
module.exports.say = say;
//語法2
exports.name = name;
exports.age = age;
exports.say = say;
//語法3
module.exports = {
  name,
  age,
  say
}
//語法4
module.exports = {
  name : "Tom",
  age : 16,
  say(name,age){
   console.log(name+"is"+age+"years old")
  }
}

注:
1.exports 與module.exports 的區別:exports 是對 module.exports 的引用,不能直接給exports 賦值,直接賦值無效,結果是一個空對象, module.exports 可以直接賦值
2.一個文件不能寫多個module.exports ,如果寫多個,對外暴露的接口是最后一個module.exports
3.模塊如果沒有指定使用module.exports 或者exports 對外暴露接口時,在其他文件就引用該模塊,得到的是一個空對象{}
4.瀏覽器不兼容CommonJS,在于缺少四個Node.js環境的變量。(module,exports,require,global)

引用模塊

var module = require('./es1.js')
consolo.log(module.name)          //Tom
consolo.log(module.age)           //16
module.say(name,age)              //Tom is 16 years old
//直接引用模塊的方法
var name = require('./es1.js').name
var age = require('./es1.js').age
var say= require('./es1.js').say
console.log(name)          //Tom
console.log(age)           //16
say(name,age)              //Tom is 16 years old

CMD規范

CMD規范專門用于瀏覽器端,模塊的加載是異步的,模塊使用時才會加載執行。CMD規范整合了CommonJS和AMD規范的特點。在 Sea.js 中,所有 JavaScript 模塊都遵循 CMD模塊定義規范。

  • 優點 可以按需加載,依賴就近。
  • 缺點 依賴SPM打包,模塊的加載邏輯偏重
基本語法

定義模塊

// 使用 exports 直接向外提供接口。
define(function(require, exports) { 
 // 對外提供 name屬性
  exports.name = 'Tom'; 
 // 對外提供 say 方法
  exports.say= function(name) {
    console.log("hello"+name)
  };
});
 
// 使用 return 直接向外提供接口。
define(function(require) {  
  return {
    name : 'Tom',    
    say: function(name) {
     console.log("hello"+name)
    }
  };
});
 
// 使用 module.exports 直接向外提供接口。
define(function(require, exports, module) { 
  module.exports = {
    name: 'Tom', 
    say: function(name) {
      console.log("hello"+name)
    }
  };
});

引用模塊

define(function (require) {
  var m1 = require('./module1')
  console.log(m1.name)      // Tom
  m1.say(m1.name)           // Hello Tom
})

// require.async 方法用來在模塊內部異步加載模塊,并在加載完成后執行指定回調。callback 參數可選。
define(function(require, exports, module) {  
// 異步加載一個模塊
  require.async('./module1', function(a) {
    a.doSomething();
  }); 

// 異步加載多個模塊,在加載完成時,執行回調
  require.async(['./module2', './module3'], function(b, c) {
    b.doSomething();
    c.doSomething();
  });

AMD規范

AMD 即 Asynchronous Module Definition,中文名是“異步模塊定義”的意思。在瀏覽器環境,要從服務器端加載模塊,就必須采用非同步模式,因此瀏覽器端一般采用AMD規范。AMD是一個在瀏覽器端模塊化開發的規范,而AMD規范的實現,就是require.js。

  • 優點 異步加載,不阻塞頁面的加載,能并行加載多個模塊
  • 缺點 不能按需加載,必須提前加載所需依賴

定義模塊

// 獨立模塊 es1.js
define({
    module1: function() {},
    module2: function() {},
});

// 等價寫法
define(function () {
    return {
        module1: function() {},
        module2: function() {},
    };
});
// 非獨立模塊 只有先加載這兩個模塊,新模塊才能正常運行  es2.js
define(['es1', 'es2'], function(m1, m2) {
       return {
        method: function() {
            m1.methodA();
            m2.methodB();
        }
    };
});

注:上面代碼表示新模塊返回一個對象,該對象的method方法就是外部調用的接口,menthod方法內部調用了m1模塊的methodA方法和m2模塊的methodB方法。
需要注意的是,回調函數必須返回一個對象,這個對象就是你定義的模塊。

// 當依賴過多的時,引用變得十分繁瑣
define(
    [ 'dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],
    function(dep1,   dep2,   dep3,   dep4,   dep5,   dep6,   dep7,   dep8){
        ...
    }
);

// RequireJS提供一種更簡單的寫法
define(
    function (require) {
        var dep1 = require('dep1'),
            dep2 = require('dep2'),
            dep3 = require('dep3'),
            dep4 = require('dep4'),
            dep5 = require('dep5'),
            dep6 = require('dep6'),
            dep7 = require('dep7'),
            dep8 = require('dep8');
            ...
    }
});

引用模塊

require(['es1', 'es2'], function ( es1, es2) {
        es1.module1()
        es1.module2()
        es2.mothod()
});

ES6 模塊化

ES6 在語言標準的層面上,實現了模塊功能,而且非常簡單,ES6到來,完全可以取代 CommonJS 和 AMD規范,成為瀏覽器和服務器通用的模塊解決方案。ES6 模塊的設計思想是盡量的靜態化,使得編譯時就能確定模塊的依賴關系,以及輸入和輸出的變量。
注:由于ES6目前在部分版本的瀏覽器中無法執行,所以,我們需要通過babel將不被支持的import編譯為當前受到廣泛支持的 require。

特點
  1. ES6 模塊之中,頂層的this指向undefined,即不應該在頂層代碼使用this。
  2. 自動采用嚴格模式"use strict"。須遵循嚴格模式的要求
  3. ES6 模塊的設計思想是盡量的靜態化,編譯時加載”或者靜態加載,編譯時輸出接口
  4. ES6 模塊export、import命令可以出現在模塊的任何位置,但是必須處于模塊頂層。如果處于塊級作用域內,就會報錯
  5. ES6 模塊輸出的是值的引用

定義模塊 export

//變量    es3.js
export var m = 1;

//函數
export function fn(x, y) {
  return x * y;
};

//類class
class Hello{
  test(){
    console.log("hello")
  }
}
// 也可以合并為一個出口暴露
var m = 1;
function fn(x, y) {
  return x * y;
};
class Hello{
  test(){
    console.log("hello")
  }
}
export {
  m,
  fn,
  Hello
}

// 在暴露模塊時,可以通過 as 來進行重命名
export{
  num as m,
  foo as fn,
  Test as Hello
}

引用模塊

//靜態加載,只加載es3.js 文件中三個變量,其他不加載
import {m, fn, Hello} from './es3.js';

//import命令要使用as關鍵字,將輸入的變量重命名。
import {fn as fn1} from './es3.js';

//整體加載模塊
improt * as all from './es3.js'
console.log(all.m)              // 1
console.log(all.fn(3,4))        // 12
all.Hello.test()                // hello

定義模塊 export default

// es4.js
export default function foo() {
  console.log('foo');
}

// 或者寫成

function foo() {
  console.log('foo');
}
export default foo;

// 當有多個變量或函數需要暴露時,也可以合并為一個出口同時暴露
//  export default  {
//    m,
//    fn,
//    Hello
//  }
//此時的引用方法也發生一點變化
import  myfoo from './es4.js';
myfoo()        // foo   =>(string)

仔細對比可以發現,在引用模塊的時候第二種方法接收的變量不再需要包裹在{}中。
使用import命令的時候,用戶需要知道所要加載的變量名或函數名,否則無法加載。但是用戶肯定希望快速上手,未必愿意閱讀文檔,去了解模塊有哪些屬性和方法。
為了給用戶提供方便,讓他們不用閱讀文檔就能加載模塊,就要用到export default命令,為模塊指定默認輸出。這樣在引用模塊的時候,我們就可以自己定義任意的變量來接收傳入的模塊,而不需要關注原模塊輸出的函數名了。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容