【前端工程化系列】簡談前端模塊化開發與開發規範

沒有前戲，簡明扼要的進入主題——什麼是模塊化開發？

模塊化開發，一個模塊就是一個實現特定功能的文件，有了模塊咱們就能夠更方便的使用別人的代碼，要用什麼功能就加載什麼模塊。

模塊化開發的4點好處：

　　1 避免變量污染，命名衝突

　　2  提升代碼複用率

　　3 提升維護性

　　4 依賴關係的管理

 

前端模塊化規範從原始野蠻階段如今慢慢進入「文藝復興」時代，實現的過程以下：

一 函數封裝

咱們在講到函數邏輯的時候提到過，函數一個功能就是實現特定邏輯的一組語句打包，在一個文件裏面編寫幾個相關函數就是最開始的模塊了

　　function m1(){
　　　　//...
　　}

　　function m2(){
　　　　//...
　　}

這樣作的缺點很明顯，污染了全局變量，而且不能保證和其餘模塊起衝突，模塊成員看起來彷佛沒啥關係

 

二 對象

爲了解決這個問題，有了新方法，將全部模塊成員封裝在一個對象中

var module = new Object({

   _count:0,

   m1:function (){  ```  },

   m2:function (){   ```  }                
  
})    

 

這樣 兩個函數就被包在這個對象中， 嘿嘿 看起來沒毛病是嗎 繼續往下：

當咱們要使用的時候，就是調用這個對象的屬性

module.m1()

誒嘿 那麼問題來了 這樣寫法會暴露所有的成員，內部狀態能夠被外部改變，好比外部代碼可直接改變計數器的值

//壞人的操做

module._count = 10;

 

最後的最後，聰明的人類找到了究極新的方法——當即執行函數，這樣就能夠達到不暴露私有成員的目的

 

var module = (function (){

    var _count = 5;
     
    var m1 = function (){  ```   };

    var m2 = function (){  ```   };

    return{
         m1:m1,
         m2:m2
    }

})()    

 

以上就是模塊化開發的基礎中的基礎，之後會說道其餘更深層次的模塊化開發。

接下來了解一下兩種模塊化規範。

 

先了解一下commonJS。

commonJS由nodeJS發揚光大，這標誌着js模塊化正式登場。

一 定義模塊

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

 

二 模塊輸出 

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

 

三 加載模塊

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

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();

 

AMD

Asynchronous Module Definition，中文名是一步模塊。它是一個在瀏覽器端模塊化開發的規範，因爲不是js原生支持，使用AMD規範進行頁面開發須要用到對應的函數庫，也就是大名鼎鼎的RequireJS，實際上AMD是RequireJS在推廣過程當中對模塊定義的規範化的產出。

requireJS主要解決兩個問題：

1 多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器。

2 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)

——id  可選參數，用來定義模塊的標識，若是沒有提供該參數，腳本文件名（去掉拓展名）

——dependencies  是一個當前模塊用來的模塊名稱數組

——factory 工廠方法，模塊初始化要執行的函數或對象，若是爲函數，它應該只被執行一次，若是是對象，此對象應該爲模塊的輸出值。

 

在頁面上使用require函數加載模塊；
require([dependencies], function(){});
require()函數接受兩個參數：
——第一個參數是一個數組，表示所依賴的模塊；
——第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊

 

AMD推崇的是依賴前置，被提早羅列出來並會背提早下載並執行，後來作了改進，能夠不用羅列依賴模塊，容許在回調函數中就近使用require引入並下載執行模塊。

 

 

CMD

即common module definition

就像AMD有個requireJS,CMD有個瀏覽器實現的sea.js，sj要解決的問題和rj同樣，只不過在模塊定義方式和模塊加載時機上有所不一樣。

cmd是sea.js在推廣過程當中的規範化產出，sea.js是另外一種前端模塊化工具，它的出現緩解了requireJS的幾個痛點。

define(id, deps, factory)

由於CMD推崇一個文件一個模塊，因此常常就用文件名做爲模塊id；
CMD推崇依賴就近，因此通常不在define的參數中寫依賴，而是在factory中寫。

factory有三個參數：
function(require, exports, module){}

一，require
require 是 factory 函數的第一個參數，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區別

總結以下：

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

AMD推崇依賴前置 在定義模塊的時候就有聲明其依賴的模塊

CMD推崇就近依賴 只有在用到某模塊的時候再去require

 

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

不少人說requireJS是異步加載模塊，SeaJS是同步加載模塊，這麼理解其實是不許確的，其實加載模塊都是異步的，只不過AMD依賴前置，js能夠方便知道依賴模塊是誰，當即加載，而CMD就近依賴，須要使用把模塊變爲字符串解析一遍才知道依賴了那些模塊，這也是不少人詬病CMD的一點，犧牲性能來帶來開發的便利性，實際上解析模塊用的時間短到能夠忽略。爲何咱們說兩個的區別是依賴模塊執行時機不一樣，爲何不少人認爲ADM是異步的，CMD是同步的（除了名字的緣由。。。）一樣都是異步加載模塊，AMD在加載模塊完成後就會執行改模塊，全部模塊都加載執行完後會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不必定一致，看網絡速度，哪一個先下載下來，哪一個先執行，可是主邏輯必定在全部依賴加載完成後才執行。CMD加載完某個依賴模塊後並不執行，只是下載而已，在全部依賴模塊加載完成後進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是徹底一致的。這也是不少人說AMD用戶體驗好，由於沒有延遲，依賴模塊提早執行了，CMD性能好，由於只有用戶須要的時候才執行的緣由。