JS模組化-RequireJS-js教程-PHP中文網

今天帶給大家JS模組化-RequireJS，關於JS模組化的注意事項有哪些，應該如何使用RequireJS？下面就是實戰案例，一起來看一下。

之前一直有聽說RequireJS，但一直都沒機會去了解，只知道它是一個給js做模組化的API。最近在做React，其組件化的思想和js模組化的思想不謀而合。就想在專案中應用React的同時，也把RequireJS加進來，看看會不會對頁面載入或開發有很好的效果。

What is RequireJS？

在說明什麼是RequireJS之前，我不得不提的就是Javascript模組化歷史的背景。其實在早期，javascript作為一門新興的腳本語言出現，有著龐大的願景，它並不是作為一門僅僅針對客戶端設計的語言。只是說後來web應用的流行，javascript作為瀏覽器端腳本語言而迅速傳開，加上Netscape和微軟的競爭將其過早的標準化。所以就導致了JS的諸多缺陷，其中一個就是模組化(但是你可以驚奇地發現其實javascript有將import,export等作為保留字，說明設計的時候其實是有考慮的，新的標準es6也讓原生支援模組化了)。然後隨著web應用越來越複雜，嵌入的javascript程式碼越來越多，還有node的興起，模組化程式設計就變成了必須。

所以就有了後來Dojo工具包和Google的Closure庫支援的模組系統。還有兩個非常通用的標準規範，CommonJS和AMD。這裡就不展開說了，我們只需要知道，實作CommonJS規範的API是同步載入模組的，而實作AMD規範的API是則是非同步載入模組。
所以理論上來說，AMD規範的非阻塞載入更適合瀏覽器端。而RequireJS就是AMD規範的最好實作。抄一段官方文件對RequireJS的描述：

RequireJS 是JavaScript模組載入器。它非常適合在瀏覽器中使用, 它非常適合在瀏覽器中使用，但它也可以用在其他腳本環境, 就像 Rhino and Node. 使用RequireJS加載模組化腳本將提高代碼的加載速度和質量。

Why RequireJS？

所以，知道了RequireJS是做什麼的，也差不多知道為什麼我們要使用RequireJS了。不過還是總結一下用RequireJS的好處吧。

非同步「載入」。我們知道，通常網站都會把script腳本的放在html的最後，這樣就可以避免瀏覽器執行js帶來的頁面阻塞。使用RequireJS，會在相關的js載入後執行回呼函數，這個過程是異步的，所以它不會阻塞頁面。

按需載入。透過RequireJS，你可以在需要載入js邏輯的時候再載入對應的js模組，這樣避免了在初始化網頁的時候發生大量的請求和資料傳輸，或許對某些人來說，某些模組可能他根本就不需要，那就顯得沒有必要。

更方便的模組依賴管理。相信你曾經一定遇過因為script標籤順序問題而導致依賴關係發生錯誤，這個函數未定義，那個變數undefine之類的。透過RequireJS的機制，你能確保在所有的依賴模組都載入以後再執行相關的文件，所以可以起到依賴管理的作用。

更有效率的版本管理。想一想，如果你還是用的script腳本引入的方式來引入一個jQuery2.x的文件，然後你有100個頁面都是這麼引用的，那當你想換成jQuery3.x，那你就不得不去改這100個頁面。但是如果你的requireJS有在config中做jQuery的path映射，那就只要改一處地方即可。

當然還有一些諸如cdn載入不到js文件，可以請求本地文件等其它的優點，這裡就不一一列舉了。

RequireJS 使用

需要在頁面中引入的檔案

<script data-main="js/main" src="xxx/xxxx/require.js"></script>

登入後複製

使用RequireJS，你只需要引入一個require.js。要說明的是，一個比較好的實踐，就是你的頁面上面應該也只需要透過

熱門教學

更多>

相關教學

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

JS模組化-RequireJS