原文: http://tech.pro/tutorial/1300/deep-dive-into-requirejs
by:Jonathan Creamer
?
現(xiàn)在,Require.js是我最喜歡的Javascript編程方式。它可以使代碼化整為零,并易于管理。而Require.js?Optimizer能幫助我們將一個(gè)較大的應(yīng)用分散成多個(gè)較小的應(yīng)用,并通過(guò)依賴串聯(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)容,找到其正確的依賴,將其變成一個(gè)通常的AMD模塊。需要注意,如果你使用這種方式編寫模塊,可能會(huì)發(fā)生與其他AMD加載器不兼容的情況,因?yàn)檫@違背了AMD規(guī)范,但它能很好的理解這種格式的寫法。
這里發(fā)生了什么,require.js實(shí)際上做了function.toString的回調(diào)函數(shù)解析模塊的內(nèi)容,找到正確的依賴,就像它,如果它是一個(gè)正常的AMD模塊。重要的是要注意,如果您選擇這樣寫模塊,他們將最有可能不兼容與其他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)有依賴?對(duì)象字面量?沒(méi)問(wèn)題!
當(dāng)你寫一個(gè)沒(méi)有任何依賴的模塊,并且只是返回一個(gè)對(duì)象包含一些功能函數(shù),那么我們可以使用一種簡(jiǎn)單的語(yǔ)法:
define({ forceChoke: function () { }, forceLighting: function () { }, forceRun: function () { } });
很簡(jiǎn)單,也很有用,如果該模塊僅僅是功能的集合,或者只是一個(gè)數(shù)據(jù)包。
?
循環(huán)依賴
在一些情況中,我們可能需要模塊moduleA和moduleA中的函數(shù)需要依賴一些應(yīng)用。這就是循環(huán)依賴。
// 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í),你的源代碼可能放在類似src的文件夾里,同時(shí),可能你的測(cè)試放在類似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)用代碼分開存放。
?
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: "_" } } });
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
