湖南专业做网站公司排名,南通网站建设优化,企业网站提交,顺义手机网站设计使用RequireJS做异步模块加载#xff0c;有几点值得注意的地方#xff1a;
1.模块定义两种写法
1. 存在依赖的函数式定义
如果模块存在依赖#xff1a;则第一个参数是依赖的名称数组#xff1b;第二个参数是函数#xff0c;在模块的所有依赖加载完毕后#xff0c;该函…使用RequireJS做异步模块加载有几点值得注意的地方
1.模块定义两种写法
1. 存在依赖的函数式定义
如果模块存在依赖则第一个参数是依赖的名称数组第二个参数是函数在模块的所有依赖加载完毕后该函数会被调用来定义该模块因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上参数列表与依赖名称列表一一对应。 define([a], function(aJ) {
var hello function(){
aJ.hello(i am c.js);
}
return {
hello : hello
}
}); PS: 对模块的返回值类型并没有强制为一定是个object任何函数的返回值都是允许的。
2. CommonJS模块格式定义
require 用来引入依赖其他模块方法。
exports 导出模块变量或方法的对象。
module 包含该模块的信息。 require.config({
baseUrl: ,
config: {
b: {
size: large
}
},
paths: {
a : base/a,
b : base/b,
c : base/c
}
}); define(function(require, exports, module) {
var aJ require(a);
var hello function(){
aJ.hello(i am b.js);
}
var hello2 function(){
aJ.hello(i am b.js22);
}
exports.hello hello;
console.log(b.js : exports, exports);
console.log(b.js : module, module);
console.log(b.js : config, module.config());
//不能一起用return会覆盖调前面的exports
/*return {
hello : hello2
}*/
}); PSreturn 对象和exports不能一起用return会覆盖调前面的exports。
下面是调用后打印的信息 exports可以看出exports是module的一个属性。
module 里面包括了该模块的别名、uri、导出对象、config信息方法。
config 我们常常需要将配置信息传给一个模块。这些配置往往是application级别的信息需要一个手段将它们向下传递给模块。
在RequireJS中基于requirejs.config()的config配置项来实现。
2. 警惕单例变量
警惕单例里变量因为RequireJS在require一次后之后的require都是使用之前的缓存。所以当模块里面定义了一个变量后只要在此require改变后其他require也是保持一致的。 define(function() {
var index 0;
var hello function(msg){
console.log(msg);
}
var addIndex function(){
index ;
}
var getIndex function(){
return index;
}
return {
hello : hello,
addIndex : addIndex,
getIndex : getIndex
}
}); 调用 require([a,], function (A) {
require([a], function (A) {
console.log(A.getIndex());
A.addIndex();
A.addIndex();
});
require([a], function (A) {
console.log(A.getIndex());
});
}); 上面分别打印的是 0
2 这例子可以看出这几个require都是共用一个index变量。
3. 清除缓存
因为RequireJS有缓存的功能但是在开发的时候我们不希望它缓存就可以在require.config设置urlArgs。
urlArgsRequireJS获取资源时附加在URL后面的额外的query参数。
示例 urlArgs: bust (new Date()).getTime() 在开发中这很有用但记得在部署到生成环境之前移除它。
4. 从其他包中加载模块
RequireJS支持从CommonJS包结构中加载模块但需要一些额外的配置。
package config可为特定的包指定下述属性
1. name : 包名用于模块名/前缀映射。
2. location : 磁盘上的位置。位置是相对于配置中的baseUrl值除非它们包含协议或以“/”开头。
3. main : 当以“包名”发起require调用后所应用的一个包内的模块。 默认为“main”除非在此处做了另外设定。 该值是相对于包目录的。
例子 main.js require.config({
baseUrl: ,
packages: [{
name: student,
location: package-stu
},{
name: teacher,
location: package-tea
}],
urlArgs: bust (new Date()).getTime()
});
require([student/store, teacher/tea], function (Sto, Tea) {
Sto.hello();
Tea.hello();
}); tea.js define(function(require, exports, module) {
exports.hello function(){
console.log(i am a teacher.);
}
}); stu.js: define(function(require, exports, module) {
exports.name 海角;
}); store.js: define(function(require, exports, module) {
var stu require(student/stu);
exports.hello function(){
console.log(i am stu.name);
}
}); 这种从其他包加载模块的方式我感觉有两个怪异地方我不是很明白例子虽然调通
1. 其他包里面的模块引用其他模块的写法使用者反而影响模块的写法
2. 其他包里面的main.js好像没有用了没内容都没问题。
参考文献
1. RequireJS 中文网 本文为原创文章转载请保留原出处方便溯源如有错误地方谢谢指正。
本文地址 http://www.cnblogs.com/lovesong/p/5495177.html
更多专业前端知识请上
【猿2048】www.mk2048.com
相关文章：
