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 相关文章推荐
js arguments对象应用介绍
Nov 28 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
全面了解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
PHP禁止页面缓存的代码
2011/10/23 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
php session的应用详细介绍
2017/03/22 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
javawscript 三级菜单的实现原理
2009/07/01 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
我为党旗添光彩演讲稿
2014/09/10 职场文书
小学信息技术教学反思
2016/02/16 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
vue实现滑动解锁功能
2022/03/03 Vue.js