RequireJS:一款優(yōu)秀的AMD模塊加載器

syoya 發(fā)布于2019-08-21 10:21 / 660人閱讀

摘要：概述是一款遵循規(guī)范協(xié)議的模塊加載器，不但能在瀏覽器端充分利用，同樣能在其他的運(yùn)行時(shí)環(huán)境，比如和。使用像這樣的模塊加載器能提高代碼的質(zhì)量和開發(fā)速度。一般放在頁面的入口出，用來加載其他的模塊。

RequireJS概述

RequireJS是一款遵循AMD規(guī)范協(xié)議的JavaScript模塊加載器，
不但能在瀏覽器端充分利用，同樣能在其他的JavaScript運(yùn)行時(shí)環(huán)境，
比如Rhino和NodeJS。使用像RequireJS這樣的模塊加載器能提高代碼的質(zhì)量和開發(fā)速度。

RequireJS的兼容性

    IE 6+ .......... compatible ?
    Firefox 2+ ..... compatible ?
    Safari 3.2+ .... compatible ?
    Chrome 3+ ...... compatible ?
    Opera 10+ ...... compatible ?

模塊化核心之定義模塊

在RequireJS中，通過向全局變量注冊define函數(shù)來聲明一個(gè)模塊。在定義模塊時(shí)，我們要遵循一下的規(guī)范：

一個(gè)JavaScrip文件即為一個(gè)模塊，即一個(gè)JavaScrip文件只能定義一個(gè)define函數(shù)。

RequireJS最佳實(shí)踐推薦，定義模塊時(shí)不要指定模塊標(biāo)識。這樣方便后期壓縮。

RequireJS最佳實(shí)踐推薦推行盡量將代碼封裝到define函數(shù)里面。盡量不要使用shim配置項(xiàng)。

以下代碼為定義一個(gè)模塊的簡單示例：

define(["jquery"],function($){

    //你的封裝的代碼

 });

上面的代碼應(yīng)該封裝到一個(gè)JavaScrip文件中，其作用是定義一個(gè)模塊，而且這個(gè)模塊依賴于其他的模塊，這里是指依賴jquery模塊，這個(gè)模塊在配置里已經(jīng)被定義，如果沒被定義，則有一套默認(rèn)的查找機(jī)制，（ps:后期會專門寫一篇相關(guān)文章），第二個(gè)參數(shù)為依賴模塊執(zhí)行后注入的參數(shù)，這樣在你的代碼中就可以肆無忌憚的使用美元($)啦。

模塊化核心之加載模塊

同定義模塊一樣，RequireJS提供require這個(gè)函數(shù)用來加載模塊，同樣有些規(guī)范需要我們遵守，

一個(gè)JavaScrip文件最好只定義一個(gè)require模塊入口。

require一般放在頁面的入口出，用來加載其他的模塊。

以下代碼是require的簡單利用：

require(["jquery"],function($){

    // todo

});

這個(gè)示例代碼的作用是加載指定jquery模塊，并且在回調(diào)函數(shù)中注入$。（題外話，我一般把一個(gè)業(yè)務(wù)模塊為一個(gè)入口模塊。）

模塊化核心之配置文件

RequireJS強(qiáng)大的靈活性是通過配置文件來實(shí)現(xiàn)的，通過配置文件你可以簡化模塊的完整路徑，可以切換同一個(gè)腳本的多個(gè)版本，統(tǒng)一管理腳本，也可以為非模塊化的腳本指定shim操作等等。（詳細(xì)請見http://www.requirejs.org/docs/api.html#config）

RequireJS簡單示例

下面我們通過一個(gè)簡短的例子來窺探一下RequireJS的基本運(yùn)行流程，并同時(shí)加深一下前面理論基礎(chǔ)的理解。項(xiàng)目示例的目錄結(jié)構(gòu)如下圖所示：

每個(gè)文件的代碼分別如下所示：

project.html



    
        
        RequireJS簡單示例

main.js

require(["helper/util"], function(util) {
    // todo
});

util.js

define(function(){
    alert("Hello RequireJS!!");
});

在project.html中，在script標(biāo)簽中指定了一個(gè)data-main屬性，那么這個(gè)屬性是干什么用的呢？它用來指定頁面腳本的入口，簡單來說就是告訴頁面，你在找腳本嘛，沿著這個(gè)入口進(jìn)去就知道了。

通過data-main我們就知道入口腳本的位置，通過這個(gè)位置我們就知道了示例中的入口腳本文件所處位置為scripts/main.js,在這個(gè)頁面中require只調(diào)用了一次，和上面說的一樣，這個(gè)函數(shù)的作用是加載指定的依賴模塊。

在main.js中，指定了頁面加載的模塊為helper/util，然后RequireJS就會得出具體的模塊路徑地址，示例中該模塊的地址為：scripts/helper/util.js。然后我們進(jìn)入到這個(gè)頁面，發(fā)現(xiàn)內(nèi)部的代碼都是通過define函數(shù)來包裹的，這也符合上面說的，模塊的定義最好是通過define函數(shù)包裹起來。

找到這個(gè)模塊后，加載并調(diào)用，然后在頁面就會彈出一個(gè)Hello RequireJS!!警告框。

幫助文檔

RequireJS官網(wǎng)：http://requirejs.org/
RequireJS中文站：http://www.requirejs.cn/ （不太穩(wěn)定）

拓展閱讀

鏈接：http://justineo.github.io/singles/writing-modular-js/
鏈接：http://efe.baidu.com/blog/dissecting-amd-what/
鏈接：http://www.udpwork.com/item/3978.html
鏈接：http://justineo.github.io/singles/writing-modular-js/
鏈接：http://cyj.me/why-seajs/requirejs/