RequireJS入門(一)


RequireJS由James Burke創建,他也是AMD規范的創始人。

 

RequireJS會讓你以不同於往常的方式去寫JavaScript。你將不再使用script標簽在HTML中引入JS文件,以及不用通過script標簽順序去管理依賴關系。

 

當然也不會有阻塞(blocking)的情況發生。好,以一個簡單示例開始。

 

新建一個目錄,結構如下

 

目錄r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官網下載即可。

 

index.html如下

<!doctype html>
<html>
	<head>
		<title>requirejs入門(一)</title>
		<meta charset="utf-8">
		<script data-main="main" src="require.js"></script>
 	</head>
 	<body>
	
 	</body>
</html>

  

使用requirejs很簡單,只需要在head中通過script標簽引入它(實際上除了require.js,其它文件模塊都不再使用script標簽引入)。

細心的同學會發現script標簽上了多了一個自定義屬性:data-main="main",等號右邊的main指的main.js。當然可以使用任意的名稱。這個main指主模塊或入口模塊,好比c或java的主函數main。

 

main.js如下

require.config({
	paths: {
		jquery: 'jquery-1.7.2'
	}
});

require(['jquery'], function($) {
	alert($().jquery);
});

 

main.js中就兩個函數調用require.config和require。

 

require.config用來配置一些參數,它將影響到requirejs庫的一些行為。

require.config的參數是一個JS對象,常用的配置有baseUrl,paths等。

 

這里配置了paths參數,使用模塊名“jquery”,其實際文件路徑jquery-1.7.2.js(后綴.js可以省略)。

 

我們知道jQuery從1.7后開始支持AMD規范,即如果jQuery作為一個AMD模塊運行時,它的模塊名是“jquery”。注意“jquery”是固定的,不能寫“jQuery”或其它。

 

注:如果文件名“jquery-1.7.2.js”改為“jquery.js”就不必配置paths參數了。

 

jQuery中的支持AMD代碼如下

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
	define( "jquery", [], function () { return jQuery; } );
}

 

我們知道jQuery最終向外暴露的是全局的jQuery和 $。如下

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

 

如果將jQuery應用在模塊化開發時,其實可以不使用全局的,即可以不暴露出來。需要用到jQuery時使用require函數即可,

 

這里require函數的第一個參數是數組,數組中存放的是模塊名(字符串類型),數組中的模塊與回調函數的參數一一對應。這里的例子則只有一個模塊“jquery”。

 

把目錄r1放到apache或其它web服務器上,訪問index.html。

 

網絡請求如下

 

我們看到除了require.js外main.js和jquery-1.7.2.js也請求下來了。而它們正是通過requirejs請求的。

 

頁面上會彈出jQuery的版本

 

這是一個很簡單的示例,使用requirejs動態加載jquery。使用到了以下知識點

1、data-main屬性

2、require.config方法

3、require函數

 

感興趣的請繼續閱讀 下一篇 。

 

r1.zip


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM