前言

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

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

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

模塊化的好處

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

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

模塊化規(guī)范

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

AMD

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

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

代表作是 require.js

CMD

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

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

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

ES6 Module

瀏覽器都還不支持，但是可以借助像[webpack](https://www.webpackjs.com/ 'https://www.webpackjs.com/')這樣的打包工具來實(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為例來說說前端模塊化的使用。

一、初探

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

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

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

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

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

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

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

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

二、基本使用

比如我們定義一個(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è)類并分別return了這個(gè)類或者它的實(shí)例，這樣我們在需要的時(shí)候就可以在需要使用的頁面，比如與之同級的index.js中使用require函數(shù)來引入了：

12345

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

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

三、簡化

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

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

這樣就可以少寫一個(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ù)雜的，所以每次要依賴某個(gè)模塊都寫路徑的方式比較麻煩，因此我們可以將所有模塊做一個(gè)簡單的配置，我們可以新建一個(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)在引入模塊不用寫路徑了，而是直接使用在config.js里配置好的模塊名即可，簡單高效。

代碼不是萬能的，但不寫代碼是萬萬不能的

2020/07/13?Dary記

總結(jié)

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

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