HTML移動開發(一) -- RequireJS使用簡略說明
1、在web開發中，我們引入js檔案最常見的寫法是：
<script type="text/javascript" src="js/file1.js"></script>
<script type="text/javascript" src="js/file2.js"></script>
<script type="text/javascript" src="js/file3.js"></script>
<script type="text/javascript" src="js/file4.js"></script>
<script type="text/javascript" src="js/file5.js"></script>
首先，這樣的寫法會增加http的請求數，影響其網頁載入的速度。其次，如果這個這個js檔案是相互依賴的話，那麼載入的順序是不能顛倒的，因為瀏覽器解析html是自上而下的解析。require.js的出現可以使得js檔案非同步載入，大大提升了網頁渲染的速度，更便於管理模組之間的依賴和管理，便於程式碼的編寫與維護。
2、如何通過require.js去載入檔案？
a、首先我們先建立一個主檔案index.js,通過require.js去載入這個檔案。在這個index.js檔案中，我們可以去載入其他的js檔案。
在html頁面中的引入index.js檔案：寫法如下
<script type="text/javascript" data-main="index.js" src="js/require.js">
b、在主模組中，我們可以新增其他的模組：
index.js的程式碼如下：
require.config({
baseUrl: './',
//這裡的路徑是基於index.js檔案路徑
paths: { //定義載入模組的路徑
text: 'js/text',
//我這裡引入的是requireJS的中的文字外掛
zepto: 'js/zepto',
//輕量級仿JQ類庫，適合在移動web中使用
underscore: 'js/underscore', //Backbone強烈依賴的類庫
backbone: 'js/backbone',
//BackBone
},
//config物件除了path屬性之外還有一個shim屬性，專門用來引入非規範的模組
shim: {
//以下是引入非規範化JS檔案(模組)的寫法
backbone: {
deps: ['underscore'], //這裡是陣列的形式，說明backbone依賴的是哪些模組
exports: 'Backbone'
//一個變數名，說明在被別的模組呼叫是縮被使用的變數名稱。
},
zepto: {
exports: '$'
},
underscore: {
exports: '_'
},
}
});
//通過上面配置的路徑配置和非規範化的配置之後，下面我們可以通過require的方法引入這些模組。
require(['zepto', 'underscore', 'backbone','text'],
function($, _, Backbone,Text) {
console.info("==============");
var el = $(".content");
console.info(el);
});
說明：require(arr,fn,[fnFail])方法接收兩個或三個引數，第一個引數是一個數組，表明這個index.js檔案(主模組)依賴哪些模組，這裡的是陣列可以是上面配置中path物件中的key值，也可以是一個包含有路徑的檔案，如："other/js/i18n" 。第二個引數是一個回撥函式，這個回撥函式會在所有的模組都被載入完之後呼叫，這個回撥函式的引數對應你引用模組的變數，供模組被呼叫的時候引用。第三個引數也是一個回撥函式，當載入模組失敗的時候呼叫的函式。
如上例：我在頁面中定義了一個<div class="content"></div> ，在上面的回撥函式裡可以通過已經引入的zepto模組去獲取該div。
綜合所述，我們可以在回撥函式裡面做一些相應的操作了。