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