RequireJS多页面应用实例分析


Posted in Javascript onJune 29, 2016

本文是requireJS的一些知识点的总结,配上多页面应用中的实例分析。

本案例的目录结构如下:

requireJS API的三个主要函数:define(创建模块),require(加载模块),config(配置)

1、 HTML文件中加载JS文件

page1.html内容如下:

<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script data-main="scripts/page1" src="scripts/lib/require.js"></script>
</head>
<body>
<a href="page2.html">Go to Page 2</a>
</body>
</html>

page2.html内容如下:

<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<script data-main="scripts/page2" src="scripts/lib/require.js"></script>
</head>
<body>
<a href="page1.html">Go to Page 1</a>
</body>
</html>

知识扩展:

data-main属性指定网页程序的主模块,这个文件被requireJS首先加载。由于requireJS默认的文件后缀名是js,所以可以把page1.js简写成page1

加载脚本文件的根路径优先规则

用require()加载模块时,省略.js后缀,会从baseUrl下查找;如果带有.js后缀、或以”/"开始、或包含URL协议(http/https)则将根

据你的具体路径设置去查找

config > data-main > 默认baseUrl

不对data-main和config进行设置,则默认baseUrl为引用require.js的那个HTML页面所在目录

设置data-main,则baseUrl为主模块所在目录(如第一段HTML中的主模块为page1.js,因此以其所在目录/scripts为根目录)

配置config,显式设置baseUrl,也可为每一个模块单独设置路径

2、对模块的路径等进行配置

使用require.config()方法,可以对模块的加载行为进行自定义。在多页面应用中,可以将配置写在共用的文件中,如本例中的common.js文件,然后各个页面加载当前配置后,在回调函数中再加载各自需要的模块。

common.js代码如下:

require.config({
baseUrl: 'scripts/app',
paths: {
jquery: [
'http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min',
'../lib/jquery'
]
}
});

知识扩展:

支持的配置项:

baseUrl :

所有模块的查找根路径。注意:当加载的js文件(以.js结尾、以”/”开头、含有协议),不会使用baseUrl;

paths :

path映射那些不直接放置于baseUrl下的模块名。设置path时起始位置是相对于baseUrl的,除非该path设置以"/"开头或含有URL协议;

注意:在paths中定义的路径不能含有.js后缀,因为路径解析机制会自动添加上.js后缀;而且加载路径可以设置多个,如从CDN加载失败,则加载本地js文件;

shim:

为那些没有使用define()来声明依赖关系的模块进行配置;

其中需要注意两个参数:

(1)exports值(输出的变量名),暴露方法接口

(2)deps数组,表明该模块的依赖性

如:

require.config({
baseUrl: '/scripts/lib',
shim:{
zepto: {
exports: '$'
},
backbone: {
deps: ['underscore', 'zepto'],
exports: 'Backbone'
},
'zepto.animate': ['zepto']
}
});

3、模块的加载

page1.js代码如下:

require(['./common'], function (common) {
require(['sayPage1'], function (sayPage1) {
sayPage1.hello();
});
});

page2.js代码如下:

require(['./common'], function (common) {
require(['sayPage2'], function (sayPage2) {
sayPage2.hello();
});
});

知识拓展: 

 require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它才会被调用。加载的模块可以作为回调函数的参数进行调用。

这里为了保证配置完成后才加载需要的模块,主要是为了路径的正确解析,在回调函数中再进行require。

4、模块的定义

sayPage1.js中的代码:

define(['jquery'], function($) {
function sayHi(){
$('body').append('<h1>Hello page1!</h1>');
}
return {
hello: sayHi
}
});

知识扩展:

define函数也接受两个参数。第一个参数为所依赖模块组成的数组,第二个参数是一个回调函数。

当然最后上线的时候还要进行JS文件的合并与压缩,可以利用r.js,方便快捷~

以上所述是小编给大家介绍的RequireJS多页面应用实例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
统计jQuery中各字符串出现次数的工具
May 03 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
全面了解JS中的匿名函数
Jun 29 #Javascript
大型JavaScript应用程序架构设计模式
Jun 29 #Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 #Javascript
JavaScript中闭包的写法和作用详解
Jun 29 #Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 #Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 #Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 #Javascript
You might like
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP循环结构实例讲解
2014/02/10 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
javascript回到顶部特效
2016/07/30 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
vue如何判断dom的class
2018/04/26 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
大四毕业生自荐书
2014/07/05 职场文书
公务员培的训心得体会
2014/09/01 职场文书
出差报告范文
2014/11/06 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
作文之亲情600字
2019/09/23 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript