理解模塊化和依賴管理：

• 應(yīng)用一般都會(huì)依賴外部庫(jQuery和AngularJs),這些庫應(yīng)該使用包管理器處理和更新，而不是手動(dòng)下載。
• 應(yīng)用本身也可以分解成為多個(gè)相互交互的小部分,學(xué)習(xí)封裝代碼的技能,把代碼視作自成一體的組件,學(xué)習(xí)如何設(shè)計(jì)優(yōu)秀的接口,如何安排接口;學(xué)習(xí)如何隱藏?cái)?shù)據(jù),只開放用戶需要的部分。
• 如何解析依賴,避免手動(dòng)維護(hù)一組有序的script標(biāo)簽。

封裝代碼

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

1).理解單一職責(zé)原則

2).信息隱藏和接口

3).作用域和this關(guān)鍵字

• js沒有動(dòng)態(tài)作用域,只有靜態(tài)作用域[詞法作用域]。
• 理解作用域有助于理解模塊模式,模塊模式是一種將代碼組件化的方式。
• 函數(shù)是js的一等公民,處理方式和任何對(duì)象一樣。
• 嚴(yán)格模式下，this的默認(rèn)值是undefined，禁止使用eval和arguments等關(guān)鍵字。

js模塊

1).閉包和模塊化

• 函數(shù)也叫閉包,這是為了強(qiáng)調(diào)函數(shù)也會(huì)創(chuàng)建作用域.
• 立即調(diào)用表達(dá)式

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

注意:這個(gè)函數(shù)放在了一堆括號(hào)中,不僅告訴了解釋器我們聲明了一個(gè)匿名的函數(shù),還表明我們可以把它當(dāng)作一個(gè)值使用。

• 寫法1：

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

• 寫法2：

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

2).原型的模塊化

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

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

3).CommonJS模塊

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

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

使用CJS相對(duì)于原生的好處:

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

4).管理依賴

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

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

說明：
??按約定,lib/text對(duì)應(yīng)的文件路徑為lib/text.js,這是相對(duì)于本文件的路徑。這段代碼會(huì)請(qǐng)求lib/text.js文件解釋其中的代碼。加載完所有依賴后，調(diào)用這個(gè)模塊中的函數(shù)，通過參數(shù)把依賴傳入到這個(gè)模塊的函數(shù)中。
‘lib/text’模塊的定義如下:

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

說明：
??這個(gè)模塊的定義使用了空數(shù)組,因?yàn)樗鼪]有依賴,返回的函數(shù)是模塊的公共接口。
RequireJs的優(yōu)點(diǎn):

• 自動(dòng)解析依賴圖,不用在花時(shí)間排序script標(biāo)簽。
• 支持異步加載模塊。
• 在開發(fā)過程中無需編譯。
• 易于單元測(cè)試,只需加載需要測(cè)試的模塊。
• 強(qiáng)制使用閉包,因?yàn)槟K定義在一個(gè)函數(shù)中。

RequireJs的缺點(diǎn):

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

發(fā)布優(yōu)化的代碼，使用gulp編譯AMD模塊,就不用異步獲取這些模塊了。

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。