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

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

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

RequireJS概述

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

RequireJS的兼容性

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

模塊化核心之定義模塊

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

一個JavaScrip文件即為一個模塊，即一個JavaScrip文件只能定義一個define函數。

RequireJS最佳實踐推薦，定義模塊時不要指定模塊標識。這樣方便后期壓縮。

RequireJS最佳實踐推薦推行盡量將代碼封裝到define函數里面。盡量不要使用shim配置項。

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

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

    //你的封裝的代碼

 });

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

模塊化核心之加載模塊

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

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

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

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

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

    // todo

});

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

模塊化核心之配置文件

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

RequireJS簡單示例

下面我們通過一個簡短的例子來窺探一下RequireJS的基本運行流程，并同時加深一下前面理論基礎的理解。項目示例的目錄結構如下圖所示：

每個文件的代碼分別如下所示：

project.html



    
        
        RequireJS簡單示例

main.js

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

util.js

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

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

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

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

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

幫助文檔

RequireJS官網：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/

GPU云服務器云服務器 amd模塊加載異步模塊加載機制-amd 未能加載模塊內核模塊加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85388.html

前端webpack workflow（一）——Webpack入門

摘要：開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無縫接合。異步方式，將依賴分割成多個節(jié)點，然后每個節(jié)點形成一個新的文件塊。會處理最常見的模塊標準和。通過聲明依賴，可以選擇一個本地的版本，而不需要使用全局聲明的版本。作者：Jogis 原文鏈接：https://github.com/yesvods/Blog/issues/2 轉載請注明原文鏈接以及作者信息模塊加載器...

DevWiki 2019-08-21 10:46 評論0 收藏0
前端webpack workflow（一）——Webpack入門

摘要：開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無縫接合。異步方式，將依賴分割成多個節(jié)點，然后每個節(jié)點形成一個新的文件塊。會處理最常見的模塊標準和。通過聲明依賴，可以選擇一個本地的版本，而不需要使用全局聲明的版本。作者：Jogis 原文鏈接：https://github.com/yesvods/Blog/issues/2 轉載請注明原文鏈接以及作者信息模塊加載器...

khs1994 2019-08-28 18:22 評論0 收藏0
前端webpack workflow（一）——Webpack入門

摘要：開發(fā)這樣一款加載器最大原因，就是為了代碼分離以及靜態(tài)資源模塊化無縫接合。異步方式，將依賴分割成多個節(jié)點，然后每個節(jié)點形成一個新的文件塊。會處理最常見的模塊標準和。通過聲明依賴，可以選擇一個本地的版本，而不需要使用全局聲明的版本。作者：Jogis 原文鏈接：https://github.com/yesvods/Blog/issues/2 轉載請注明原文鏈接以及作者信息模塊加載器...

hiYoHoo 2019-08-01 14:52 評論0 收藏0
【前端構建】RequireJS及其優(yōu)化工具

摘要：介紹一款模塊加載工具的入門，并且重點介紹其優(yōu)化工具。發(fā)布目錄項目源代碼工具目錄，例如構建工具等。另外，前端代碼發(fā)布前都會進行壓縮，使文件足夠小。原來是因為里了，所以優(yōu)化工具把也合并進來了。而優(yōu)化工具要用好，要多嘗試他們的配置選項。前端變化太快，如今RequireJS已經無法吸引眼球了。介紹一款模塊加載工具：RequireJS的入門，并且重點介紹其優(yōu)化工具。一、RequireJS簡介...

Loong_T 2019-08-19 17:59 評論0 收藏0