這篇文章主要講解了“Module模塊化編程的優(yōu)點(diǎn)有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Module模塊化編程的優(yōu)點(diǎn)有哪些”吧！

按需求定制網(wǎng)站可以根據(jù)自己的需求進(jìn)行定制，成都網(wǎng)站建設(shè)、成都做網(wǎng)站構(gòu)思過程中功能建設(shè)理應(yīng)排到主要部位公司成都網(wǎng)站建設(shè)、成都做網(wǎng)站的運(yùn)用實際效果公司網(wǎng)站制作網(wǎng)站建立與制做的實際意義

背景

隨著前端功能越來越復(fù)雜，前端代碼日益膨脹，為了減少維護(hù)成本，提高代碼的可復(fù)用性，前端模塊化勢在必行。

所有js文件都在一個html中引入，造成以下不良影響：

• 請求過多。首先我們要依賴多個模塊，那樣就會發(fā)送多個請求，導(dǎo)致請求過多

• 依賴模糊。我們不知道他們的具體依賴關(guān)系是什么，也就是說很容易因為不了解他們之間的依賴關(guān)系導(dǎo)致加載先后順序出錯。

• 難以維護(hù)。以上兩種原因就導(dǎo)致了很難維護(hù)，很可能出現(xiàn)牽一發(fā)而動全身的情況導(dǎo)致項目出現(xiàn)嚴(yán)重的問題。

模塊的概念

webpack中是這樣定義的：

在模塊化編程中，開發(fā)者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為模塊。 每個模塊具有比完整程序更小的接觸面，使得校驗、調(diào)試、測試輕而易舉。 精心編寫的模塊提供了可靠的抽象和封裝界限，使得應(yīng)用程序中每個模塊都具有條理清楚的設(shè)計和明確的目的。

模塊應(yīng)該是職責(zé)單一、相互獨(dú)立、低耦合的、高度內(nèi)聚且可替換的離散功能塊。

模塊化的概念

模塊化是一種處理復(fù)雜系統(tǒng)分解成為更好的可管理模塊的方式，它可以把系統(tǒng)代碼劃分為一系列職責(zé)單一，高度解耦且可替換的模塊，系統(tǒng)中某一部分的變化將如何影響其它部分就會變得顯而易見，系統(tǒng)的可維護(hù)性更加簡單易得。

模塊化是一種分治的思想，通過分解復(fù)雜系統(tǒng)為獨(dú)立的模塊實現(xiàn)細(xì)粒度的精細(xì)控制，對于復(fù)雜系統(tǒng)的維護(hù)和管理十分有益。模塊化也是組件化的基石，是構(gòu)成現(xiàn)在色彩斑斕的前端世界的前提條件。

為什么需要模塊化

前端開發(fā)和其他開發(fā)工作的主要區(qū)別，首先是前端是基于多語言、多層次的編碼和組織工作，其次前端產(chǎn)品的交付是基于瀏覽器，這些資源是通過增量加載的方式運(yùn)行到瀏覽器端，如何在開發(fā)環(huán)境組織好這些碎片化的代碼和資源，并且保證他們在瀏覽器端快速、優(yōu)雅的加載和更新，就需要一個模塊化系統(tǒng)。

模塊化的好處

• 可維護(hù)性。 因為模塊是獨(dú)立的，一個設(shè)計良好的模塊會讓外面的代碼對自己的依賴越少越好，這樣自己就可以獨(dú)立去更新和改進(jìn)。

• 命名空間。 在 JavaScript 里面，如果一個變量在最頂級的函數(shù)之外聲明，它就直接變成全局可用。因此，常常不小心出現(xiàn)命名沖突的情況。使用模塊化開發(fā)來封裝變量，可以避免污染全局環(huán)境。

• 重用代碼。 我們有時候會喜歡從之前寫過的項目中拷貝代碼到新的項目，這沒有問題，但是更好的方法是，通過模塊引用的方式，來避免重復(fù)的代碼庫。我們可以在更新了模塊之后，讓引用了該模塊的所有項目都同步更新，還能指定版本號，避免 API 變更帶來的麻煩。

模塊化簡史

1. 最簡單粗暴的方式

function fn1(){
  // ...
}
function fn2(){
  // ...
}

通過 script 標(biāo)簽引入文件，調(diào)用相關(guān)的函數(shù)。這樣需要手動去管理依賴順序，容易造成命名沖突，污染全局，隨著項目的復(fù)雜度增加維護(hù)成本也越來越高。

2. 用對象來模擬命名空間

var output = {
  _count: 0,
  fn1: function(){
    // ...
  }
}

這樣可以解決上面的全局污染的問題，有那么點(diǎn)命名空間的意思，但是隨著項目復(fù)雜度增加需要越來越多的這樣的對象需要維護(hù)，不說別的，取名字都是個問題。最關(guān)鍵的還是內(nèi)部的屬性還是可以被直接訪問和修改。

3. 閉包

var module = (function(){
  var _count = 0;
  var fn1 = function (){
    // ...
  }
  var fn2 = function fn2(){
    // ...
  }
  return {
    fn1: fn1,
    fn2: fn2
  }
})()
module.fn1();
module._count; // undefined

這樣就擁有獨(dú)立的詞法作用域，內(nèi)存中只會存在一份 copy。這不僅避免了外界訪問此 IIFE 中的變量，而且又不會污染全局作用域，通過 return 暴露出公共接口供外界調(diào)用。這其實就是現(xiàn)代模塊化實現(xiàn)的基礎(chǔ)。

4. 更多

還有基于閉包實現(xiàn)的松耦合拓展、緊耦合拓展、繼承、子模塊、跨文件共享私有對象、基于 new 構(gòu)造的各種方式，這種方式在現(xiàn)在看來都不再優(yōu)雅。

// 松耦合拓展
// 這種方式使得可以在不同的文件中以相同結(jié)構(gòu)共同實現(xiàn)一個功能塊，且不用考慮在引入這些文件時候的順序問題。
// 缺點(diǎn)是沒辦法重寫你的一些屬性或者函數(shù)，也不能在初始化的時候就是用module的屬性。
var module = (function(my){
  // ...
  return my
})(module || {})
// 緊耦合拓展（沒有傳默認(rèn)參數(shù)）
// 加載順序不再自由，但是可以重載
var module = (function(my){
  var old = my.someOldFunc
  
  my.someOldFunc = function(){
    // 重載方法，依然可通過old調(diào)用舊的方法...
  }
  return my
})(module)

實現(xiàn)模塊化的方案規(guī)范總覽

歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發(fā)大型的、復(fù)雜的項目形成了巨大障礙。

在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。ES6 在語言標(biāo)準(zhǔn)的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當(dāng)簡單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

ES6 模塊的設(shè)計思想是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運(yùn)行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。

目前實現(xiàn)模塊化的規(guī)范主要有：

• CommonJS

CommonJS 是以在瀏覽器環(huán)境之外構(gòu)建 JavaScript 生態(tài)系統(tǒng)為目標(biāo)而產(chǎn)生的項目，比如在服務(wù)器和桌面環(huán)境中。

采用同步加載模塊的方式，也就是說只有加載完成，才能執(zhí)行后面的操作。CommonJS 代表：Node 應(yīng)用中的模塊，通俗的說就是你用 npm 安裝的模塊。

它使用 require 引用和加載模塊，exports 定義和導(dǎo)出模塊，module 標(biāo)識模塊。使用 require 時需要去讀取并執(zhí)行該文件，然后返回 exports 導(dǎo)出的內(nèi)容。

• CMD

CMD（Common Module Definition）

CMD是SeaJS在推廣過程中生產(chǎn)的對模塊定義的規(guī)范，在Web瀏覽器端的模塊加載器中，SeaJS與RequireJS并稱，SeaJS作者為阿里的玉伯。

CMD規(guī)范專門用于瀏覽器端，模塊的加載是異步的，模塊使用時才會加載執(zhí)行。CMD規(guī)范整合了CommonJS和AMD規(guī)范的特點(diǎn)。在 Sea.js 中，所有 JavaScript 模塊都遵循 CMD模塊定義規(guī)范。

• AMD

AMD（Asynchronous Module Definition）

異步模塊定義，所謂異步是指模塊和模塊的依賴可以被異步加載，他們的加載不會影響它后面語句的運(yùn)行。有效避免了采用同步加載方式中導(dǎo)致的頁面假死現(xiàn)象。AMD代表：RequireJS。

AMD一開始是CommonJS規(guī)范中的一個草案，全稱是Asynchronous Module Definition，即異步模塊加載機(jī)制。后來由該草案的作者以RequireJS實現(xiàn)了AMD規(guī)范，所以一般說AMD也是指RequireJS。

RequireJS是一個工具庫，主要用于客戶端的模塊管理。它的模塊管理遵守AMD規(guī)范，RequireJS的基本思想是，通過define方法，將代碼定義為模塊；通過require方法，實現(xiàn)代碼的模塊加載。

• ES6模塊

ES6模塊的設(shè)計思想，是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。所以說ES6是編譯時加載，不同于CommonJS的運(yùn)行時加載(實際加載的是一整個對象)，ES6模塊不是對象，而是通過export命令顯式指定輸出的代碼，輸入時也采用靜態(tài)命令的形式。

ES6 的模塊自動采用嚴(yán)格模式，不管你有沒有在模塊頭部加上”use strict”;。

嚴(yán)格模式主要有以下限制。

• 變量必須聲明后再使用

• 函數(shù)的參數(shù)不能有同名屬性，否則報錯

• 不能使用with語句

• 不能對只讀屬性賦值，否則報錯

• 不能使用前綴 0 表示八進(jìn)制數(shù)，否則報錯

• 不能刪除不可刪除的屬性，否則報錯

• 不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]

• eval不會在它的外層作用域引入變量

• eval和arguments不能被重新賦值

• arguments不會自動反映函數(shù)參數(shù)的變化

• 不能使用arguments.callee

• 不能使用arguments.caller

• 禁止this指向全局對象

• 不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧

• 增加了保留字（比如protected、static和interface）

上面這些限制，模塊都必須遵守。

感謝各位的閱讀，以上就是“Module模塊化編程的優(yōu)點(diǎn)有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Module模塊化編程的優(yōu)點(diǎn)有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

新聞標(biāo)題：Module模塊化編程的優(yōu)點(diǎn)有哪些
網(wǎng)頁路徑：http://chinadenli.net/article24/ggjhje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、Google、ChatGPT、面包屑導(dǎo)航、App設(shè)計、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)