RequireJS:一款優秀的AMD模塊加載器

時間 2021-06-18

標籤 html node jquery git github segmentfault api 瀏覽器模塊化函數欄目 JavaScript 简体版

原文原文鏈接

RequireJS概述

RequireJS是一款遵循AMD規範協議的JavaScript模塊加載器，
不但能在瀏覽器端充分利用，一樣能在其餘的JavaScript運行時環境，
好比Rhino和NodeJS。使用像RequireJS這樣的模塊加載器能提升代碼的質量和開發速度。html

RequireJS的兼容性

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

模塊化核心之定義模塊

在RequireJS中，經過向全局變量註冊define函數來聲明一個模塊。在定義模塊時，咱們要遵循一下的規範：node

一個JavaScrip文件即爲一個模塊，即一個JavaScrip文件只能定義一個define函數。
RequireJS最佳實踐推薦，定義模塊時不要指定模塊標識。這樣方便後期壓縮。
RequireJS最佳實踐推薦推行儘可能將代碼封裝到define函數裏面。儘可能不要使用shim配置項。

如下代碼爲定義一個模塊的簡單示例：jquery

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

    //你的封裝的代碼

 });

上面的代碼應該封裝到一個JavaScrip文件中，其做用是定義一個模塊，並且這個模塊依賴於其餘的模塊，這裏是指依賴jquery模塊，這個模塊在配置裏已經被定義，若是沒被定義，則有一套默認的查找機制，（ps:後期會專門寫一篇相關文章），第二個參數爲依賴模塊執行後注入的參數，這樣在你的代碼中就能夠肆無忌憚的使用美圓($)啦。git

模塊化核心之加載模塊

同定義模塊同樣，RequireJS提供require這個函數用來加載模塊，一樣有些規範須要咱們遵照，github

一個JavaScrip文件最好只定義一個require模塊入口。
require通常放在頁面的入口出，用來加載其餘的模塊。

如下代碼是require的簡單利用：segmentfault

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

    // todo

});

這個示例代碼的做用是加載指定jquery模塊，而且在回調函數中注入$。（題外話，我通常把一個業務模塊爲一個入口模塊。）api

模塊化核心之配置文件

RequireJS強大的靈活性是經過配置文件來實現的，經過配置文件你能夠簡化模塊的完整路徑，能夠切換同一個腳本的多個版本，統一管理腳本，也能夠爲非模塊化的腳本指定shim操做等等。（詳細請見http://www.requirejs.org/docs/api.html#config）瀏覽器

RequireJS簡單示例

下面咱們經過一個簡短的例子來窺探一下RequireJS的基本運行流程，並同時加深一下前面理論基礎的理解。項目示例的目錄結構以下圖所示：
模塊化

每一個文件的代碼分別以下所示：函數

project.html

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>RequireJS簡單示例</title>
    </head>
    <body>
        <script src="scripts/require.js" data-main="scripts/main"></script>
    </body>
</html>

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。而後咱們進入到這個頁面，發現內部的代碼都是經過define函數來包裹的，這也符合上面說的，模塊的定義最好是經過define函數包裹起來。

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