模塊化

?xiaoxiao, 發(fā)布于2019-08-20 17:45 / 2876人閱讀

摘要：模塊化總結(jié)最近重新復習的模塊化的相關(guān)知識，總結(jié)一下，僅供自己理解和大家參考。模塊化的優(yōu)點可維護性根據(jù)定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關(guān)系，以便于獨立對其進行改進和維護。

模塊化總結(jié)

最近重新復習的模塊化的相關(guān)知識，總結(jié)一下，僅供自己理解和大家參考。

模塊化的優(yōu)點

可維護性：根據(jù)定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關(guān)系，以便于獨立對其進行改進和維護。維護一個獨立的模塊比起一團凌亂的代碼來說要輕松很多。

命名空間：在JavaScript中，最高級別的函數(shù)外定義的變量都是全局變量（這意味著所有人都可以訪問到它們）。也正因如此，當一些無關(guān)的代碼碰巧使用到同名變量的時候，我們就會遇到“命名空間污染”的問題。

模塊化規(guī)范

現(xiàn)在比較流行的模塊化規(guī)范主要有commomJS,AMD, CMD ,ES6 ，現(xiàn)在逐一說明一下.

commonJS

commonJS 是服務器端的模塊化規(guī)范，node.js就是參照commonJS規(guī)范實現(xiàn)的。commonJS中有一個全局的方法require() 用來加載模塊。

function myModule(){
    this.hello = function(){
        return "hello";
    }
    this.goodbye = function(){
        return "gooodbye!";
    }
}
module.exports = myModile;

其實module變量代表當前模塊.

這樣就可以在其他模塊中使用這個模塊

var myModule = require("myModule");

var myModuleInstance = new myModule();
myModuleInstance.hello();
myModuleInstance.goodbye();

關(guān)于commonJS的更多，見CommonJS規(guī)范

AMD

commonJS 定義模塊的方式和引入模塊的方式還是比較簡單的，但不適合瀏覽器端，因為commonJS是同步加載的。而AMD是異步加載的，下面我們來說說AMD的書寫規(guī)范。

通過define()來定義模塊

//main.js
define(["mylib"],function(mylib){
    function foo(){
        mylib.doSomething();
    }
    return {
        foo:foo;
    }
})

define的第一個參數(shù)是依賴的模塊，必須是一個數(shù)組。通過return來暴露接口。

通過require()來加載模塊，模塊的名字默認為模塊加載器請求的指定腳本的名字。

require(["main"],function(main){
    alert(main.foo());
})

require.js就是根據(jù)AMD規(guī)范實現(xiàn)的，優(yōu)點為：

實現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應；

管理模塊之間的依賴性，便于代碼的編寫和維護。

CMD

CMD是國內(nèi)玉伯大神在開發(fā)SeaJS的時候提出來的，也是異步模塊定義。
CMD和AMD的區(qū)別:
CMD相當于按需加載，定義一個模塊的時候不需要立即制定依賴模塊，在需要的時候require就可以了，比較方便；而AMD則相反，定義模塊的時候需要制定依賴模塊，并以形參的方式引入回調(diào)函數(shù)中。

// CMD
define(function(require, exports, module) {
var a = require("./a")
a.doSomething()
// 此處略去 100 行
var b = require("./b") // 依賴可以就近書寫
b.doSomething()
// ... 
})

 // AMD 默認推薦的是
define(["./a", "./b"], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
})

關(guān)于 require.js 和 sea.js 的區(qū)別詳見SeaJS與RequireJS最大的區(qū)別

ES6

ES6在語言規(guī)格的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當簡單，完全可以取代現(xiàn)有的CommonJS和AMD規(guī)范，成為瀏覽器和服務器通用的模塊解決方案。

ES6模塊主要有兩個功能：export和import

export用于對外輸出本模塊（一個文件可以理解為一個模塊）變量的接口

import用于在一個模塊中加載另一個含有export接口的模塊。

// a.js 

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}

// b.js
//通過import獲取a.js文件的內(nèi)部變量，{}括號內(nèi)的變量來自于a.js文件export出的變量標識符。
import {sex,echo} from "./a.js" 
console.log(sex)   // boy
echo(sex) // boy

各種模塊化方案優(yōu)缺點對比：

模塊化方案	優(yōu)點	缺點
commonJS	復用性強，使用簡單，實現(xiàn)簡單有不少可以拿來即用的模塊，生態(tài)不錯	同步加載不適合瀏覽器瀏覽器的請求都是異步加載不能并行加載多個模塊。
AMD	異步加載適合瀏覽器可并行加載多個模塊	模塊定義方式不優(yōu)雅，不符合標準模塊化
ES6	可靜態(tài)分析，提前編譯面向未來的標準	瀏覽器原生兼容性差，所以一般都編譯成ES5 目前可以拿來即用的模塊少，生態(tài)差