基于RequireJS的前端模塊化設計

互聯(lián)網(wǎng) web前端 RequireJS 模塊化

施列宇 | 2016-08-12 14:26

【數(shù)據(jù)猿導讀】隨著互聯(lián)網(wǎng)的發(fā)展，前端的要求越來越高，導致了前端復雜度高，可維護性差，代碼重復率高，命名沖突等問題。針對這些現(xiàn)有問題，達觀科技采用了requirejs框架，用模塊化的思想去解決這些問題

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

一、什么是模塊化

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

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

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

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

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

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

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

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

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

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

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

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

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

CMD是以seajs為代表的模塊化標準，特點是依賴就近。

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

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

AMD是以requirejs為代表的模塊化標準，其特點是推崇依賴前置

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

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

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

四、requirejs實戰(zhàn)

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

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

通過bower一鍵安裝requirejs到項目中

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

requirejs的config文件需自己定義

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

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

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

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

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

在html中引入requirejs

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

package.json中存在grunt-contrib-copy的依賴項

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

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

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

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

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

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

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

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

五、結(jié)束語

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

注：本文由達觀數(shù)據(jù)施列宇授權數(shù)據(jù)猿發(fā)布。

歡迎更多大數(shù)據(jù)領域企業(yè)、愛好者投稿數(shù)據(jù)猿，來稿請直接投遞至：tougao@datayuan.cn

來源：數(shù)據(jù)猿

收藏分享

聲明：數(shù)據(jù)猿尊重媒體行業(yè)規(guī)范，相關內(nèi)容都會注明來源與作者；轉(zhuǎn)載我們原創(chuàng)內(nèi)容時，也請務必注明“來源：數(shù)據(jù)猿”與作者名稱，否則將會受到數(shù)據(jù)猿追責。