RequireJS以及AMD规范入门实践
首先申明,在下也只是刚开始了解这东西,所以说的不对不全的地方,随时欢迎各位拍砖指导·
AMD规范:
amd规范具体说明可以参见各种文档,这里不细说了,大概就是说模块用define定义,并返回一个类似句柄的什么鬼。下面列一下怎么用吧:
define('name', ['module1', 'module2'], function(m1, m2){
var abc = function(param){
console.log(param);
// TODO
};
return {
sout:abc
}
});
这样一个模块就定义好了,下面对这个定义做几点说明:
- 注意,最好是文件名和模块的唯一标识一样,不然会出现一些让然蛋疼的问题。。。文件名是什么就不说了,模块唯一标识就是上面的
name
是一个字符串,写在define的第一个位置上。 - define的第二个参数是此模块依赖的模块,可以没有,也可以有多个, 这个是一个数组, 顺序跟后面回调函数的参数一一对应
- 第三部分是回调函数, 这个模块不会阻塞,因为加载依赖模块需要时间,所有后面的回调函数会在依赖全部加载完才执行, m1对应module1, m2对应module2
- 里面就是正常js函数的写法了,不过不在return里写的话,外部是调用不了的,这也算是一个不错的封装吧。。。
RequireJS使用
还是一样,require.js文件大家可以去官网下载 http://www.requirejs.cn/ …………官网里还有一堆介绍,挺不错的
使用的时候通常会在前面先定义:
require.config({
baseUrl: '',
paths:{
'name': 'jsName'
},
shim:{
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
}
})
配置大概就是这么写,具体还有哪些属性,大家可以查询官网:
- baseUrl表示js的根目录,这个不用详说了吧.
- paths下面是一个对象,表示依赖的js以及别名,别名怎么写,你自己开心就好,不过鉴于规范,最好还是取得跟js本身的名字类似吧。。。
- shim是为那些并没有很好实现amd规范的js文件准备的,(AMD规范里定义了文件的依赖关系,详见define模块,但有些没有遵循这个规范,及没有定义依赖关系,所以我们这里需要手动定义依赖关系。)里面的deps是它所依赖的js文件,exports是输出的名字,具体来说,官网肯定比我说的好···
使用的时候:
require(['jquery', 'utils'], function($, util){
// TODO
})
这里是官方给的例子,挺好的,但是我一直纠结的问题是,他这么写是不是就不建议我们一个js文件里只有一个requeir()方法呢?比如我的业务逻辑比较复杂,那该怎么写呢?
后来就自己思考,并看了一下AMD和CMD规范,发现CMD是这么写的:
var a = require('jquery');
// TODO
var b = require('util');
// TODO
因为开始AMD规范是不支持异步加载的,那么这样就有问题了,就是文件还没下载下来的话,后面的代码是不会执行的,就是浏览器要等待,如果文件比较大,那么浏览器可能就有假死现象,所以AMD规范采用了这种方式来做异步。
那么这个方式只是做异步的而已哦···那么一个页面完全可以写多个require()了么,比如这样:
require(['jquery'], function($){
// TODO
require(['utils'], function(util){
// TODO
})
})
所以呢,requeir这个写法就是一句,当你需要依赖某个js插件的时候,用这种方式去加载而已。仅仅是按需加载。
各位有什么问题随时欢迎拍砖!