理解模塊化和依賴管理：

• 應用一般都會依賴外部庫(jQuery和AngularJs),這些庫應該使用包管理器處理和更新，而不是手動下載。
• 應用本身也可以分解成為多個相互交互的小部分,學習封裝代碼的技能,把代碼視作自成一體的組件,學習如何設計優秀的接口,如何安排接口;學習如何隱藏數據,只開放用戶需要的部分。
• 如何解析依賴,避免手動維護一組有序的script標簽。

封裝代碼

??封裝是為了讓功能自成一體,隱藏實現的細節。任何代碼，不管是函數還是模塊，都要有明確的職責；隱藏實現的細節，提供簡明的API一滿足使用的需求。功能自成一體的代碼易于理解和修改。

1).理解單一職責原則

2).信息隱藏和接口

3).作用域和this關鍵字

• js沒有動態作用域,只有靜態作用域[詞法作用域]。
• 理解作用域有助于理解模塊模式,模塊模式是一種將代碼組件化的方式。
• 函數是js的一等公民,處理方式和任何對象一樣。
• 嚴格模式下，this的默認值是undefined，禁止使用eval和arguments等關鍵字。

js模塊

1).閉包和模塊化

• 函數也叫閉包,這是為了強調函數也會創建作用域.
• 立即調用表達式

(function(){//新的作用域 })();

注意:這個函數放在了一堆括號中,不僅告訴了解釋器我們聲明了一個匿名的函數,還表明我們可以把它當作一個值使用。

• 寫法1：

var api = (function(){})(); api();

• 寫法2：

var api = (function(){window.api = {}; })();

2).原型的模塊化

• 很多對象共用一個原型，使用原型能提升性能。
• 原型可以理解為js聲明類的方式。
• 原型只是鏈接，不能覆蓋屬性
• 不能把原型當成類，否則會為代碼的維護帶來問題。

我們對作用域、作用域提升和閉包的工作方式深入了解后，引入模塊之間的交互方式。

3).CommonJS模塊

• 能夠使用合理的方式組織代碼，又能處理依賴注入。
• 是node采用的規范,用于編寫模塊化的js文件。
• 一個文件就是一個模塊，將之賦給module.exports，作為模塊的公開接口。
• 使用模塊時，用require調用,參數是相對路徑。

這種模塊化的好處在于: 變量沒有暴露在全局作用域中，也不用把代碼放在閉包中。
瀏覽器原生并不支持CJS,使用browserify將模塊編譯成瀏覽器能夠處理的形式。

使用CJS相對于原生的好處:

• 沒有全局變量，認知負荷少；
• 開發API和使用模塊變得簡單;
• 模擬依賴的功能讓測試模塊變得更容易；
• 得益于browserify，能夠使用npm中的包；
• 便于測試的模塊化；
• 使用node時，便于客戶端和服務器共享代碼；

4).管理依賴

• 控制反轉(Ioc)： 不使用對象實例化或引用依賴，而是通過構造方法或者公開的屬性把依賴值賦給對象。
• IOC框架用于解析依賴,解決處理依賴中的各種問題,這些框架的基本目的是避免使用new關鍵字,全部交給IOC容器處理。IOC容器知道如何實例化模塊。
• RequireJS：一個異步的模塊加載器(AMD),用于定義模塊,指定依賴。

require(['lib/text'],function(text){var result = text('foo bar');console.log(result); });

說明：
??按約定,lib/text對應的文件路徑為lib/text.js,這是相對于本文件的路徑。這段代碼會請求lib/text.js文件解釋其中的代碼。加載完所有依賴后，調用這個模塊中的函數，通過參數把依賴傳入到這個模塊的函數中。
‘lib/text’模塊的定義如下:

define([],function()｛return function(input)｛return input.toUpperCase();｝ });

說明：
??這個模塊的定義使用了空數組,因為它沒有依賴,返回的函數是模塊的公共接口。
RequireJs的優點:

• 自動解析依賴圖,不用在花時間排序script標簽。
• 支持異步加載模塊。
• 在開發過程中無需編譯。
• 易于單元測試,只需加載需要測試的模塊。
• 強制使用閉包,因為模塊定義在一個函數中。

RequireJs的缺點:

• 如果打包代碼,就無法使用異步加載功能。
• 開發需要遵守AMD規范。
• AMD的包裝代碼擾亂了代碼。
• 在生產環境中需要編譯。
• 發布環境的代碼和本地環境的代碼不一致。

發布優化的代碼，使用gulp編譯AMD模塊,就不用異步獲取這些模塊了。

• 好在requirejs有r.js來解決這個問題
• var amdOptimize = require("amd-optimize"); //require優化

5).Browserify：在瀏覽器中使用CJS模塊.

• CJS作為AMD的替代方案而使用。
• CJS相對于AMD，更簡潔,不會擾亂代碼,定義模版時也不需要樣板代碼。
• npm中的所有包默認都支持CJS的定義的方式使用。
• Browserify會遞歸分析應用中所有的require()調用，然后打包這些文件。在一個script標簽中引入打包好的文件就能在瀏覽器中使用了。
• 使用browserify編譯CJS模塊。

附加: 阮一峰的js模塊編寫

總結

以上是生活随笔為你收集整理的理解模块化和依赖管理(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。