這篇文章主要介紹JavaScript中Require調(diào)用js的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專(zhuān)注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)寧陽(yáng)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

在我最初開(kāi)始寫(xiě) JavaScript 函數(shù)時(shí)，通常是這樣的：

function fun1() {
 // some code here
}
function fun2() {
 // some other code here
}
...

函數(shù)全寫(xiě)在全局環(huán)境中，項(xiàng)目很小時(shí)，通常不會(huì)有什么沖突問(wèn)題。

但代碼多了后，漸漸就發(fā)現(xiàn)，函數(shù)名稱(chēng)（英文詞匯）有點(diǎn)不夠用了。于是引入命名空間的概念，開(kāi)始模塊化代碼。

命名空間下的函數(shù)

在命名空間下，我的代碼這樣寫(xiě)：

var com = com || {};
com.zfanw = com.zfanw || {};
com.zfanw.module1 = (function() {
 // some code here
 return {
 func1: func1,
 ...
 };
}());
com.zfanw.module2 = (function() {
 // some other code here
 return {
 func1: func1,
 ...
 };
}());
...

本著要面向?qū)ο蟮脑瓌t，執(zhí)行函數(shù)通常我要這么寫(xiě)的：

com.zfanw.module1.func1.apply({},['arg1',arg2]);
...

當(dāng)然，為了少打些字符，我還會(huì)在閉包中導(dǎo)入1公共 API 接口：www.jb51.net

(function($, mod1) {
 // some code here
 mod1.func1.apply({},['arg1',arg2]);
}(jQuery, com.zfanw.module1)）;
...

至此，代碼沖突的可能性已經(jīng)很小，但代碼依賴(lài)的問(wèn)題，多腳本文件管理、阻塞的問(wèn)題，漸漸浮出水面 – 命名空間的辦法開(kāi)始捉急。

于是 Require.js2 出場(chǎng)。

Require.js

首先了解下 require.js 里模塊的概念3：

A module is different from a traditional script file in that it defines a well-scoped object that avoids polluting the global namespace. It can explicitly list its dependencies and get a handle on those dependencies without needing to refer to global objects, but instead receive the dependencies as arguments to the function that defines the module.

簡(jiǎn)單地說(shuō)，有兩點(diǎn)，一、模塊作用域自成一體，不污染全局空間；二、模塊指明依賴(lài)關(guān)系，并且依賴(lài)是通過(guò)參數(shù)傳遞的形式導(dǎo)入的，無(wú)需通過(guò)全局對(duì)象引用 – 依賴(lài)同樣不污染全局空間。

定義模塊

與上面的老長(zhǎng)的命名空間方式不同，require.js 用全局方法 define 來(lái)定義模塊，形式如下：

define(id?, dependencies?, factory); // ? 表示可選項(xiàng)

我且把模塊分兩種。

無(wú)依賴(lài)的模塊

假如一個(gè)模塊并不依賴(lài)其他模塊，那么定義起來(lái)是很簡(jiǎn)單的，比如模塊 hello 放在 hello.js 文件中：

define(function() {
 // some code here
 return {
 // some public api
 };
});

有依賴(lài)的模塊

有依賴(lài)的模塊要稍稍復(fù)雜點(diǎn)，define 時(shí)，我們需要羅列出模塊的依賴(lài)情況：

define(['jquery'], function($) { // 比如這個(gè)模塊，代碼的執(zhí)行依賴(lài) jQuery，require.js 會(huì)先加載 jquery 模塊代碼，并加以執(zhí)行，然后將依賴(lài)模塊 以 $ 的參數(shù)形式傳入回調(diào)函數(shù)中，回調(diào)函數(shù)將執(zhí)行結(jié)果注冊(cè)為模塊
 // maybe some code here
 return {
 // some public api
 };
});

這里，依賴(lài)中的 'jquery' 是模塊相對(duì)于 baseUrl 的路徑，等效于模塊 ID。

現(xiàn)在，再回過(guò)頭，看看上面寫(xiě)過(guò)的閉包中導(dǎo)入公共 API 的代碼，跟 define 函數(shù)做個(gè)對(duì)比：

(function($, mod1) {
 // some code here
 mod1.func1.apply({},['arg1',arg2]);
}(jQuery, com.zfanw.module1)）;

這段代碼里，我同樣把 jQuery 導(dǎo)入了，在閉包里，我同樣是通過(guò) $ 這個(gè)外部傳入的參數(shù)來(lái)訪(fǎng)問(wèn) jQuery。可以說(shuō)，它「定義依賴(lài)」的方式跟 define 方法很相似，不同的是，define 導(dǎo)入的 jquery 不是全局變量，所以不會(huì)污染全局環(huán)境。

關(guān)于模塊名稱(chēng)

define 函數(shù)有三個(gè)參數(shù)，第一個(gè) id 即模塊名稱(chēng)，這個(gè)名稱(chēng)的格式是相對(duì)于 baseUrl 的路徑除去文件格式，比如 baseUrl 為 js 目錄，一個(gè)模塊放在 js/libs/hi.js 里，則如果名稱(chēng)是這樣定義的：

define('libs/hi', ['jquery'], function($){......});

這樣的定義形式的好處是，模塊不可能沖突，因?yàn)橥荒夸浵虏辉试S同名文件。但也因此 require.js 建議我們不要設(shè)置模塊名稱(chēng)，因?yàn)樵O(shè)置了 ‘libs/hi' 的模塊名稱(chēng)后，模塊就必須放在 js/libs 目錄下的 hi.js 文件中，要移動(dòng)位置的話(huà)，模塊名稱(chēng)要跟著改變。至于后期利用 r.js 優(yōu)化時(shí)生成了模塊名稱(chēng)，那已經(jīng)是另外一回事。

使用模塊

在定義好「有依賴(lài)」、「沒(méi)依賴(lài)」的各種模塊后，我們?cè)撛趺从盟縍equire.js 提供了一個(gè)函數(shù)，require（與 requirejs 等效）。

require 函數(shù)加載依賴(lài)并執(zhí)行回調(diào)，與 define 不同的是，它不會(huì)把回調(diào)結(jié)果4注冊(cè)成模塊：

require(['jquery'], function($) { // 這個(gè)函數(shù)加載 jquery 依賴(lài)，然后執(zhí)行回調(diào)代碼
 console.log($);
});

舉一個(gè)簡(jiǎn)單的例子。我有一個(gè)文件夾，文件結(jié)構(gòu)如下：

index.html
 js/
  main.js
  require.js
  jquery.js

這里 jquery.js 已經(jīng)注冊(cè)為 AMD 模塊，則 HTML 文件里這樣引用 require.js：

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

require.js 會(huì)檢查 data-main 屬性值，這里是 js/main，根據(jù)設(shè)定，它會(huì)加載 js 目錄下的 main.js 文件。

main.js 文件里，我只干一件事，用 jQuery 方法取得當(dāng)前窗口的寬度：

require(['jquery'], function($) {
 var w = $(window).width();
 console.log(w);
});

執(zhí)行代碼就這么簡(jiǎn)單。

非 AMD 規(guī)范的模塊

但事情遠(yuǎn)沒(méi)有我們想像中那么美好，AMD 只是一種社區(qū)規(guī)范，并非標(biāo)準(zhǔn)，而且在它出現(xiàn)以前，已經(jīng)有各種各樣的流行庫(kù)存在，更不用說(shuō)我們自己早期寫(xiě)的代碼，所以我們一定會(huì)碰上一堆非 AMD 規(guī)范的模塊。為了讓 require.js 能夠加載它們，并且自動(dòng)識(shí)別、載入依賴(lài)，我們有兩種選擇，一、給它們?nèi)┥弦粋€(gè)叫 define 的函數(shù)；二、使用 Require.js 提供的配置選項(xiàng) shim，曲線(xiàn)救國(guó)。

比如我手上一個(gè)項(xiàng)目，因?yàn)槟撤N原因，還在用 jQuery 1.4.1 版本，而 jQuery 是從1.7版本開(kāi)始才注冊(cè)為 AMD 模塊的，我要在 require.js 中使用，就需要先做 shim：

require.config({
 shim: {
  'jquery-1.4.1': { // <= 這個(gè)是相對(duì)于 main.js 的路徑www.45it.com
   exports: 'jQuery' // <= 這個(gè)值需要稍加注意，稍后會(huì)提及
  },
  'libs/jquery-throttle-debounce.min': { // <= jQuery 插件
   deps: ['jquery-1.4.1'] //無(wú)需 exports，因?yàn)槲覀冎皇窃谠鰪?qiáng) jQuery 功能
  }
 },
});
require(['jquery-1.4.1', 'libs/jquery-throttle-debounce.min'], function($){
 console.log($.debounce);
});

寫(xiě)完 shim，發(fā)現(xiàn) jquery-1.4.1、libs/jquery-throttle-debounce.min 這樣的名稱(chēng)有點(diǎn)長(zhǎng)。這里我們又有兩種選擇，一是直接打開(kāi)修改 js 文件名，或者使用 require.js 提供的配置項(xiàng) paths 給模塊 ID 指定對(duì)應(yīng)的真實(shí)文件路徑：

require.config({
 paths: {
  'jquery': 'jquery-1.4.1', // <= 模塊 jquery 指向 js/jquery-1.4.1.js 文件
  'debounce': 'libs/jquery-throttle-debounce.min'
 },
 shim: {
  'jquery': {
   exports: '$'
  },
  'debounce': {
   deps: ['jquery']
  }
 }
});
require(['jquery', 'debounce'], function($){
 console.log($.debounce);
});

這樣，引用起來(lái)就方便多了。

另外，需要注意 shim 中的 exports 項(xiàng)，它的概念更接近 imports，即把全局變量導(dǎo)入。我們?nèi)绻?exports 值改成非全局變量名，就會(huì)導(dǎo)致傳入回調(diào)的對(duì)象變成 undefined，舉個(gè)例子：

require.config({
 paths: {
  'jquery': 'jquery-1.4.1',
 },
 shim: {
  'jquery': {
   exports: 'hellojQuery' // 這里我把 exports 值設(shè)置為 jQuery/$ 以外的值
  }
 }
});
require(['jquery'], function($){
 console.log($);// 這里，會(huì)顯示 undefined
});

其他模塊在做 shim 時(shí)同理，比如 underscore 需要 exports 成 _。

Require.js 的好處

說(shuō)了這么多，Require.js 到底有什么好處？

并行加載

我們知道，<script></script> 標(biāo)簽會(huì)阻塞頁(yè)面，加載 a.js 時(shí)，后面的所有文件都得等它加載完成并執(zhí)行結(jié)束后才能開(kāi)始加載、執(zhí)行。而 require.js 的模塊可以并行下載，沒(méi)有依賴(lài)關(guān)系的模塊還可以并行執(zhí)行，大大加快頁(yè)面訪(fǎng)問(wèn)速度。

不愁依賴(lài)

在我們定義模塊的時(shí)候，我們就已經(jīng)決定好模塊的依賴(lài) – c 依賴(lài) b，b 又依賴(lài) a。當(dāng)我想用 c 模塊的功能時(shí)，我只要在 require函數(shù)的依賴(lài)?yán)镏付?c：

require(['c'], function(c) {...});

至于 c 依賴(lài)的模塊，c 依賴(lài)的模塊的依賴(lài)模塊… 等等，require.js 會(huì)幫我們打理。

而傳統(tǒng)的 script 辦法，我們必須明確指定所有依賴(lài)順序：

<script src="js/a.js"></script>
 <script src="js/b.js"></script>
 <script src="js/c.js"></script>

換句話(huà)說(shuō)，傳統(tǒng)的 script 方法里，我們極可能要靠記憶或者檢查模塊內(nèi)容這種方式來(lái)確定依賴(lài) – 效率太低，還費(fèi)腦。

減少全局沖突

通過(guò) define 的方式，我們大量減少了全局變量，這樣代碼沖突的概率就極小極小 – JavaScript 界有句話(huà)說(shuō)，全局變量是魔鬼，想想，我們能減少魔鬼的數(shù)量，我想是件好事。

關(guān)于全局變量

有一點(diǎn)需要說(shuō)明的是，require.js 環(huán)境中并不是只有 define 和 require 幾個(gè)全局變量。許多庫(kù)都會(huì)向全局環(huán)境中暴露變量，以 jQuery 為例，1.7版本后，它雖然注冊(cè)自己為 AMD 模塊，但同時(shí)也向全局環(huán)境中暴露了 jQuery 與 $。所以以下代碼中，雖然我們沒(méi)有向回調(diào)函數(shù)傳入一份引用，jQuery/$ 同樣是存在的：

require(['jquery'], function(){
 console.log(jQuery);
 console.log($);
});

以上是“JavaScript中Require調(diào)用js的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：JavaScript中Require調(diào)用js的示例分析-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://m.newbst.com/article30/diheso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、建站公司、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)