欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS前端模塊化原理與實現(xiàn)方法詳解

 更新時間:2020年03月17日 12:23:46   作者:wangliang_001  
這篇文章主要介紹了JS前端模塊化原理與實現(xiàn)方法,結(jié)合實例形式分析了JS前端模塊化具體概念、功能、原理、實現(xiàn)方法及相關操作注意事項,需要的朋友可以參考下

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

1.什么是前端模塊化

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

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

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

3.前端模塊化的進程

前端模塊化規(guī)范從原始野蠻階段現(xiàn)在慢慢進入“文藝復興”時代,實現(xiàn)的過程如下:

3.1 函數(shù)封裝

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

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

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

3.2 對象

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

var module = new Object({

  _count:0,

  m1:function (){ ```},

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

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

module.m1()

那么問題來了,這樣寫法會暴露全部的成員,內(nèi)部狀態(tài)可以被外部改變,比如外部的代碼可直接改變計數(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
  }
})()

以上就是模塊化開發(fā)的基礎中的基礎,以后會說其他更深層次的模塊化開發(fā)。

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

1)commonJS

commonJS由nodeJS發(fā)揚光大,這標志著js模塊化正式登場。

一. 定義模塊

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

二. 模塊輸出

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

三. 加載模塊

加載模塊用require方法,該文件讀取一個文件并且執(zhí)行,返回文件內(nèi)部的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,中文名是一步模塊。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范,由于不是js原生支持,使用AMD規(guī)范進行頁面開發(fā)需要用到對應的函數(shù)庫,也就是大名鼎鼎的Require.js,實際上AMD是RequireJS在推廣過程中對模塊化定義的規(guī)范化的產(chǎn)出。

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定義了一個函數(shù)define,它是全局變量,用來定義模塊。

define(id,dependencies,factory)

  • ——id 可選參數(shù),用來定義模塊的標識,如果沒有提供該參數(shù),腳本文件名(去掉拓展名)
  • ——dependencies 是一個當前模塊用來的模塊名稱數(shù)組
  • ——factory 工廠方法,模塊初始化要執(zhí)行的函數(shù)或?qū)ο螅绻麨楹瘮?shù),它應該只被執(zhí)行一次,如果是對象,此對象應該為模塊的輸出值。

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

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

require()函數(shù)接受兩個參數(shù):

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

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

3)CMD

即common module definition

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

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

efine(id, deps, factory)

因為CMD推崇一個文件一個模塊,所以經(jīng)常就用文件名作為模塊id;
CMD推崇依賴就近,所以一般不在define的參數(shù)中寫依賴,而是在factory中寫。

factory有三個參數(shù):

function(require, exports, module){}

一,require

require 是 factory 函數(shù)的第一個參數(shù),require 是一個方法,接受 模塊標識 作為唯一參數(shù),用來獲取其他模塊提供的接口;

二,exports

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

三,module

module 是一個對象,上面存儲了與當前模塊相關聯(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ū)別就是在模塊定義時對依賴的處理不同。

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

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

AMD和CMD最大的區(qū)別是對依賴模塊的執(zhí)行時機處理不同,注意不是加載的時機或者方式不同。

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

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

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

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

最新評論