帝王谷资源网

RequireJS多页面应用实例分析
网络编程 2024/11/1 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

本文是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="/UploadFiles/2021-04-02/require.js">


page2.html内容如下：





<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<script data-main="scripts/page2" src="/UploadFiles/2021-04-02/require.js">


知识扩展：


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多页面应用实例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
标签：
requirejs应用实例,requirejs多页面
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接