1.背景:
requirejs是用来管理前端开发中的模块依赖的一个轻量级的js库,使用requirejs管理依赖可以减轻业务耦合,避免污染全局作用域,利于项目的维护。比较适合单页应用的项目,因为单页应用的业务逻辑较多。
2.使用:
requirejs基本用法比较简单。包括四个方面:引入主模块(入口)、引入模块、定义模块、路径配置。下面分别进行说明。
1) 引入主模块(入口)
requirejs的使用需要一个入口模块,即一个主模块,引入主模块方法是通过在页面(.html)中引入require.js的script标签里,给自定义属性“data-main”的赋值实现的,另一种方法是在页面中直接用requirejs提供的API:require引入入口。
// 第一种方法
<script type="text/javascript" src="./dep/r.js" data-main="main"></script>
// 主模块
require(['a', 'b', 'c'], function(a, b, c) {
// do something
});
// 第二种方法 在当前页面引入主模块
<script type="text/javascript">
require(['main'], function(main) {
// do something
});
</script>
2) 引入模块
引入模块要利用requirejs提供的API require
// 引入的依赖模块和回调中的参数一一对应
require(['a', 'b', 'c'], function(a, b, c) {
// do something
});
3) 定义模块
定义模块用到requirejs中提供的API define,定义模块有三种写法,
// 第一种写法,接受两个参数,第一个是依赖的模块列表,第二个是回调,返回该模块,这种写法会先加载依赖模块然后执行回调,保证正确的执行顺序
define(['a', 'b', 'c'], function(a, b, c) {
// do something
// return something
});
// 第二种写法,参数时一个回调,可以在里面写依赖,这种写法会先用正则分析出依赖链,然后按顺序加载执行
define(function(require, exports) {
var a = require('./a');
var b = require('./b');
var c = require('./c');
// do something
// return something
});
// 第三种写法,当依赖模块较多时,可以使用第二和第三种写法,否则会比较乱
define(['require', 'dep1', 'dep2', 'dep3', 'dep4', 'dep5'], function (require) {
var dep1 = require('dep1');
var dep2 = require('dep2');
});
注意,下面这种写法是错误的
define([require], function (require) {
var a = require('./a');
})
错误的原因是,如果define接受依赖列表作为参数,则requirejs会认为所有依赖都在列表里了,不会再用正则分析回调中的依赖了。
详细说明参见博客
4) 路径配置
路径配置需要用到requirejs提供的API require.config 。目前我只用到了baseUrl和paths这两个字段。
require.config({
baseUrl: 'calculator',
paths: {
i: 'Indicator',
k: 'key'
}
});
baseUrl指定基目录,所有引用的绝对路径将都以此路径为根目录。paths配置了一些路径的简称,其中的绝对路径也是已baseUrl为基目录的。当然,在引入依赖模块时,也可以使用相对路径,相对当前文件去引入依赖的文件。
5) 其他API
还有一个比较有用的API require.toUrl,用于生成生产环境的url
3.说明:
requirejs使用ajax进行依赖管理,所以项目要开启服务器才可以进行本地调试,否则会报错 XMLHttpRequest cannot load file:///projects/project1/calculator1/calculator/calculator.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.