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

RequireJS+JQueryMobile的更多相关文章

  1. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  2. 实现一个类 RequireJS 的模块加载器 (二)

    2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...

  3. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  4. 使用gulp解决RequireJS项目前端缓存问题(二)

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

  5. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  6. angularjs集成requirejs

    其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...

  7. html5+jqueryMobile编写App推广注册页

    html5+jqueryMobile的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jquer ...

  8. [deviceone开发]-do_Webview加载JQueryMobile的示例

    一.简介 JQueryMobile是JQuery的移动版,不过它并没有像JQuery那么成功.我们只是使用JQueryMobile来展示do_Webview加载第三方js框架.适合所有开发者.二.效果 ...

  9. 使用gulp解决RequireJS项目前端缓存问题(一)

    1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...

随机推荐

  1. 编译异常 Caused by: java.lang.UnsupportedClassVersionError:

    Caused by: java.lang.UnsupportedClassVersionError: com/sumingk/platform/service/impl/ServiceSysPerso ...

  2. webservice返回值为Map类型的处理方法

    在写一个webservice的时候,方法的返回值是一个复杂类型,处理方法是写一个结果类(Javabean)作为返回值.想着webservice方法返回值为Map的没写过,然后就试着写了一个简单的Dem ...

  3. SSISDB2:使用TSQL执行Package

    在SSISDB中,能够使用TSQL脚本执行Package:每执行一次Package,SSIS都会创建一个Operation 和一个执行实例(Execution Instance),每个Executio ...

  4. Create views of OpenCASCADE objects in the Debugger

    Create views of OpenCASCADE objects in the Debugger eryar@163.com Abstract. The Visual Studio Natvis ...

  5. Android自定义View 画弧形,文字,并增加动画效果

    一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   B ...

  6. Mac如何删除MySQL,Mac下MySQL卸载方法

    在Mac下安装完MySQL之后,出现了无法启动的问题,多翻尝试依然不能解决问题,最后只能把它删掉. 如何在Mac下删除MySQL呢,只需要在终端执行如下命令就可以把MySQL在Mac下彻底删除干净了. ...

  7. 设计数据库字段或者java中使用boolean型时需谨慎

    boolean型变量只有两个值 false和true,我们在设计数据库字段时或者定义java变量时会使用boolean,通常情况下开关类的变量使用无可非议,但请一定要考虑到扩展性. 使用前请仔细考虑一 ...

  8. C语言 第六章 多重循环

    一.概要 在c语言中,if,switch,for,while,do-while可以相互间多次嵌套. if(){ for() { for() { } } } while() { for(){ } for ...

  9. Hibernate之HQL添加过滤器查询的用法

    HQL查询过程中支持添加过滤器.使用步骤是这样的: 首先在要查询的实体对象的映射中使用<filter-def>标签配置过滤器,并在相对应的<class>标签中添加对应的< ...

  10. hibernate笔记--基于外键的单(双)向的一对一映射关系

    假设我们有两张表,人员信息表Person,和身份信息表IdCard,我们知道每个人只有一个身份证号,所以这里的Person和IdCard表是一一对应的,也就是一对一的映射关系,基于外键的单向一对一映射 ...