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'):
});