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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
jquery tab标签页的制作
May 10 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
理解JavaScript原型链
Oct 25 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
Vue实现导航栏的显示开关控制
Nov 01 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
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python创建xml的方法
2015/03/10 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
python开发之函数定义实例分析
2015/11/12 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python探索之创建二叉树
2017/10/25 Python
Python自定义线程类简单示例
2018/03/23 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
python palywright库基本使用
2021/01/21 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
请说出以下代码输出什么
2013/08/30 面试题
初中音乐教学反思
2014/01/12 职场文书
文化宣传方案
2014/03/13 职场文书
探亲假请假条
2014/04/11 职场文书
品德评语大全
2014/05/05 职场文书
司法局火灾防控方案
2014/06/05 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书