requireJs的作用

  • 实现js文件的异步加载,避免一次性加载过多的js文件,网页失去响应
  • 管理模块之间的依赖性,便于代码的依赖和维护

使用

使用前,需要加载require.js 和配置app.js,引入格式如下:

1
<script src="require.js" data-main="app.js"></script>

app.js配置格式

1
2
3
4
5
6
7
require.config({     //require.config主要用于修改require的默认配置
baseUrl:'xxxx', //这里是js文件放在总目录,paths中可以省略
paths:{
foo: 'foo',
foo1: 'foo1' //前者是在js中用到名字,后者是要引入的模块名(已省略.js后缀)
}
});

1
2
3
4
require(['module1','module2','module3'],function(module1,module2,module3){
module1.foo();
module2.foo()...
});

在requirejs的2.xx版本中,对于不符合AMD规范的模块,即

1
2
3
4
5
6
function foo(){

}
function foo(){

}

不需要使用shim或者init暴露模块,直接调用模块内的方法名如foo(),而不是module.foo(); 使用了shim后,可直接调用模块内的方法名foo()或者modulename() shim init暴露模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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库实现模块化

1
2
3
define(function(){
...
})

2.依赖其他js库(模块扩展)

1
2
3
4
5
6
7
define(['a'],function(a){
a.foo();
...
return {
...
}
});

一般js实现方法

1
2
3
4
5
6
7
8
var module = (function(){
...
_variable: xxx;
foo: function(){}
return {
foo: foo
}
}());

似乎使用requirejs并不会产生其他的全局变量,传统使用命名空间法避免产生过多的全局变量的方法如下

1
2
3
4
5
6
7
8
9
10
11
12
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语句

插件

require-css

require.config中的map属性加入如下代码,表明通过css标识符来使用require-css插件。require-css

1
2
3
4
5
map : {
'*': {
'css': 'plugin/JS/require-css/css.min'
}
}

使用方法,表明依赖当前目录的home.tpl.css

1
define(['css!./home.tpl'], function(app) {})