JS中前端模塊化的實現原理

這篇文章給大家分享的是有關JS中前端模塊化的實現原理的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

1.什么是前端模塊化

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

2.模塊化開發的好處

1）避免變量污染，命名沖突
2）提高代碼利用率
3）提高維護性
4）依賴關系的管理

3.前端模塊化的進程

前端模塊化規范從原始野蠻階段現在慢慢進入“文藝復興”時代，實現的過程如下：

3.1 函數封裝

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

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

這樣做的缺點很明顯，污染了全局變量，并且不能保證和其他模塊起沖突，模塊成員看起來似乎沒啥關系。

3.2 對象

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

var module = new Object({

  _count:0,

  m1:function (){ ```},

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

這樣，兩個函數就被包在這個對象中，看起來沒有什么問題，當我們要使用的時候，就是調用這個對象的屬性方法

module.m1()

那么問題來了，這樣寫法會暴露全部的成員，內部狀態可以被外部改變，比如外部的代碼可直接改變計數器的值

module._count = 10

3.3 立即執行函數(IIFE)

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

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

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

以上就是模塊化開發的基礎中的基礎，以后會說其他更深層次的模塊化開發。

接下來了解幾種模塊化規范。

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

2）AMD

Asynchronous Moudule Definition,中文名是一步模塊。它是一個在瀏覽器端模塊化開發的規范，由于不是js原生支持，使用AMD規范進行頁面開發需要用到對應的函數庫，也就是大名鼎鼎的Require.js，實際上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引入并下載執行模塊。

3）CMD

即common module definition

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

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

efine(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性能好，因為只有用戶需要的時候才執行的原因。

JavaScript是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。

感謝各位的閱讀！關于“JS中前端模塊化的實現原理”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！