伴隨著互聯(lián)網(wǎng)的飛速發(fā)展，web中對(duì)于前端的要求越來越高，前端的代碼的代碼量、復(fù)雜度與日俱增，帶來了諸如前端代碼復(fù)用率低，難維護(hù)等問題。針對(duì)這些現(xiàn)有問題，達(dá)觀科技采用了requirejs框架，用模塊化的思想去解決這些問題。(達(dá)觀數(shù)據(jù) 施列宇)

一、什么是模塊化

模塊化是一種將復(fù)雜系統(tǒng)拆分成一個(gè)個(gè)小的可管理的模塊的方式。它可以把系統(tǒng)拆分為職責(zé)更單一，更獨(dú)立的模塊，也就是我們軟件設(shè)計(jì)中常常提到的高內(nèi)聚低耦合的模塊。一般來說，前端模塊化包含javascript，css以及template三個(gè)部分。

二、為什么要將前端內(nèi)容模塊化

簡單來說，隨著互聯(lián)網(wǎng)的發(fā)展，前端的要求越來越高，導(dǎo)致了前端復(fù)雜度高，可維護(hù)性差，代碼重復(fù)率高，命名沖突等問題。模塊化正是解決這一問題的良藥。

通過模塊化，可以將代碼中常用的內(nèi)容封裝起來，這樣就做到了代碼復(fù)用，便于維護(hù)。像前端中常用到的jQuery框架，就可以被視為一個(gè)公共模塊，jQuery封裝并簡化了一系列常用的js操作，輕量級(jí)，功能強(qiáng)大，而且不會(huì)污染全局變量(所有的方法都只能通過jQuery對(duì)象調(diào)用)，可以說是一個(gè)非常優(yōu)秀的模塊。并且，項(xiàng)目中往往也會(huì)存在一些不具備復(fù)用價(jià)值，但過于冗長的代碼。我們也是鼓勵(lì)將這些代碼拆分多個(gè)相獨(dú)立的模塊，由此來提升可維護(hù)性。除此之外，模塊化還可以帶來不污染全局變量的效果。Web頁面不復(fù)雜的情況下，我們可以任性的在全局環(huán)境下定義變量和函數(shù)，但在前端日益復(fù)雜化的今天，全局變量污染往往會(huì)帶來命名沖突的問題，項(xiàng)目持續(xù)時(shí)間越久，累計(jì)的問題就會(huì)越多，維護(hù)的成本也就越高。

三、JS模塊化的發(fā)展史

最早的js模塊化是通過創(chuàng)建對(duì)象的方式來達(dá)到效果的。

通過js對(duì)象實(shí)現(xiàn)模塊化效果

一個(gè)js對(duì)象即是一個(gè)模塊，這樣的好處是很直觀易懂，并且的確解決了全局污染的問題。與此同時(shí)，這種方法的問題也比較突出，那就是js對(duì)象的封閉性并不好，重要信息很容易泄露，帶來的安全問題難以解決。

針對(duì)js對(duì)象的安全性問題，js的模塊化就選擇使用閉包的方式來解決。也就是我們熟知的IIFE(immediately-invoked function expression)模式。

通過封閉性良好的匿名閉包，很好的對(duì)模塊內(nèi)容實(shí)行了封裝。這種做法，已經(jīng)可以很有效的解決了模塊化過程中所遇到的問題，即使在現(xiàn)如今，也有很多流行的前端框架，通過這種方式實(shí)現(xiàn)模塊化。

typescript中的模塊編譯后生成的javascript代碼符合IIFE模式

IIFE模式是現(xiàn)代模塊化工具的基石，其引入?yún)?shù)的過程，是實(shí)現(xiàn)現(xiàn)代js模塊化依賴注入的基本方式。

隨著js模塊化發(fā)展的日益深遠(yuǎn)，js逐漸形成了模塊定義的兩大標(biāo)準(zhǔn)：通用模塊定義 ( Common Module Definition) 以及異步模塊定義 ( Asynchronous Module Definition)。

CMD是以seajs為代表的模塊化標(biāo)準(zhǔn)，特點(diǎn)是依賴就近。

CMD模式下模塊調(diào)用方式

進(jìn)入模塊時(shí)，模塊自身并不知道依賴哪些模塊，如圖中所示，代碼在執(zhí)行到一定階段后，通過require()方法引入需要用的模塊，通過該函數(shù)返回的對(duì)象，調(diào)用模塊的方法。這種做法的好處是，隨時(shí)都可以調(diào)用外部模塊而不用預(yù)定義，簡單方便。但與此同時(shí)，在代碼執(zhí)行期間，需要不斷的遍歷工程多次來查找require對(duì)應(yīng)模塊的位置，這對(duì)代碼的整體性能有所犧牲。

AMD是以requirejs為代表的模塊化標(biāo)準(zhǔn)，其特點(diǎn)是推崇依賴前置

AMD模式下模塊調(diào)用方式

如圖，在進(jìn)入模塊時(shí)，模塊已經(jīng)知道了依賴關(guān)系，只有在所有的依賴項(xiàng)加載完成時(shí)，模塊內(nèi)部代碼才會(huì)被執(zhí)行。這種寫法的優(yōu)點(diǎn)是，性能相比CMD要好，在模塊運(yùn)行時(shí)已經(jīng)知道需要加載哪些模塊，不再需要對(duì)整段代碼進(jìn)行遍歷查找依賴。

順便一提，我們?cè)趓equirejs的官方文檔中也會(huì)發(fā)現(xiàn)和CMD用法相同的API，但requirejs官方還是推薦使用AMD的方式來建立依賴關(guān)系。

四、requirejs實(shí)戰(zhàn)

作為初創(chuàng)公司，達(dá)觀數(shù)據(jù)傾向于采用成熟的健壯的開發(fā)框架進(jìn)行前端開發(fā)，完善的解決方案以及豐富的插件庫可以幫助項(xiàng)目主體快速成型。目前，達(dá)觀大數(shù)據(jù)前端部分采用的是angularjs + requirejs + gruntjs +bowerjs的框架來實(shí)現(xiàn)前端設(shè)計(jì)。其中就用到了requirejs作為前端代碼依賴管理工具。

1.首先我們可以通過bower來在項(xiàng)目中安裝requirejs , 不熟悉bower的同學(xué)可以參考https://github.com/bower/bower。

通過bower一鍵安裝requirejs到項(xiàng)目中

2.編寫requirejs的配置文件。通過requirejs提供的config方法，編寫requirejs的配置文件。這里介紹一些比較常見的參數(shù)。

requirejs的config文件需自己定義

baseUrl: baseUrl用于改變依賴基本路徑。一般而言，配置文件中模塊定義路徑是根據(jù)配置文件的位置計(jì)算出來的相對(duì)位置，這種情況下可以不用設(shè)置baseUrl。但如果項(xiàng)目需要遷移，那就需要改變模塊存放的整體位置，這種情況下將每個(gè)模塊的相對(duì)路徑都進(jìn)行更改是一件非常痛苦的事情。requirejs提供的baseUrl可以很好的解決這個(gè)問題，只需要重新設(shè)置baseUrl就可以不用更改配置文件中的每一條path。

paths: paths定義每個(gè)模塊的路徑。一個(gè)模塊可以有多個(gè)路徑，這樣假使通過第一個(gè)路徑加載失敗，也可以從后面定義的路徑中獲得該模塊。

shim: shim定義的是模塊之間的依賴關(guān)系。實(shí)際項(xiàng)目中常常會(huì)遇到?jīng)]有定義依賴關(guān)系的模塊，這時(shí)我們需要通過shim參數(shù)手動(dòng)定義每個(gè)模塊的依賴項(xiàng)，使項(xiàng)目能夠正常運(yùn)行。

這樣一個(gè)項(xiàng)目中的依賴部分就算完成了，之后在每個(gè)模塊定義的時(shí)候，只要遵循requirejs模塊定義語法，就可以實(shí)現(xiàn)web前端的模塊化加載。

3.在html中加入requirejs的引用，并通過屬性data-main加載項(xiàng)目中的入口腳本。

在html中引入requirejs

一般而言，項(xiàng)目引用的腳本文件需要代碼管理工具進(jìn)行合并、壓縮、混淆操作。達(dá)觀科技使用的是grunt腳本管理工具進(jìn)行相關(guān)操作，這里使用到grunt提供的相應(yīng)的插件grunt-contrib-requirejs來自動(dòng)完成任務(wù)。 插件和grunt的一樣，都是通過node.js提供的npm方法安裝。安裝完成時(shí)，可以在配置文件package.json查看到該插件。

package.json中存在grunt-contrib-copy的依賴項(xiàng)

確認(rèn)該插件安裝完成后，就可以在grunt的配置文件Gruntfile.js編寫該插件的配置信息了。

grunt-contrib-requirejs在Gruntfile.js中的配置信息

其中幾個(gè)核心參數(shù)的含義如下：

baseUrl: 類似于上一節(jié)中requirejs配置參數(shù)中的baseUrl，如果requirejs config中沒有指明，需要寫上requirejs config所在的路徑。

mainConfigFile: 指向的requirejs的配置文件。

out: out指的最終輸出的結(jié)果，值的注意的是該輸出結(jié)果的路徑不是相對(duì)于baseUrl的地址，而是相對(duì)于Gruntfile.js文件的地址。

更多配置的介紹可以查閱https://github.com/gruntjs/grunt-contrib-requirejs。

通過以上一系列的部署，requirejs已經(jīng)可以在web項(xiàng)目中產(chǎn)生作用了。

五、結(jié)束語

本文主要闡述了我對(duì)于web前端模塊化的一些理解。簡要的分析了web前端的模塊化的含義，必要性，并適當(dāng)介紹了前端模塊化的發(fā)展的一些歷程，最終通過require實(shí)戰(zhàn)的方式，向各位讀者傳述如何在web工程中加入模塊化架構(gòu)設(shè)計(jì)。模塊化設(shè)計(jì)可以減少項(xiàng)目的復(fù)雜度，提升項(xiàng)目的可維護(hù)度，并對(duì)代碼復(fù)用，減少代碼量產(chǎn)生了一定的作用。在實(shí)際工作中，前端模塊化的設(shè)計(jì)已不鮮見，目前前端可用于模塊化的框架不下于10款，掌握了模塊化設(shè)計(jì)的思路，對(duì)選擇合適的模塊化框架很有益處。在前端日新月異的今天，新框架總會(huì)源源不斷的涌現(xiàn)，開發(fā)者往往苦惱于如何選擇合適的框架，其實(shí)只要掌握了核心思想，正如本文所說的模塊化思想，才可以很快的對(duì)比出各個(gè)框架的優(yōu)缺點(diǎn)，才會(huì)在這些框架的選擇中游刃有余。（達(dá)觀數(shù)據(jù) 施列宇）