本文實(shí)例講述了JS前端模塊化原理與實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

1.什么是前端模塊化

模塊化開(kāi)發(fā)，一個(gè)模塊就是一個(gè)實(shí)現(xiàn)特定功能的文件，有了模塊我們就可以更方便地使用別人的代碼，要用什么功能就加載什么模塊。

2.模塊化開(kāi)發(fā)的好處

1）避免變量污染，命名沖突
2）提高代碼利用率
3）提高維護(hù)性
4）依賴(lài)關(guān)系的管理

3.前端模塊化的進(jìn)程

前端模塊化規(guī)范從原始野蠻階段現(xiàn)在慢慢進(jìn)入“文藝復(fù)興”時(shí)代，實(shí)現(xiàn)的過(guò)程如下：

3.1 函數(shù)封裝

我們?cè)谥v到函數(shù)邏輯的時(shí)候提到過(guò)，函數(shù)一個(gè)功能是實(shí)現(xiàn)特定邏輯的一組語(yǔ)句打包。在一個(gè)文件里面編寫(xiě)幾個(gè)相關(guān)函數(shù)就是最開(kāi)始的模塊了

function m1() {
 // ...
}
function m2(){
　　　　//...
}

這樣做的缺點(diǎn)很明顯，污染了全局變量，并且不能保證和其他模塊起沖突，模塊成員看起來(lái)似乎沒(méi)啥關(guān)系。

3.2 對(duì)象

為了解決這個(gè)問(wèn)題，有了新方法，將所有模塊成員封裝在一個(gè)對(duì)象中

var module = new Object({

  _count:0,

  m1:function (){ ```},

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

這樣，兩個(gè)函數(shù)就被包在這個(gè)對(duì)象中，看起來(lái)沒(méi)有什么問(wèn)題，當(dāng)我們要使用的時(shí)候，就是調(diào)用這個(gè)對(duì)象的屬性方法

module.m1()

那么問(wèn)題來(lái)了，這樣寫(xiě)法會(huì)暴露全部的成員，內(nèi)部狀態(tài)可以被外部改變，比如外部的代碼可直接改變計(jì)數(shù)器的值

module._count = 10

3.3 立即執(zhí)行函數(shù)(IIFE)

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

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

  return{
     m1:m1,
     m2:m2
  }
})()

以上就是模塊化開(kāi)發(fā)的基礎(chǔ)中的基礎(chǔ)，以后會(huì)說(shuō)其他更深層次的模塊化開(kāi)發(fā)。

接下來(lái)了解幾種模塊化規(guī)范。

1）commonJS

commonJS由nodeJS發(fā)揚(yáng)光大，這標(biāo)志著js模塊化正式登場(chǎng)。

一. 定義模塊

根據(jù)commonJS規(guī)范，一個(gè)單獨(dú)的文件是一個(gè)模塊，每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非為global對(duì)象的屬性。

二. 模塊輸出

模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象。

三. 加載模塊

加載模塊用require方法，該文件讀取一個(gè)文件并且執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象。

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

2）AMD

Asynchronous Moudule Definition,中文名是一步模塊。它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范，由于不是js原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的函數(shù)庫(kù)，也就是大名鼎鼎的Require.js，實(shí)際上AMD是RequireJS在推廣過(guò)程中對(duì)模塊化定義的規(guī)范化的產(chǎn)出。

RequireJS主要解決兩個(gè)問(wèn)題：

1）多個(gè)js文件可能有依賴(lài)關(guān)系，被依賴(lài)的文件需要早于依賴(lài)它的文件加載到瀏覽器。

2）js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多，頁(yè)面失去響應(yīng)的時(shí)間越長(zhǎng)。

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

})

//加載模塊

require(['myModule'],function(my){
  my.printName();
})

語(yǔ)法：

requireJS定義了一個(gè)函數(shù)define，它是全局變量，用來(lái)定義模塊。

define(id,dependencies,factory)

• ——id 可選參數(shù)，用來(lái)定義模塊的標(biāo)識(shí)，如果沒(méi)有提供該參數(shù)，腳本文件名（去掉拓展名）
• ——dependencies 是一個(gè)當(dāng)前模塊用來(lái)的模塊名稱(chēng)數(shù)組
• ——factory 工廠(chǎng)方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο螅绻麨楹瘮?shù)，它應(yīng)該只被執(zhí)行一次，如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值。

在頁(yè)面上使用require函數(shù)加載模塊；

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

require()函數(shù)接受兩個(gè)參數(shù)：

• ——第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴(lài)的模塊；
• ——第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊

AMD推崇的是依賴(lài)前置，被提前羅列出來(lái)并會(huì)背提前下載并執(zhí)行，后來(lái)做了改進(jìn)，可以不用羅列依賴(lài)模塊，允許在回調(diào)函數(shù)中就近使用require引入并下載執(zhí)行模塊。

3）CMD

即common module definition

就像AMD有個(gè)requireJS,CMD有個(gè)瀏覽器實(shí)現(xiàn)的sea.js，sj要解決的問(wèn)題和rj一樣，只不過(guò)在模塊定義方式和模塊加載時(shí)機(jī)上有所不同。

cmd是sea.js在推廣過(guò)程中的規(guī)范化產(chǎn)出，sea.js是另一種前端模塊化工具，它的出現(xiàn)緩解了requireJS的幾個(gè)痛點(diǎn)。

efine(id, deps, factory)

因?yàn)镃MD推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id；
CMD推崇依賴(lài)就近，所以一般不在define的參數(shù)中寫(xiě)依賴(lài)，而是在factory中寫(xiě)。

factory有三個(gè)參數(shù)：

function(require, exports, module){}

一，require

require 是 factory 函數(shù)的第一個(gè)參數(shù)，require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口；

二，exports

exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口；

三，module

module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法。

demo

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

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

});

AMD與CMD區(qū)別

總結(jié)如下：

最明顯的區(qū)別就是在模塊定義時(shí)對(duì)依賴(lài)的處理不同。

AMD推崇依賴(lài)前置 在定義模塊的時(shí)候就有聲明其依賴(lài)的模塊

CMD推崇就近依賴(lài) 只有在用到某模塊的時(shí)候再去require

AMD和CMD最大的區(qū)別是對(duì)依賴(lài)模塊的執(zhí)行時(shí)機(jī)處理不同，注意不是加載的時(shí)機(jī)或者方式不同。

很多人說(shuō)requireJS是異步加載模塊，SeaJS是同步加載模塊，這么理解實(shí)際上是不準(zhǔn)確的，其實(shí)加載模塊都是異步的，只不過(guò)AMD依賴(lài)前置，js可以方便知道依賴(lài)模塊是誰(shuí)，立即加載，而CMD就近依賴(lài)，需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾?lài)了那些模塊，這也是很多人詬病CMD的一點(diǎn)，犧牲性能來(lái)帶來(lái)開(kāi)發(fā)的便利性，實(shí)際上解析模塊用的時(shí)間短到可以忽略。
為什么我們說(shuō)兩個(gè)的區(qū)別是依賴(lài)模塊執(zhí)行時(shí)機(jī)不同，為什么很多人認(rèn)為ADM是異步的，CMD是同步的（除了名字的原因。。。）
同樣都是異步加載模塊，AMD在加載模塊完成后就會(huì)執(zhí)行改模塊，所有模塊都加載執(zhí)行完后會(huì)進(jìn)入require的回調(diào)函數(shù)，執(zhí)行主邏輯，這樣的效果就是依賴(lài)模塊的執(zhí)行順序和書(shū)寫(xiě)順序不一定一致，看網(wǎng)絡(luò)速度，哪個(gè)先下載下來(lái)，哪個(gè)先執(zhí)行，但是主邏輯一定在所有依賴(lài)加載完成后才執(zhí)行。
CMD加載完某個(gè)依賴(lài)模塊后并不執(zhí)行，只是下載而已，在所有依賴(lài)模塊加載完成后進(jìn)入主邏輯，遇到require語(yǔ)句的時(shí)候才執(zhí)行對(duì)應(yīng)的模塊，這樣模塊的執(zhí)行順序和書(shū)寫(xiě)順序是完全一致的。
這也是很多人說(shuō)AMD用戶(hù)體驗(yàn)好，因?yàn)闆](méi)有延遲，依賴(lài)模塊提前執(zhí)行了，CMD性能好，因?yàn)橹挥杏脩?hù)需要的時(shí)候才執(zhí)行的原因。

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論