RequireJS+JQueryMobile

RequireJS提供了JS下模塊化開發的充分條件。之前我自己也在多個項目中嘗試模塊化開發，但是由於沒有類似RequireJS這樣的框架，最后的效果都不是很理想。

在RequireJS中，所有的JS都是模塊，這就意味着即便我們要以JQuery Mobile作為應用的基礎框架，也必須先加載RequireJS，然后再將JQuery Mobile作為一個模塊來加載使用。因此，在應用了JQuery Mobile的應用中，我們在index.html中，通常只會看見一個js引用。

<script data-main="js/app" src="js/require.js"></script>

在進入JQuery Mobile的討論之前，先了解一下RequireJs。
RequireJS主要包含以下3個要素：
require.config
define
require

 

require.config

require.config 的例子代碼如下：

require.config({
    baseUrl: 'js',
    paths: {
        jq: 'jquery-1.10.2.min' ,
        jqm: 'jquery.mobile-1.3.2.min'
    },
    shim: {
        jq: { exports: 'jQuery' },
        jqm: { deps: [ 'jq' ] }
    }
});

baseUrl: 用於指定基准路徑。后面的模塊名稱要根據該基准路徑進行查找
paths: 指定模塊的名稱以及它的地址，注意，不要包含js擴展名
shim:用於指定模塊加載的依賴關系，這里只能設置不是通過define定義的模塊的依賴關系。例如，jqm依賴於jq。

對於jquery，必須將$導出，否則通過define來定義模塊時，將無法識別$。

define

define的例子代碼如下：

; define(
    [ 'jq'],
    function ($) {
        $( "<b>hello</b>" ).appendTo( "#content");
    }
    );

推薦一個文件對應一個模塊，文件名即模塊名。因此，在上面的代碼中，我們沒有為其指定模塊名。
在定義模塊時，該模塊可能會依賴於其它模塊，通過數組來指定依賴的模塊，如['jq']，該模塊依賴了jquery。

這里定義的所謂“模塊”，它可以有返回值，也可以沒有。例如，我們將jquery的widget定義成模塊時，就沒有返回值。因為widget的定義過程實際上就是將對象寫入到$.mobile.widget中。如果有返回值，那么在require的回調函數中，通過參數獲取。

 

模塊的名稱中可以包含路徑，但都是以require.config中的baseUrl來進行查找。模塊的名稱可以是直接require.config->paths中指定的模塊名稱。

require

require的例子代碼如下：

require([ 'content1']);

通過require來加載模塊，可以同時加載多個模塊。如果加載的模塊有返回值，可以通過回調函數的參數來獲取這些返回值。

require(['content1'], function(content){});

require()加載模塊的方式是異步的，所以，通常將模塊加載成功后的代碼寫在require的回調函數中。

Jquery Mobile和RequireJs

當jquery mobile和requirejs結合使用時，需要注意以下問題
1. jquery mobile widget開發
2. 頁面加載問題

將widget定義為模塊

;define(['jq', 'jqm'], function($){
//正常的jquery mobile widget定義代碼
});

使用loadpage來加載頁面，而不是直接在index.html中硬編碼頁面元素，通常在app.js中加載第一個頁面

require(['jq','jqm','content1'], function($){
    //content1是content.html中包含的一個widget
    $.mobile.changePage('content.html'):
});