前端模塊化開發

前端模塊化

在JavaScript發展初期就是爲了實現簡單的頁面交互邏輯，寥寥數語便可；現在CPU、瀏覽器性能獲得了極大的提高，不少頁面邏輯遷移到了客戶端（表單驗證等），隨着web2.0時代的到來，Ajax技術獲得普遍應用，jQuery等前端庫層出不窮，前端代碼日益膨脹

這時候JavaScript做爲嵌入式的腳本語言的定位動搖了，JavaScript卻沒有爲組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（module）了，JavaScript極其簡單的代碼組織規範不足以駕馭如此龐大規模的代碼

模塊

既然JavaScript不能handle如此大規模的代碼，咱們能夠借鑑一下其它語言是怎麼處理大規模程序設計的，在Java中有一個重要帶概念——package，邏輯上相關的代碼組織到同一個包內，包內是一個相對獨立的王國，不用擔憂命名衝突什麼的，那麼外部若是使用呢？直接import對應的package便可

import java.util.ArrayList;

遺憾的是JavaScript在設計時定位緣由，沒有提供相似的功能，開發者須要模擬出相似的功能，來隔離、組織複雜的JavaScript代碼，咱們稱爲模塊化。

一個模塊就是實現特定功能的文件，有了模塊，咱們就能夠更方便地使用別人的代碼，想要什麼功能，就加載什麼模塊。模塊開發須要遵循必定的規範，各行其是就都亂套了

規範造成的過程是痛苦的，前端的先驅在刀耕火種、茹毛飲血的階段開始，發展到如今初具規模，簡單瞭解一下這段不凡的歷程

函數封裝

咱們在講函數的時候提到，函數一個功能就是實現特定邏輯的一組語句打包，並且JavaScript的做用域就是基於函數的，因此把函數做爲模塊化的第一步是很天然的事情，在一個文件裏面編寫幾個相關函數就是最開始的模塊了

function fn1(){
    statement
}

function fn2(){
    statement
}

 

這樣在須要的之後夾在函數所在文件，調用函數就能夠了

這種作法的缺點很明顯：污染了全局變量，沒法保證不與其餘模塊發生變量名衝突，並且模塊成員之間沒什麼關係。

對象

爲了解決上面問題，對象的寫法應運而生，能夠把全部的模塊成員封裝在一個對象中

var myModule = {
    var1: 1,

    var2: 2,

    fn1: function(){

    },

    fn2: function(){

    }
}

 

這樣咱們在但願調用模塊的時候引用對應文件，而後

myModule.fn2();

這樣避免了變量污染，只要保證模塊名惟一便可，同時同一模塊內的成員也有了關係

看似不錯的解決方案，可是也有缺陷，外部能夠隨意修改內部成員

myModel.var1 = 100;

這樣就會產生意外的安全問題

當即執行函數

能夠經過當即執行函數，來達到隱藏細節的目的

var myModule = (function(){
    var var1 = 1;
    var var2 = 2;

    function fn1(){

    }

    function fn2(){

    }

    return {
        fn1: fn1,
        fn2: fn2
    };
})();

 

這樣在模塊外部沒法修改咱們沒有暴露出來的變量、函數

上述作法就是咱們模塊化的基礎，目前，通行的JavaScript模塊規範主要有兩種：CommonJS和AMD

CommonJS

咱們先從CommonJS談起，由於在網頁端沒有模塊化編程只是頁面JavaScript邏輯複雜，但也能夠工做下去，在服務器端卻必定要有模塊，因此雖然JavaScript在web端發展這麼多年，第一個流行的模塊化規範卻由服務器端的JavaScript應用帶來，CommonJS規範是由NodeJS發揚光大，這標誌着JavaScript模塊化編程正式登上舞臺。

1. 定義模塊
   根據CommonJS規範，一個單獨的文件就是一個模塊。每個模塊都是一個單獨的做用域，也就是說，在該模塊內部定義的變量，沒法被其餘模塊讀取，除非定義爲global對象的屬性

2. 模塊輸出：
   模塊只有一個出口，module.exports對象，咱們須要把模塊但願輸出的內容放入該對象

3. 加載模塊：
   加載模塊使用require方法，該方法讀取一個文件並執行，返回文件內部的module.exports對象

看個例子

//模塊定義 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加載模塊

var nameModule = require('./myModel.js');

nameModule.printName();

 

不一樣的實現對require時的路徑有不一樣要求，通常狀況能夠省略js拓展名，可使用相對路徑，也可使用絕對路徑，甚至能夠省略路徑直接使用模塊名（前提是該模塊是系統內置模塊）

尷尬的瀏覽器

仔細看上面的代碼，會發現require是同步的。模塊系統須要同步讀取模塊文件內容，並編譯執行以獲得模塊接口。

這在服務器端實現很簡單，也很天然，然而， 想在瀏覽器端實現問題卻不少。

瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script 標籤。但腳本標籤天生異步，傳統CommonJS模塊在瀏覽器環境中沒法正常加載。

解決思路之一是，開發一個服務器端組件，對模塊代碼做靜態分析，將模塊與它的依賴列表一塊兒返回給瀏覽器端。 這很好使，但須要服務器安裝額外的組件，並所以要調整一系列底層架構。

另外一種解決思路是，用一套標準模板來封裝模塊定義，可是對於模塊應該怎麼定義和怎麼加載，又產生的分歧：

AMD

AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規範

因爲不是JavaScript原生支持，使用AMD規範進行頁面開發須要用到對應的庫函數，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化的產出

requireJS主要解決兩個問題

1. 多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器
2. js加載的時候瀏覽器會中止頁面渲染，加載文件越多，頁面失去響應時間越長

看一個使用requireJS的例子

// 定義模塊 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加載模塊
require(['myModule'], function (my){
　 my.printName();
});

 

語法

requireJS定義了一個函數 define，它是全局變量，用來定義模塊

define(id?, dependencies?, factory);

 

1. id：可選參數，用來定義模塊的標識，若是沒有提供該參數，腳本文件名（去掉拓展名）
2. dependencies：是一個當前模塊依賴的模塊名稱數組
3. factory：工廠方法，模塊初始化要執行的函數或對象。若是爲函數，它應該只被執行一次。若是是對象，此對象應該爲模塊的輸出值

在頁面上使用require函數加載模塊

require([dependencies], function(){});

 

require()函數接受兩個參數

1. 第一個參數是一個數組，表示所依賴的模塊
2. 第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊

require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功後，纔會運行，解決了依賴性的問題。

CMD

CMD 即Common Module Definition通用模塊定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS同樣，只不過在模塊定義方式和模塊加載（能夠說運行、解析）時機上有所不一樣

語法

Sea.js 推崇一個模塊一個文件，遵循統一的寫法

define

define(id?, deps?, factory)

由於CMD推崇

1. 一個文件一個模塊，因此常常就用文件名做爲模塊id
2. CMD推崇依賴就近，因此通常不在define的參數中寫依賴，在factory中寫

factory有三個參數

function(require, exports, module)

 

require

require 是 factory 函數的第一個參數

require(id)

require 是一個方法，接受 模塊標識 做爲惟一參數，用來獲取其餘模塊提供的接口

exports

exports 是一個對象，用來向外提供模塊接口

module

module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法

demo

// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加載模塊
seajs.use(['myModule.js'], function(my){

});

 

AMD與CMD區別

關於這兩個的區別網上能夠搜出一堆文章，簡單總結一下

最明顯的區別就是在模塊定義時對依賴的處理不一樣

1. AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊
2. CMD推崇就近依賴，只有在用到某個模塊的時候再去require

這種區別各有優劣，只是語法上的差距，並且requireJS和SeaJS都支持對方的寫法

AMD和CMD最大的區別是對依賴模塊的執行時機處理不一樣，注意不是加載的時機或者方式不一樣

不少人說requireJS是異步加載模塊，SeaJS是同步加載模塊，這麼理解其實是不許確的，其實加載模塊都是異步的，只不過AMD依賴前置，js能夠方便知道依賴模塊是誰，當即加載，而CMD就近依賴，須要使用把模塊變爲字符串解析一遍才知道依賴了那些模塊，這也是不少人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到能夠忽略

爲何咱們說兩個的區別是依賴模塊執行時機不一樣，爲何不少人認爲ADM是異步的，CMD是同步的（除了名字的緣由。。。）

一樣都是異步加載模塊，AMD在加載模塊完成後就會執行改模塊，全部模塊都加載執行完後會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不必定一致，看網絡速度，哪一個先下載下來，哪一個先執行，可是主邏輯必定在全部依賴加載完成後才執行

CMD加載完某個依賴模塊後並不執行，只是下載而已，在全部依賴模塊加載完成後進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是徹底一致的

這也是不少人說AMD用戶體驗好，由於沒有延遲，依賴模塊提早執行了，CMD性能好，由於只有用戶須要的時候才執行的緣由