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 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
javascript学习之闭包分析
Dec 02 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
echarts实现晶体球面投影的实例教程
Oct 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
文件上传程序的全部源码
2006/10/09 PHP
谈谈PHP的输入输出流
2007/02/14 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
dataframe设置两个条件取值的实例
2018/04/12 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python绘制立方体的方法
2018/07/02 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
django 控制页面跳转的例子
2019/08/06 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
2015年六一儿童节活动方案
2015/05/05 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js