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. Java 网络爬虫获取页面源代码

    原博文:http://www.cnblogs.com/xudong-bupt/archive/2013/03/20/2971893.html 1.网络爬虫是一个自动提取网页的程序,它为搜索引擎从万维网 ...

  2. Windows下搭建MySQL Master Slave

    一.背景 服务器上放了很多MySQL数据库,为了安全,现在需要做Master/Slave方案,因为操作系统是Window的,所以没有办法使用keepalived这个HA工具,但是我们可以接受人工进行切 ...

  3. Newtonsoft.json中 linq to json 和序列化哪个快?

    Newtonsoft.json是最常用的json序列化组件,当然他不是最快的,但是是功能最全的.. using System; using System.Collections.Generic; us ...

  4. AngularJS之Directive(三)

    前言 angular核心部分如下图几大块,最重要的莫过于指令这一部分,本文将重点讲解指令这一部分,后续笔者将通过陆续的学习来叙述其他如:factory.service等,若有叙述错误之处,欢迎各位指正 ...

  5. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  6. Java 8新特性-1 函数式接口

    Java 8 引入的一个核心概念是函数式接口(Functional Interfaces). 通过在接口里面添加一个抽象方法,这些方法可以直接从接口中运行. 如果一个接口定义个唯一一个抽象方法,那么这 ...

  7. 【记录】ASP.NET MVC RegisterBundles

    1. Install the package from nuget Install-Package Microsoft.AspNet.Web.Optimization 2,BundleConfig 配 ...

  8. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  9. ZOJ Problem Set - 1078 Palindrom Numbers

    属于水题,主要是涉及到回文问题. 这里标注下进制转换的方法: while(n) { p[i]=n%basis; n/=basis; } 见代码: #include <stdio.h> in ...

  10. C++入门知识总结(1)

    1.有符号数和无符号数. 这个问题其实是一个很细的问题,我们还要把问题追溯到“位”,针对不同的“位”,那么能表示的最大数的范围不同.因为计算机存储数据都是以二进制的方式去存储的,即0和1,比如 110 ...