1、概述
requirejs 的相关说明:
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS可以提升前端代码质量。
主要特点:
- 异步加载模块
- 按依赖顺序加载
- 模块依赖前置
2、define 和 require
在整个require中,主要的方法为:require和define
(1)define定义模块
函数方法:
define(id?, dependencies?, factory)
总共有三个参数:id 定义的模块名字,一般在config 中会定义;dependencies为需要的依赖模块;factory为定义的模块。其中factory 为必填,另外两个为非必填项。
根据上面的参数配置可以看出,define 总共分为两种,第一种为独立模块,不依赖其他模块。第二种为非独立模块,需要依赖其他模块。
注:define定义的模块可以返回任何值,不限于对象。
独立模块
一种通过一个对象简易定义:
define({
name: "aimee",
method1: function() {},
method2: function() {}
})
*注:这样定义的对象如果被多处引用,那么引用的地方会共享这个对象的引用。
另一种通过一个函数来定义副本对象模块:
define(function () {
//Do setup work here
return {
name: "aimee",
method1: function() {},
method2: function() {}
}
})
这种自由度更高,可以在函数中处理其他逻辑。
非独立模块
需要引入依赖模块,在其他模块加载完,定义自己的模块,此时返回的method方法中包含模块1 和模块2的函数的调用。
define(['module1', 'module2'], function(m1, m2) {
return {
method: function() {
m1.methodA();
m2.methodB();
}
}
})
当定义多个时,可以通过function 函数里接受一个require默认参数来处理。
define(
[ 'dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],
function(dep1, dep2, dep3, dep4, dep5, dep6, dep7, dep8){
...
}
);
可以这样写
define(
function (require) {
var dep1 = require('dep1'),
dep2 = require('dep2'),
dep3 = require('dep3'),
dep4 = require('dep4'),
dep5 = require('dep5'),
dep6 = require('dep6'),
dep7 = require('dep7'),
dep8 = require('dep8');
...
}
})
(2)require 调用模块
通过define定义模块后,可以使用require来调用模块。
require(dependencies?, factory, errorCallback)
require的参数有:dependencies 为依赖模块,非必填;factory 处理函数,必填;errorCallback 为 错误的回调,非必填;
require(
['foo', 'bar'],
function ( foo, bar ) {
foo.doSomething();
bar.doSomething();
},
function(err){
console.log(err)
}
);
上述例子,在foo 和 bar 模块加载完成后,再在函数中执行foo 和 bar 的方法,如果有错误则到错误的回调函数中,并接受一个error对象作为参数。
全局error事件监听,所有没有被上面的方法捕获的错误,都会被触发这个监听函数。
requirejs.onError = function (err) {
// ...
};
define中require异步加载
例子中,define定义了一个模块,其中foobar 需要依赖 foo 和bar 模块的方法,由于require 为异步,此时return 的结果可以通过isReady 来判断是否加载完成。
define(function ( require ) {
var isReady = false, foobar;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
foobar = foo() + bar();
});
return {
isReady: isReady,
foobar: foobar
};
});
可以用过promise 来实现
define(function ( require ) {
var obj;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
obj.resolve({foobar:foo() + bar()});
});
return obj.promise()
});
上面代码返回一个promise对象,可以在该对象的then方法,指定下一步的动作。
小结
require 和 define 函数内部机制差不多,不一样的地方是 define 的回调函数需要有 return 语句返回模块对象,这样 define 定义的模块才能被其他模块引用;require 的回调函数不需要 return 语句。
3、requirejs config 配置
paths:
可以配置模块的引用路径,可以本地相对路径,也可以是外部路径,可以提供多个路径,当第一个失败时,会使用第二个路径。
简单配置如下
require.config({
paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
}
});
baseUrl:
baseUrl 指定了一个目录,然后requirejs基于这个目录来寻找依赖的模块。
可以通过config 来配置,也可以通过引入requirejs 文件的data-main属性定义。
shim:
用于配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。
或者
requirejs.config({
baseUrl: 'js'
});
4、插件
requirejs 提供多种插件,具体插件详情可以查看文档 插件类型
define([
'backbone',
'text!templates.html'
], function( Backbone, template ){
// ...
});
以上为text 插件,通过在模块名前添加text!来指定插件类型,在回调函数中能够通过template来获取模板的内容,格式为字符串。
5、优化器r.js
requireJS提供一个基于node.js的命令行工具r.js,用来压缩多个js文件。它的主要作用是将多个模块文件压缩合并成一个脚本文件,以减少网页的HTTP请求数。
具体实现可以参考官方文档
参考:
官方文档api: requirejs.org
官方文档git:requirejs-git