一、RequireJS概述
RequireJS是一个工具库,主要用于客户端的模块管理。实现异步或动态加载,从而提高代码的性能和可维护性。
RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。
1.1define方法:定义模块
define方法用于定义模块,RequireJS要求每个模块放在一个单独的文件里。
按照是否是依赖其他模块,可以分成两种情况讨论。第一种情况是定义独立模块,即所定义的模块不依赖其他模块;第二种是定义非独立模块,即所定义的模块依赖于其他模块。
1)独立模块
如果被定义的模块是一个独立模块,不需要依赖任何其他模块,可以直接用define方法生成。
define({
method1 : function(){},
method2 : function(){}
});
上面代码生成了一个拥有method1、method2两个方法的模块。
另一种等价的方法是,把对象写成一个函数,该函数的返回值就是输出的模块。
define(function(){
return {
method1:function() {},
method2:function() {}
};
})
后一种写法的自由度更高一点,可以在函数体内写一些模块初始化代码。
值得指出的是,define定义的模块可以返回任何值,不限于对象。
2)非独立模块
如果被定义的模块需要依赖其他模块,则define方法必须采用下面的格式。
define(['module1','module2'],function(m1,m2) { ..... });
define方法的第一个参数是一个数组,它的成员是当前模块所依赖的模块。define方法的第二个参数是一个函数,当前面数组的所有成员加载成功后,它将被调用。它的参数与数组的成员一一对应。
1.2require方法:调用模块
require方法用于调用模块,它的参数与define方法类似。
require(['foo','bar'],function( foo, bar){ foo.doSomething();
});
2.配置require.js: config方法
require方法本身也是一个对象,它带有一个config方法,用来配置require.js运行参数。config方法接受一个对象作为参数。
require.config({
paths: {
jquery: [
'lib/jquery'
]
}
});
config方法的参数对象有以下主要成员:
1)paths
paths参数指定各个模块的位置。这个位置可以是同一个服务器上的相对位置,也可以是外部网址。可以为每个模块定义多个位置,如果第一个加载失败,则加载第二位置。指定本地文件路径时,可以省略文件最后的js后缀名。
2)baseUrl
baseUrl参数指定本地模块位置的基准目录,即本地模块的路径是相对于哪个目录的。该属性通常由require.js加载时的data-main属性指定。
3)shim
有些库不是AMD兼容的,这个时候就需要指定shim属性的值。shim可以理解成“垫片”,用来帮助require.js加载非AMD规范的库。
require.config({
paths:{
"underscore":"vender/underscore"
},
shim: {
"underscore":{
exports:"_"
}
}
});
3.插件
requireJS允许使用插件,加载各种格式的数据。
4.优化器 r.js
RequireJS提供一个基于node.js命令行工具r.js,用来压缩多个js文件。它的主要作用是将多个模块文件压缩合并成一个脚本文件,以减少网页的HTTP请求数。
以上为RequireJS大概理解,后期会更详细讲解requireJS在magento中的应用。
Castle