|
在看一些高手的demo中，都使用了requireJS進行模塊化。下面介紹一下requireJS的使用
RequireJS是一個非常小巧的JavaScript模塊載入框架，是AMD規(guī)范最好的實現(xiàn)者之一。最新版本的RequireJS壓縮后只有14K，堪稱非常輕量。它還同時可以和其他的框架協(xié)同工作，使用RequireJS必將使您的前端代碼質(zhì)量得以提升。
一般情況下，我們加載js都是直接寫在頁面body里面，這樣會造成頁面阻塞，使用require不僅能解決這個問題，還能為大規(guī)模web開發(fā)提供規(guī)范，版本管理等。
例如一個經(jīng)典的加載js是這樣：
|
|
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> </head> <body> <span>body</span> </body> </html> |
而使用了require之后，頁面變成了：
|
|
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["a","b","c","d"]); </script> </head> <body> <span>body</span> </body> </html> |
當然，我們可以使用 data-main把邏輯放到main.js文件里面
|
|
<script data-main="js/main.js" type="text/javascript" src="libs/require.js" ></script> |
是不是很簡單呢？
那require怎么用呢？下面先了解一下require的基本api:
require會定義三個變量：
define,require,requirejs，其中require === requirejs，一般使用require更簡短
define 用來定義一個模塊
require 加載依賴模塊，并執(zhí)行加載完后的回調(diào)函數(shù)
比較經(jīng)典的寫法是：
|
|
require(["module"],function(module){ module.function(); }) |
第一個參數(shù)是一個模塊數(shù)組，第二個參數(shù)是回調(diào)函數(shù)，通常回調(diào)函數(shù)會有模塊提供的接口，這樣就實現(xiàn)了依賴注入，減少了全局變量污染。注意參數(shù)注入的順序要與模塊數(shù)組順序一致，名字并不重要，順序一致代表把對象傳給這個變量。
這是require的基本寫法，那這些文件在哪找呢？
require提供了很智能的找法，如果index.html頁面加入了data-main標簽，則這個目錄將會成為基目錄，即baseUrl，如果沒有的話，index.html所在的目錄將成為基目錄，require默認的文件就是js文件，所以，我們在使用require的時候，可以連.js都不用寫，直接require([‘a(chǎn)’]); 相當于加載了a.js文件
如果文件不在這個相對路徑下，我們還可以通過配置來找文件，使用require.config()的path參數(shù);
|
|
require.config({ paths : { // 其他目錄下的文件 "a" : "../libs/zepto", // 絕對路徑 "b" : "/libs/handlebars", // 加載cdn文件 "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] } }) |
path映射那些不直接放置于baseUrl下的模塊名(這相當于跟冗長的模塊名取個簡介的名字)。設(shè)置path時起始位置是相對于baseUrl的，除非該path設(shè)置以”/”開頭或含有URL協(xié)議（如http:）.
另外，通過require加載的模塊一般都需要符合AMD規(guī)范即使用define來申明模塊，但是部分時候需要加載非AMD規(guī)范的js，例如一些舊的庫，或者jquery的插件庫等，這時候就需要用到另一個功能：shim
|
|
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : { deps : ["jquery"] } } }) |
這里jquery.form依賴于jquery，所以我們需要添加deps參數(shù)。還可以更簡單點，對作為jQuery或Backbone的插件存在而不導出任何模塊變量的”模塊”們， shim配置可簡單設(shè)置為依賴數(shù)組
|
|
requirejs.config({ shim: { 'jquery.colorize': ['jquery'], 'jquery.scroll': ['jquery'], 'backbone.layoutmanager': ['backbone'] } }); |
基本用法就這些，更深入的學習請參考requirejs官方文檔：http:///
中文版的可以再看一下這個：http://javascript./tool/requirejs.html
|
