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程序設計有所幫助。
相關文章
javascript 實現(xiàn)文本使用省略號替代(超出固定高度的情況)
這篇文章主要介紹了javascript 實現(xiàn)文本使用省略號替代(超出固定高度的情況)的相關資料,需要的朋友可以參考下2017-02-02一文教你實現(xiàn)JavaScript防抖優(yōu)化代碼
在我們前端編程中,假如我們要給后端發(fā)送請求,萬一手抖多點了幾次,多發(fā)送了幾遍怎么辦,那就得用防抖處理,下面小編就來教大家如何實現(xiàn)防抖吧2023-11-11微信小程序?qū)崙?zhàn)項目之富文本編輯器實現(xiàn)
富文本在Web開發(fā)上的地位大家可想而知,很多地方都需要用到富文本編輯器,比如開發(fā)類似新聞管理小程序、商品簡介等,下面這篇文章主要給大家介紹了關于微信小程序?qū)崙?zhàn)項目之富文本編輯器實現(xiàn)的相關資料,需要的朋友可以參考下2022-10-10JavaScript中獲取當前時間yyyymmddhhmmss的六種實現(xiàn)方式
js中提供了一個Date對象供我們獲取當前時間,下面這篇文章主要給大家介紹了關于JavaScript中獲取當前時間yyyymmddhhmmss的六種實現(xiàn)方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12前端JS,刪除JSON數(shù)據(jù)(JSON數(shù)組)中的指定元素方式
這篇文章主要介紹了前端JS,刪除JSON數(shù)據(jù)(JSON數(shù)組)中的指定元素方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05