隨着網站功能逐漸豐富,網頁中的js也變得愈來愈複雜和臃腫,原有經過script標籤來導入一個個的js文件這種方式已經不能知足如今互聯網開發模式,咱們須要團隊協做、模塊複用、單元測試等等一系列複雜的需求。javascript
RequireJS是一個很是小巧的JavaScript模塊載入框架,是AMD規範最好的實現者之一。最新版本的RequireJS壓縮後只有14K,堪稱很是輕量。它還同時能夠和其餘的框架協同工做,使用RequireJS必將使您的前端代碼質量得以提高。html
官方對requirejs的描述:前端
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.java
大體意思:jquery
在瀏覽器中能夠做爲js文件的模塊加載器,也能夠用在Node和Rhino環境,balabala...。這段話描述了requirejs的基本功能"模塊化加載",什麼是模塊化加載?咱們要從以後的篇幅中一一解釋ajax
先來看一段常見的場景,經過示例講解如何運用requirejsapi
index.html:數組
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="a.js"></script> </head> <body> <span>body</span> </body> </html>
a.js:瀏覽器
function fun1(){ alert("it works"); } fun1();
可能你更喜歡這樣寫服務器
(function(){ function fun1(){ alert("it works"); } fun1(); })()
第二種方法使用了塊做用域來申明function防止污染全局變量,本質仍是同樣的,當運行上面兩種例子時不知道你是否注意到,alert執行的時候,html內容是一片空白的,即<span>body</span>
並未被顯示,當點擊肯定後,纔出現,這就是JS阻塞瀏覽器渲染致使的結果。
固然首先要到requirejs的網站去下載js -> requirejs.org
index.html:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["a"]); </script> </head> <body> <span>body</span> </body> </html>
a.js:
define(function(){ function fun1(){ alert("it works"); } fun1(); })
瀏覽器提示了"it works",說明運行正確,可是有一點不同,此次瀏覽器並非一片空白,body已經出如今頁面中,目前爲止能夠知道requirejs具備以下優勢:
<script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> <script type="text/javascript" src="e.js"></script> <script type="text/javascript" src="f.js"></script> <script type="text/javascript" src="g.js"></script> <script type="text/javascript" src="h.js"></script> <script type="text/javascript" src="i.js"></script> <script type="text/javascript" src="j.js"></script>
require.js解決了兩個問題:
(1)實現js文件的異步加載,避免網頁失去響應;
(2)管理模塊之間的依賴性,便於代碼的編寫和維護。
require會定義三個變量:define,require,requirejs,其中require === requirejs,通常使用require更簡短
前一篇中的a.js:
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
經過define函數定義了一個模塊,而後再頁面中使用:
require(["js/a"]);
來加載該模塊(注意require中的依賴是一個數組,即便只有一個依賴,你也必須使用數組來定義),require API的第二個參數是callback,一個function,是用來處理加載完畢後的邏輯,如:
require(["js/a"],function(){ alert("load finished"); })
require()異步加載模塊,瀏覽器不會失去響應;它指定的回調函數,只有前面的模塊都加載成功後,纔會運行,解決了依賴性的問題。
以前的例子中加載模塊都是本地js,可是大部分狀況下網頁須要加載的JS可能來自本地服務器、其餘網站或CDN,這樣就不能經過這種方式來加載了,咱們以加載一個jquery庫爲例:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] } }) require(["jquery","js/a"],function($){ $(function(){ alert("load finished"); }) })
這邊涉及了require.config
,require.config
是用來配置模塊加載位置,簡單點說就是給模塊起一個更短更好記的名字,好比將百度的jquery庫地址標記爲jquery
,這樣在require時只須要寫["jquery"]
就能夠加載該js,本地的js咱們也能夠這樣配置:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"], "a" : "js/a" } }) require(["jquery","a"],function($){ $(function(){ alert("load finished"); }) })
經過paths的配置會使咱們的模塊名字更精煉,paths還有一個重要的功能,就是能夠配置多個路徑,若是遠程cdn庫沒有加載成功,能夠加載本地的庫,如:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a" : "js/a" } }) require(["jquery","a"],function($){ $(function(){ alert("load finished"); }) })
這樣配置後,當百度的jquery沒有加載成功後,會加載本地js目錄下的jquery
.js
後綴的,固然也是不能寫後綴$
參數,這個就是依賴的jquery
模塊的輸出變量,若是你依賴多個模塊,能夠依次寫入多個參數來使用:require(["jquery","underscore"],function($, _){ $(function(){ _.each([1,2,3],alert); }) })
若是某個模塊不輸出變量值,則沒有,因此儘可能將輸出的模塊寫在前面,防止位置錯亂引起誤解
上面的例子中重複出現了require.config
配置,若是每一個頁面中都加入配置,必然顯得十分不雅,requirejs提供了一種叫"主數據"的功能,咱們首先建立一個main.js:
require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a" : "js/a" } })
而後再頁面中使用下面的方式來使用requirejs:
<script data-main="js/main" src="js/require.js"></script>
解釋一下,加載 requirejs 腳本的 script 標籤加入了data-main
屬性,這個屬性指定的 js 將在加載完 require.js 後處理,咱們把require.config
的配置加入到data-main
後,就可使每個頁面都使用這個配置,而後頁面中就能夠直接使用require
來加載全部的短模塊名
data-main
還有一個重要的功能,當script標籤指定data-main屬性時,require會默認的將data-main指定的js爲根路徑,是什麼意思呢?如上面的data-main="js/main"
設定後,咱們在使用require(['jquery'])
後(不配置jquery的paths),require會自動加載js/jquery.js這個文件,而不是jquery.js,至關於默認配置了:
require.config({ baseUrl : "js" })
經過require
加載的模塊通常都須要符合AMD規範即便用define
來申明模塊,具體來講,AMD規範就是模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊,那麼能夠直接定義在define()函數之中。
可是部分時候須要加載非AMD規範的js,這時候就須要用到另外一個功能:shim,shim解釋起來也比較難理解,shim直接翻譯爲"墊",其實也是有這層意思的,目前我主要用在兩個地方
1. 非AMD模塊輸出,將非標準的AMD模塊"墊"成可用的模塊,例如:在老版本的jquery中,是沒有繼承AMD規範的,因此不能直接require["jquery"],這時候就須要shim,好比我要是用underscore類庫,可是他並無實現AMD規範,那咱們能夠這樣配置
require.config({ shim: { "underscore" : { exports : "_"; } } })
這樣配置後,咱們就能夠在其餘模塊中引用underscore模塊:
require(["underscore"], function(_){ _.each([1,2,3], alert); })
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : { deps : ["jquery"] } } })
也能夠簡寫爲:
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : ["jquery"] } })
這樣配置以後咱們就可使用加載插件後的jquery了
require.config(["jquery", "jquery.form"], function($){ $(function(){ $("#form").ajaxSubmit({...}); }) })
一、引入requireJS
nuget下載requirejs,在body中經過<script>引入
<script data-main="../scripts/main" src="../../Scripts/require.js"></script>
在require.js 加載完畢時,會自動去加載配置文件 main.js。
二、基本參數配置
//main.js
require.config({
baseUrl:’’, //定義基準目錄
paths:{ //key/value,key=模塊id(本身定義),value=js文件名(不須要.js)
}
})
三、定義模塊
咱們之後所編寫的代碼或者是某段功能,都是要放在一個個定義好的模塊中。
下面是requireJS定義模塊的方法格式:
define([id,deps,] callback);
ID:模塊的ID,默認的即是文件名,通常無需使用者本身手動指定。
deps:當前模塊全部依賴的模塊數組,數組的每一個數組元素即是模塊名或者叫模塊ID。
callback:模塊的回調方法,用於保存模塊具體的功能與代碼,而這個回調函數又接收一個或者多個參數,這些參數會與模塊數組的每一個數組元素一一對應,即每一個參數保存的是對應模塊返回值。
返回結果能夠是一個對象,也能夠是一個函數。
方式:return
根據 define()
使用時參數數量的不一樣,能夠定義如下幾種模塊類型:
當所要定義的模塊沒有任何依賴也不具備任何的功能,只是單純的返回一組鍵值對形式的數據時,即可以直接將要返回的數據對象寫在 define
方法中:
//define1.js //模塊定義1,無依賴無功能函數 define({ 'color': 'red', 'size': '13px', 'width': '100px' }); 這種只爲保存數據的模塊,咱們稱之爲「值對」模塊 使用(加載模塊) //app.js //配置 require.config({ baseUrl: 'Scripts/', paths: { "jquery": "jquery-3.3.1", "define1": "app/define1", "define2": "app/define2", "define3": "app/define3", } }) //加載模塊1 require(['define1'], function (define1) { for (var prop in define1) { if (define1.hasOwnProperty(prop)) { console.log('key =' + prop + ' and value = ' + define1[prop]); } } })
若是一個模塊沒有任何的依賴,只是單純的執行一些操做,那麼即可以直接將函數寫在 define
方法中
//define2.js //模塊定義2,無依賴 但功能函數,返回一個對象 define(function () { return { 'color': 'red', 'size': '13px', } }) 使用(加載模塊) require(['define1', 'define2'], function (define1, define2) { console.log("define1"); for (var prop in define1) { if (define1.hasOwnProperty(prop)) { console.log('key =' + prop + ' and value = ' + define1[prop]); } } console.log("define2"); for (var prop in define2) { if (define2.hasOwnProperty(prop)) { console.log('key =' + prop + ' and value = ' + define2[prop]); } } })
這種帶有依賴的函數式模塊定義,也是咱們平時經常使用到的,
//define3.js //模塊定義3,依賴的函數式定義 但功能函數,返回一個對象 define(['jquery','define2'],function ($,define2) { obj= { 'color': 'red', 'size': '13px', } $(function () { console.log(obj.color); console.log(define2.size); }) // console.log(define2.size); //放這裏 會在一開始就輸出, }) 使用(加載模塊) //app.js //配置 require.config({ baseUrl: 'Scripts/', paths: { "jquery": "jquery-3.3.1", "define1": "app/define1", "define2": "app/define2", "define3": "app/define3", } }) require(['define1', 'define2', 'define3'], function (define1, define2, define3) { console.log("define1"); for (var prop in define1) { if (define1.hasOwnProperty(prop)) { console.log('key =' + prop + ' and value = ' + define1[prop]); } } console.log("define2"); for (var prop in define2) { if (define2.hasOwnProperty(prop)) { console.log('key =' + prop + ' and value = ' + define2[prop]); } } console.log("define3"); })
四、載入模塊
格式require(deps,[callback]);
deps:所要載入的模塊數組。
callback:模塊載入後執行的回調方法。
模塊以前由於有依賴,故不用載入全部模塊,載入一個的時候,會自動載入其所依賴的模塊(這個定義模塊裏面有 依賴關係)
callBcak定義和 定義模塊時的回調函數相似。。
更多參考:
阮一峯 require.js的用法
RequireJS中文網