requireJS
requireJS的作用
使用
使用前,需要加载require.js 和配置app.js,引入格式如下:
<script src="require.js" data-main="app.js"></script>
app.js配置格式
require.config({ //require.config主要用于修改require的默认配置
baseUrl:'xxxx', //这里是js文件放在总目录,paths中可以省略
paths:{
foo: 'foo',
foo1: 'foo1' //前者是在js中用到名字,后者是要引入的模块名(已省略.js后缀)
}
});
require(['module1','module2','module3'],function(module1,module2,module3){
module1.foo();
module2.foo()...
});
在requirejs
的2.xx
版本中,对于不符合AMD规范的模块,即
function foo(){
}
function foo(){
}....
不需要使用`shim`或者`init`暴露模块,直接调用模块内的方法名如`foo()`,而不是`module.foo()`;
使用了`shim`后,可直接调用模块内的方法名`foo()`或者`modulename()`
`shim` `init`暴露模块
require.config({
baseUrl:'',
paths:{
},
shim:{
modulename:{exports: 'functionName'},
backbone:{
deps:['underscore'], //依赖underscore
exports:'backbone' //模块名字backbone
}
...
modulename:{
init: function(){
return {
foo1: functionName,
foo2: functionName
}
}
}
}
})
1.没用requirejs实现之前,不依赖其他js库实现模块化
define(function(){
...
})
一般js实现方法
var module = (function(){
...
_variable: xxx;
foo: function(){}
return {
foo: foo
}
}());
2.依赖其他js库(模块扩展)
define(['a'],function(a){
a.foo();
...
return {
...
}
});
一般js实现方法
var module1 = (function(module){
...
module.newfoo = function(){
//扩展module
}
return module1;
}(module));
似乎使用requirejs并不会产生其他的全局变量,传统使用命名空间法避免产生过多的全局变量的方法如下
var GLOBAL={}; //将所有的变量都挂在GLOBAL的这一全局变量上
GLOBAL.namespace = function(str){ //传入新建的变量str
var arr= str.split('.'),o=GLOBAL;
//str的形式如GLOBAL.a或a或a.b
for(i=(arr[0]==="GLOBAL")?1:0;i < arr.length;i++){
//如果首元素为GLOBAL,直接读取第二个,因为GLOBAL已存在,后续元素才是需要挂载到GLOBAL对象上
o[arr[i]]=o[arr[i]]||{};
//第一次o是GLOBAL对象,如果GLOBAL.arr[i]不存在,则新建对象,如果存在,则不改变
o=arr[arr[i]]
//此处是往第二第三...更后的对象递进,开辟空间
}
};
requireJS注意点
回调函数中最后都会返回一个对象{},其中以对象字面量的形式返回define中定义的函数和属性,让其他模块可以引用,而require函数不需要return语句