require.js深入了解 require.js特性介紹
現(xiàn)在，Require.js是我最喜歡的Javascript編程方式。它可以使代碼化整為零，并易于管理。而Require.js Optimizer能幫助我們將一個(gè)較大的應(yīng)用分散成多個(gè)較小的應(yīng)用，并通過(guò)依賴(lài)串聯(lián)起來(lái)，最后在編譯打包時(shí)合并起來(lái)。這些原因促使我們使用require.js。
那么，讓我們來(lái)看看require.js有什么牛逼的特性吧！
與CommonJS兼容
AMD (異步模塊定義規(guī)范) 出現(xiàn)自CommonJS工作組。CommonJS旨在創(chuàng)造Javascript的生態(tài)系統(tǒng)。 CommonJS的一個(gè)重要部分是transport/c， 即AMD的前身，而require.js則是該規(guī)范的一個(gè)實(shí)現(xiàn)。
CommonJS模塊和AMD模塊的語(yǔ)法差異，主要由于AMD需要支持瀏覽器的異步特性。而CommonJS模塊則需要同步進(jìn)行，例如：
var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
exports.asplode = function() {
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
AMD模塊是異步加載模塊的，故而模塊定義需要一個(gè)數(shù)組作為第一個(gè)參數(shù)，而模塊加載完畢后回調(diào)的函數(shù)作為第二個(gè)參數(shù)傳入。
define( [ "someModule"], function( someModule ) {
return {
asplode: function() {
someModule.doTehAwesome();
// 這將會(huì)異步執(zhí)行
require( [ "anotherModule" ], function( anotherModule ) {
anotherModule.doMoarAwesome();
});
}
};
});
然而，在require.js中AMD亦能兼容CommonJS語(yǔ)法。通過(guò)AMD的define函數(shù)包裝CommonJS模塊，你也可以再AMD中擁有一個(gè)CommonJS模塊，例如：
define(function( require, exports, module )
var someModule = require( "someModule" );
var anotherModule = require( "anotherModule" );
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
exports.asplode = function() {
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
});
實(shí)際上，require.js通過(guò)函數(shù).toString解釋回調(diào)函數(shù)的模塊內(nèi)容，找到其正確的依賴(lài)，將其變成一個(gè)通常的AMD模塊。需要注意，如果你使用這種方式編寫(xiě)模塊，可能會(huì)發(fā)生與其他AMD加載器不兼容的情況，因?yàn)檫@違背了AMD規(guī)范，但它能很好的理解這種格式的寫(xiě)法。
這里發(fā)生了什么，require.js實(shí)際上做了function.toString的回調(diào)函數(shù)解析模塊的內(nèi)容，找到正確的依賴(lài)，就像它，如果它是一個(gè)正常的AMD模塊。重要的是要注意，如果您選擇這樣寫(xiě)模塊，他們將最有可能不兼容與其他AMD模塊裝載機(jī)，因?yàn)檫@違背了AMD規(guī)范，但它是很好的了解這個(gè)格式存在！
CDN回退
另一個(gè)隱藏的require.js瑰寶是，其支持當(dāng)CDN加載不正確時(shí)，回退加載本地相應(yīng)的庫(kù)。我們可以通過(guò)require.config達(dá)到這個(gè)目的：
requirejs.config({
paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});
沒(méi)有依賴(lài)？對(duì)象字面量？沒(méi)問(wèn)題！
當(dāng)你寫(xiě)一個(gè)沒(méi)有任何依賴(lài)的模塊，并且只是返回一個(gè)對(duì)象包含一些功能函數(shù)，那么我們可以使用一種簡(jiǎn)單的語(yǔ)法：
define({
forceChoke: function() {
},
forceLighting: function() {
},
forceRun: function() {
}
});
很簡(jiǎn)單，也很有用，如果該模塊僅僅是功能的集合，或者只是一個(gè)數(shù)據(jù)包。
循環(huán)依賴(lài)
在一些情況中，我們可能需要模塊moduleA和moduleA中的函數(shù)需要依賴(lài)一些應(yīng)用。這就是循環(huán)依賴(lài)。
// js/app/moduleA.js
define( [ "require", "app/app"],
function( require, app ) {
return {
foo: function( title ) {
var app = require( "app/app" );
return app.something();
}
}
}
);
得到模塊的地址
如果你需要得到模塊的地址，你可以這么做……
var path = require.toUrl("./style.css");
BaseUrl
通常，在進(jìn)行的單元測(cè)試時(shí)，你的源代碼可能放在類(lèi)似src的文件夾里，同時(shí)，可能你的測(cè)試放在類(lèi)似tests的文件夾里。這可能比較難讓測(cè)試配置正確。
比如我們?cè)趖ests文件夾有一個(gè)index.html文件，并需要本地加載tests/spec/*.js。并假設(shè)，所有源代碼在為src/js/*.js，并有一個(gè)main.js在該文件夾。
index.html中，不在加載require.js時(shí)設(shè)置data-main。
<script src="src/js/vendor/require.js"></script>
<script>
require( [ "../src/js/main.js" ], function() {
require.config({
baseUrl: "../src/js/"
});
require([
"./spec/test.spec.js",
"./spec/moar.spec.js"
], function() {
// start your test framework
});
});
</script>
你可以發(fā)現(xiàn)main.js被加載。然而由于沒(méi)有設(shè)置data-main，所欲我們需要制定一個(gè)baseUrl。而當(dāng)使用data-main時(shí)，baseUrl會(huì)根據(jù)其設(shè)定的文件來(lái)自動(dòng)設(shè)置。
在這里，你可以看到main.js被載入。然而，由于它沒(méi)有加載數(shù)據(jù)主要腳本標(biāo)記，那么您必須指定一個(gè)base即可。當(dāng)數(shù)據(jù)主要是用于baseURL時(shí)從主文件中的位置推斷。通過(guò)自定義baseUrl我們可以很容易將測(cè)試代碼和應(yīng)用代碼分開(kāi)存放。
JSONP
我們可以這樣處理JSONP終端：
require( [
"http://someapi.com/foo?callback=define"
], function (data) {
console.log(data);
});
對(duì)于非AMD庫(kù)，使用shim來(lái)解決
在很多請(qǐng)款下，我們需要使用非AMD庫(kù)。例如Backbone和Underscore并未適應(yīng)AMD規(guī)范。而jQuery實(shí)際上只是將自己定義成一個(gè)名為jQuery全局變量，所以對(duì)于jQuery什么都不用做。
幸運(yùn)的是，我們可以使用shim配置來(lái)解決這一問(wèn)題。
require.config({
paths: {
"backbone": "vendor/backbone",
"underscore": "vendor/underscore"
},
shim: {
"backbone": {
deps: [ "underscore" ],
exports: "Backbone"
},
"underscore": {
exports: "_"
}
}
});
- 第二次聊一聊JS require.js模塊化工具的基礎(chǔ)知識(shí)
- 第一次接觸JS require.js模塊化工具
- Javascript模塊化編程(三)require.js的用法及功能介紹
- require.js+vue開(kāi)發(fā)微信上傳圖片組件
- require.js 加載 vue組件 r.js 合并壓縮的實(shí)例
- require.js配合插件text.js實(shí)現(xiàn)最簡(jiǎn)單的單頁(yè)應(yīng)用程序
- require.js的用法詳解
- AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
- 淺析js的模塊化編寫(xiě) require.js
相關(guān)文章
基于d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線(xiàn)圖
本文用實(shí)例演示如何用d3.js實(shí)現(xiàn)實(shí)時(shí)刷新的折線(xiàn)圖,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2016-08-08
JS日程管理插件FullCalendar中文說(shuō)明文檔
JS日程管理插件FullCalendar提供了豐富的屬性設(shè)置和方法調(diào)用，開(kāi)發(fā)者可以根據(jù)FullCalendar提供的API快速完成一個(gè)日歷日程的開(kāi)發(fā)，本文將FullCalendar的常用屬性和方法、回調(diào)函數(shù)等整理成中文文檔，以供參閱。2017-02-02
本文利用實(shí)例代碼詳細(xì)介紹了一些Three.js中的幾何形狀的實(shí)現(xiàn)過(guò)程，包括立方體、平面與球體，有需要的朋友們可以學(xué)習(xí)下。2016-08-08
使用RequireJS庫(kù)加載JavaScript模塊的實(shí)例教程
RequireJS庫(kù)的主旨就是一個(gè)js文件的模塊加載器,可以獨(dú)立于框架來(lái)進(jìn)行使用,這里我們整理了使用RequireJS庫(kù)加載JavaScript模塊的實(shí)例教程,需要的朋友可以參考下2016-06-06
FullCalendar是一款基于jQuery的日歷插件，適用于各種日程安排、工作計(jì)劃等場(chǎng)景，本文是fullCalendar官方文檔的中文版，主要介紹了fullCalendar的具體屬性與方法，大家可以參考一下2017-02-02
這篇文章主要介紹了淺談?shì)p量級(jí)js模板引擎simplite的簡(jiǎn)介和用法的相關(guān)資料,需要的朋友可以參考下2015-02-02
Highcharts是一個(gè)用純JavaScript編寫(xiě)的一個(gè)圖表庫(kù)，之前小編發(fā)了一篇介紹Highcharts的文章，那么本文將進(jìn)一步的介紹Highcharts的基本屬性，有需要的可以參考學(xué)習(xí)。2016-08-08
本文為大家分享了5個(gè)不錯(cuò)的javascript文件上傳插件，選擇一款功能強(qiáng)大使用簡(jiǎn)單的上傳插件將為我們節(jié)省很多開(kāi)發(fā)時(shí)間2018-09-09
淺談JavaScript前端開(kāi)發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)
以AngularJS為代表的MVVM結(jié)構(gòu)框架或庫(kù)這兩年來(lái)在前端界真是火到不行,大有對(duì)抗傳統(tǒng)jQuery綁定思想的趨勢(shì),這里我們結(jié)合傳統(tǒng)的MVC結(jié)構(gòu),來(lái)淺談JavaScript前端開(kāi)發(fā)的MVC結(jié)構(gòu)與MVVM結(jié)構(gòu)2016-06-06
Three.js學(xué)習(xí)之正交投影照相機(jī)
本篇主要介紹照相機(jī)中的正交投影照相機(jī)。學(xué)習(xí)Three.js的小伙伴們可以參考學(xué)習(xí)。2016-08-08