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代码
Mar 05 Javascript
js变量以及其作用域详解
Jul 18 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
jstree的简单实例
2016/12/01 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
几个Shell Script面试题
2014/04/18 面试题
2014年学校团委工作总结
2014/12/20 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
详解JVM系列之内存模型
2021/06/10 Javascript
python双向链表实例详解
2022/05/25 Python