使用RequireJS優(yōu)化JavaScript引用代碼的方法
RequireJS是一個(gè)提高你的javascript代碼速度和質(zhì)量的有效方法,同時(shí)它還讓你的代碼更容易閱讀和維護(hù)。
在本文中,我會(huì)為你介紹RequireJS和應(yīng)該如何使用它。我們討論引入文件和定義模塊,甚至還會(huì)接觸優(yōu)化方面的知識(shí)。
簡單的說,require.js是一個(gè)腳本載入程序,允許你把你的javascript代碼獨(dú)立成文件和模塊,同時(shí)管理每個(gè)模塊間的依賴關(guān)系。
引入文件
在開始使用RequireJS前,我們需要先下載它的庫和Asynchronous Module Definition(AMD)文件。然后在文檔頭部鏈接到require.js文件,就如:
<script src="require.js" data-main="main"></script>
你可能會(huì)問data-main屬性是什么,使用RequireJS意味著當(dāng)你在文檔的頭部調(diào)用require的時(shí)候,你同時(shí)也會(huì)鏈接到你的javascript應(yīng)用的主文件,在這個(gè)例子里面就是main.js(請注意,RequireJS自動(dòng)添加.js后綴到文件名的后面)
在main.js文件里面,需要為RequireJS做配置,載入模塊和定義一個(gè)base路徑,以便在引入文件時(shí)使用。
Require函數(shù)
RequireJS使用一個(gè)簡單的require函數(shù)去導(dǎo)入腳本,在這個(gè)例子里面,RequireJS導(dǎo)入的是JQuery:
require(["jquery"], function($) {
$(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});
RequireJS的一個(gè)優(yōu)點(diǎn)就是,它非常容易閱讀。在上面的代碼中,我們可以看到,首先require函數(shù)抓取名字為jquery.js的文件,然后給一個(gè)匿名函數(shù)傳入$作為參數(shù),當(dāng)這個(gè)動(dòng)作完成后,你就可以任意使用JQuery的代碼了。
現(xiàn)在,你的代碼中一般不會(huì)包含jquery.js文件的jQuery庫,就如大多數(shù)的插件和框架,我們通常選擇從他們的GitHub或者Google CDN中導(dǎo)入進(jìn)來,這樣我們就需要配置他們的真正路徑:
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
}
});
這就是說你可以通過Google導(dǎo)入jquery(請注意我在這個(gè)例子里面使用的是"jquery"名稱,你可以使用任何你喜歡的名稱)
定義模塊
使用AMD模式,意味著我們的代碼可以結(jié)構(gòu)化成為模塊;這些模塊實(shí)現(xiàn)應(yīng)用中的某些功能。你可以在一個(gè)模塊中只放兩行代碼或者100行代碼,這完全決定于你想通過模塊實(shí)現(xiàn)什么功能。
定義模塊,我們可以這樣寫:
define(function () {
function add (x,y) {
return x + y;
}
});
這個(gè)里面里面,我定義了一個(gè)add函數(shù),并且沒有任何依賴,但是如果這個(gè)函數(shù)需要jquery才能正常工作,定義代碼可能就是這樣:
define([‘jquery'], function () {
function place(mydiv) {
$(mydiv).html(‘My Sample Text');
}
});
使用這種語法,我們告訴JavaScript首先導(dǎo)入jquery,然后運(yùn)行代碼,這樣任何時(shí)候都能使用jquery。我們也可以使用在Javascript文件中定義的模塊,不僅限于框架或者插件。
優(yōu)化
就像你看到的一樣,RequireJS是一個(gè)強(qiáng)大的工具,去把你的文件組織成模塊,并且在你需要的時(shí)候才導(dǎo)入。其中的缺點(diǎn)就是大量的javascript文件的時(shí)候,也需要大量的導(dǎo)入時(shí)間,所以RequireJS包含了一個(gè)optimizer優(yōu)化器去收集所有文件的數(shù)據(jù)并把它放到一個(gè)壓縮文件里面。
總的來說,RequireJS是一個(gè)很好的工具去組織和優(yōu)化你web應(yīng)用中的Javascript。
相關(guān)文章
分析Node.js connect ECONNREFUSED錯(cuò)誤
最近在準(zhǔn)備Angularjs +node.js demo的時(shí)候在我的mac開發(fā)中 遇見此錯(cuò)誤2013-04-04
JavaScript基礎(chǔ)之立即執(zhí)行函數(shù)
這篇文章主要介紹了如何理解JavaScript中的立即執(zhí)行函數(shù),幫助大家更好的學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2021-11-11
javascript中的=等號個(gè)數(shù)問題兩個(gè)跟三個(gè)有什么區(qū)別
一個(gè)等號就是個(gè)賦值的作用,主要問題在于兩個(gè)跟三個(gè)等號的區(qū)別,想必有很多的朋友都不知道吧,在本文有個(gè)不錯(cuò)的示例主要介紹下兩者到底有什么區(qū)別,感興趣的朋友不要錯(cuò)過2013-10-10
原生js實(shí)現(xiàn)獲取form表單數(shù)據(jù)代碼實(shí)例
這篇文章主要介紹了原生js實(shí)現(xiàn)獲取form表單數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
怎樣在JavaScript里寫一個(gè)swing把數(shù)據(jù)插入數(shù)據(jù)庫
在JavaScript里寫一個(gè)swing來實(shí)現(xiàn)確定取消,來決定是否執(zhí)行這個(gè)功能 控制把數(shù)據(jù)插入數(shù)據(jù)庫,接下來介紹實(shí)現(xiàn)方法2012-12-12
Javascript基礎(chǔ)知識(shí)(一)核心基礎(chǔ)語法與事件模型
這篇文章主要介紹了Javascript用途及語法,傳統(tǒng)事件及現(xiàn)代事件,是最近這段時(shí)間個(gè)人學(xué)習(xí)javascript的一些心得,分享給大家,有需要的朋友可以參考下2014-09-09
JavaScript中的分號插入機(jī)制詳細(xì)介紹
這篇文章主要介紹了JavaScript中的分號插入機(jī)制詳細(xì)介紹,本文講解JavaScript中各種情況下的分號插入機(jī)制,需要的朋友可以參考下2015-02-02

