requireJs AMD规范
2015-08-05 15:00
399 查看
AMD模块的写法
定义模块
模块不同于传统的脚本文件,它良好地定义了一个作用域避免全局名称空间的污染。它可以显式地列出其依赖关系,并以函数参数的形式将这些依赖进行注入,而无需引用全局变量。RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其它模块。RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的。同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本。
require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
加载方法如下:
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。
requirejs.config({
shim: {
'backbone': {
//下述依赖脚本应在backbone.js之前加载
deps:['underscore', 'jquery'],
//一旦加载,使用全局变量'Backbone'作为模块值
exports:'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
//使用该函数允许你调用库所支持的noConflict方法,或其他的清理工作。
//但是这些库的一些插件们可能依然需要一个全局引用,函数中的"this"提供这个全局引用。
//依赖会以函数参数的形式被注入。
//如果本函数具备返回值, 则该值会被用做模块的export值,而不是使用上述'exports'中的字串。
return this.Foo.noConflict();
}
}
}
});
定义模块
模块不同于传统的脚本文件,它良好地定义了一个作用域避免全局名称空间的污染。它可以显式地列出其依赖关系,并以函数参数的形式将这些依赖进行注入,而无需引用全局变量。RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其它模块。RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的。同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本。
require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
加载方法如下:
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。
requirejs.config({
shim: {
'backbone': {
//下述依赖脚本应在backbone.js之前加载
deps:['underscore', 'jquery'],
//一旦加载,使用全局变量'Backbone'作为模块值
exports:'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
//使用该函数允许你调用库所支持的noConflict方法,或其他的清理工作。
//但是这些库的一些插件们可能依然需要一个全局引用,函数中的"this"提供这个全局引用。
//依赖会以函数参数的形式被注入。
//如果本函数具备返回值, 则该值会被用做模块的export值,而不是使用上述'exports'中的字串。
return this.Foo.noConflict();
}
}
}
});
相关文章推荐
- IOS中的UINavigationController(导航控制器)
- IOS UITableView删除功能
- 为UIView任意角设置圆角
- POJ 2533 Longest Ordered Subsequence
- UITableView中关于cell里的按钮被点击时如何确定是哪一个cell
- Marquee Effect
- Intel Threading BuildingBlocks(Intel TBB)介绍
- UIView和layer的关系
- OS开发UI篇—xib的简单使用
- 获取UINavgationController的退出事件
- IOS第七天(6:UiTableView编辑模式, 拖动位置 ,滑动删除)
- 类QQ,微信,联系人列表搜索UISearchBar使用
- IOS第七天(5:UiTableView 汽车品牌,复杂模型分组展示,A-Z索要列表) (2015-08-05 14:03)
- IOS第七天(4:UiTableView 数据的显示优化重复实例和tableFooterView和tableHeaderView)
- queue
- UITableView选中时颜色
- 【UILabel和UIButton】
- duilib各种布局的作用,相对布局与绝对布局的的意义与用法
- UISlider小结
- uva 11538 Chess Queen