javascript
RequireJS入门（一） 转
RequireJS由James Burke創(chuàng)建，他也是AMD規(guī)范的創(chuàng)始人。
?
RequireJS會(huì)讓你以不同于往常的方式去寫JavaScript。你將不再使用script標(biāo)簽在HTML中引入JS文件，以及不用通過script標(biāo)簽順序去管理依賴關(guān)系。
?
當(dāng)然也不會(huì)有阻塞（blocking）的情況發(fā)生。好，以一個(gè)簡(jiǎn)單示例開始。
?
新建一個(gè)目錄，結(jié)構(gòu)如下
?
目錄r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官網(wǎng)下載即可。
?
index.html如下
| 1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <html> ????<head> ????????<title>requirejs入門（一）</title> ????????<meta charset="utf-8"> ????????<script data-main="main"?src="require.js"></script> ????</head> ????<body> ????? ????</body> </html> |
使用requirejs很簡(jiǎn)單，只需要在head中通過script標(biāo)簽引入它（實(shí)際上除了require.js，其它文件模塊都不再使用script標(biāo)簽引入）。
細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)script標(biāo)簽上了多了一個(gè)自定義屬性：data-main="main"，等號(hào)右邊的main指的main.js。當(dāng)然可以使用任意的名稱。這個(gè)main指主模塊或入口模塊，好比c或java的主函數(shù)main。
?
main.js如下
| 1 2 3 4 5 6 7 8 9 | require.config({ ????paths: { ????????jquery:?'jquery-1.7.2' ????} }); require(['jquery'],?function($) { ????alert($().jquery); }); |
?
main.js中就兩個(gè)函數(shù)調(diào)用require.config和require。
?
require.config用來配置一些參數(shù)，它將影響到requirejs庫的一些行為。
require.config的參數(shù)是一個(gè)JS對(duì)象，常用的配置有baseUrl，paths等。
?
這里配置了paths參數(shù)，使用模塊名“jquery”，其實(shí)際文件路徑j(luò)query-1.7.2.js（后綴.js可以省略）。
?
我們知道jQuery從1.7后開始支持AMD規(guī)范，即如果jQuery作為一個(gè)AMD模塊運(yùn)行時(shí)，它的模塊名是“jquery”。注意“jquery”是固定的，不能寫“jQuery”或其它。
?
注：如果文件名“jquery-1.7.2.js”改為“jquery.js”就不必配置paths參數(shù)了。
?
jQuery中的支持AMD代碼如下
| 1 2 3 | if?(?typeof?define ===?"function"?&& define.amd && define.amd.jQuery ) { ????define(?"jquery", [],?function?() {?return?jQuery; } ); } |
?
我們知道jQuery最終向外暴露的是全局的jQuery和 $。如下
| 1 2 | // Expose jQuery to the global object window.jQuery = window.$ = jQuery; |
?
如果將jQuery應(yīng)用在模塊化開發(fā)時(shí)，其實(shí)可以不使用全局的，即可以不暴露出來。需要用到j(luò)Query時(shí)使用require函數(shù)即可，
?
這里require函數(shù)的第一個(gè)參數(shù)是數(shù)組，數(shù)組中存放的是模塊名（字符串類型），數(shù)組中的模塊與回調(diào)函數(shù)的參數(shù)一一對(duì)應(yīng)。這里的例子則只有一個(gè)模塊“jquery”。
?
把目錄r1放到apache或其它web服務(wù)器上，訪問index.html。
?
網(wǎng)絡(luò)請(qǐng)求如下
?
我們看到除了require.js外main.js和jquery-1.7.2.js也請(qǐng)求下來了。而它們正是通過requirejs請(qǐng)求的。
?
頁面上會(huì)彈出jQuery的版本
?
這是一個(gè)很簡(jiǎn)單的示例，使用requirejs動(dòng)態(tài)加載jquery。使用到了以下知識(shí)點(diǎn)
1、data-main屬性
2、require.config方法
3、require函數(shù)
?
感興趣的請(qǐng)繼續(xù)閱讀?下一篇?。
?
r1.zip
轉(zhuǎn)載于:https://www.cnblogs.com/wanliyuan/p/5039150.html
總結(jié)
以上是生活随笔為你收集整理的RequireJS入门（一） 转的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS 之 const
- 下一篇： Hyper-v Server动态内存