前言

隨著Ajax技術(shù)的興起，前后端分離的開(kāi)發(fā)模式逐漸占領(lǐng)了幾乎整個(gè)市場(chǎng)，現(xiàn)在的服務(wù)器帶寬也足夠完成大量數(shù)據(jù)交互，于是很多以前在服務(wù)器端的邏輯也可以移植到前端來(lái)處理了，從而減輕服務(wù)器的壓力，當(dāng)然，這樣的話(huà)Javascript代碼就會(huì)越來(lái)越復(fù)雜。而Javascript作為一門(mén)松散的弱類(lèi)型語(yǔ)言，在一個(gè)大型項(xiàng)目面前如果沒(méi)有合理的拆分與規(guī)劃，將會(huì)變得很難維護(hù)，這個(gè)時(shí)候我們就需要把前端邏輯做一個(gè)模塊化的處理。

所謂模塊化就是把需要重復(fù)使用的功能封裝成模塊，一個(gè)頁(yè)面有一個(gè)統(tǒng)籌全局的對(duì)象把所有模塊引入進(jìn)來(lái)，最終形成一個(gè)產(chǎn)品，做成一個(gè)完整的項(xiàng)目。

JS本身在ES6以前沒(méi)有模塊化的，ES6有模塊化了，但是主流瀏覽器對(duì)于ES6模塊化的支持度不足，所以一般不能直接使用，所以我們今天討論第三方的模塊化實(shí)現(xiàn)。

模塊化的好處

就好比要生產(chǎn)一臺(tái)挖掘機(jī)，是由各個(gè)廠商提供的配件組裝出來(lái)的，而不是由一家公司從頭到尾生產(chǎn)，這樣的好處是各個(gè)零部件各司其職，如果有一個(gè)功能壞掉了只需要找到對(duì)應(yīng)的零部件解決問(wèn)題即可，從而避免將來(lái)維修的麻煩。

作為代碼也是同樣的道理，一個(gè)完整的項(xiàng)目可以由很多個(gè)模塊組成，如果某部分功能需要修改或者升級(jí)只需要找到對(duì)應(yīng)模塊的代碼進(jìn)行維護(hù)即可，大大提高了代碼的可讀性以及節(jié)約了維護(hù)成本。

模塊化規(guī)范

模塊的使用一般分為導(dǎo)入和導(dǎo)出，定義一個(gè)模塊需要導(dǎo)出出去在需要使用的地方導(dǎo)入。所謂模塊化規(guī)范就是規(guī)定了模塊的使用方式，不同的規(guī)范制定了不同的導(dǎo)入和導(dǎo)出的方式。常見(jiàn)的模塊化規(guī)范有如下幾種：

AMD

依賴(lài)前置：提前引入，文件開(kāi)頭把需要的模塊一次性全部引入，后面直接使用

前期消耗比較大，后期執(zhí)行效率很高

代表作是 require.js

CMD

按需加載：在代碼執(zhí)行過(guò)程當(dāng)中需要一個(gè)模塊了才去加載

整個(gè)曲線(xiàn)比較平緩

代表作是sea.js，但是現(xiàn)在已經(jīng)很少使用了

ES6 Module

瀏覽器都還不支持，但是可以借助像[webpack](https://www.webpackjs.com/ 'https://www.webpackjs.com/')這樣的打包工具來(lái)實(shí)現(xiàn)打包，從而使瀏覽器可以運(yùn)行代碼。詳細(xì)用法可參照我的另一篇文章[鋒利的ES6 — Module](http://www.xiongdalin.com/2020/06/16/ES6-module/ 'http://www.xiongdalin.com/2020/06/16/ES6-module/') 。

另外：服務(wù)器端Node.js遵循commonJS規(guī)范，module.exports 導(dǎo)出模塊，require引入模塊。

require.js

我們今天以require.js為例來(lái)說(shuō)說(shuō)前端模塊化的使用。

一、初探

第一步我們需要引入require.js文件

1	<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js">script>

我們可以稍微查看一下文件的源代碼：

出乎我們意料的是require一上來(lái)二話(huà)不說(shuō)先聲明了三個(gè)全局變量：require，requirejs以及define，但是這樣我們的方向也就很明確了，我們可以打印一下這三個(gè)值：

我們可以看到這是三個(gè)函數(shù)，而且require和requirejs看起來(lái)非常相似，所以我們可以嘗試打印一下：

1	console.log(require === requirejs) // true

這個(gè)結(jié)果毫無(wú)疑問(wèn)是true，也就是說(shuō)require和requirejs是同一個(gè)函數(shù)，那么我們肯定喜歡用require????

另外一個(gè)就是define，所以我們用requirejs其實(shí)用的就是require和define這兩個(gè)函數(shù)，而且結(jié)合咱們之前說(shuō)過(guò)的模塊化就是定義模塊和使用模塊，所以define就是用來(lái)定義模塊而require是用來(lái)引入模塊的。

二、基本使用

比如我們定義一個(gè)a模塊，a.js的代碼可以如下：

123456789101112

// module adefine(() => { class A { constructor (name) { this.name = name } say () { console.log(this.name) } } return A})

再定義一個(gè)b模塊，b.js代碼如下：

123456789101112

// module bdefine(() => { class B { constructor () { this.name = 'module b' } say () { console.log(this.name) } } return new B()})

這里定義了一個(gè)類(lèi)并分別return了這個(gè)類(lèi)或者它的實(shí)例，這樣我們?cè)谛枰臅r(shí)候就可以在需要使用的頁(yè)面，比如與之同級(jí)的index.js中使用require函數(shù)來(lái)引入了：

12345

require(['./a', './b'], (ModuleA, mB) => { console.log('index page code') new ModuleA('a').say() mB.say()})

我們通過(guò)require可以依次引入我們所需要的模塊，并且在回調(diào)函數(shù)里按順序接收各自模塊的返回值來(lái)使用，這樣就使得代碼可以非常方便的完成復(fù)用，實(shí)現(xiàn)模塊化了。

三、簡(jiǎn)化

現(xiàn)在我們?cè)陧?yè)面中需要寫(xiě)兩個(gè)script標(biāo)簽，一個(gè)用來(lái)引入require.js，另外一個(gè)用來(lái)引入當(dāng)前頁(yè)面所需要的js，這樣還是比較麻煩，require.js給我們提供了更簡(jiǎn)單的方式，我們可以在引入require.js的script中寫(xiě)一個(gè)data-main屬性，如下：

1	<script src="./js/require.min.js" data-main="./js/index">script>

這樣就可以少寫(xiě)一個(gè)script標(biāo)簽，因?yàn)閞equire.js會(huì)幫助我們找到當(dāng)前script標(biāo)簽上的自定義屬性data-main并且根據(jù)屬性值找到文件運(yùn)行。

四、配置

現(xiàn)在模塊化已經(jīng)具有一定規(guī)模了，但是在正式項(xiàng)目中文件路徑通常是比較復(fù)雜的，所以每次要依賴(lài)某個(gè)模塊都寫(xiě)路徑的方式比較麻煩，因此我們可以將所有模塊做一個(gè)簡(jiǎn)單的配置，我們可以新建一個(gè)config.js，假設(shè)我們的項(xiàng)目路徑如下：

在這個(gè)文件里我們可以集中將所有模塊以及其路徑做配置如下：

12345678

require.config({ baseUrl: '/', // 當(dāng)前項(xiàng)目跟路徑，可能需要視具體情況稍做調(diào)整 paths: { // 模塊名：'路徑' // 注意：路徑一定不能有后綴 a: 'js/a', b: 'js/b' }})

這樣我們可以修改一下index.js

1234567

require(['./config'], () => { require(['a', 'b'], (ModuleA, mB) => { console.log('index page code') new ModuleA('a').say() mB.say() })})

這樣做的好處是現(xiàn)在引入模塊不用寫(xiě)路徑了，而是直接使用在config.js里配置好的模塊名即可，簡(jiǎn)單高效。

代碼不是萬(wàn)能的，但不寫(xiě)代碼是萬(wàn)萬(wàn)不能的

2020/07/13?Dary記

總結(jié)

以上是生活随笔為你收集整理的requirejs加载顺序_前端模块化之AMD — Requirejs的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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