profile for Macon_Cao at Stack Overflow, Q&A for professional and enthusiast programmers
随笔-124  评论-193  文章-0 

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'):
});
posted on 2013-10-04 08:35 CQ-Coder 阅读(...) 评论(...) 编辑 收藏