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 相关文章推荐
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
vue登录以及权限验证相关的实现
Oct 25 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
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php基本函数汇总
2015/07/09 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python去除字符串两端空格的方法
2015/05/21 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
3分钟学会一个Python小技巧
2018/11/23 Python
如何在Django项目中引入静态文件
2019/07/26 Python
python框架flask表单实现详解
2019/11/04 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
电气工程自动化求职信
2014/03/14 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
计算机专业自荐信
2014/05/24 职场文书
励志演讲稿300字
2014/08/21 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang