一、加载underscore、backbone
理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。,require.js是否能够加载非规范的模块呢?回答是可以的。这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。举例来说,underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。shim属性,专门用来配置不兼容的模块。
代码语言:javascript复制require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
二、加载自定义模块
代码语言:javascript复制/* main.js */
define(["myCustomMod"], function(myCustomMod) {
console.log(myCustomMod.max(1, 2, 3));
})
代码语言:javascript复制/* myCustomMod.js */
var myCustomMod = {}; // 很重要,和shim中exports值必须一致
myCustomMod.add = function(num1, num2) {
return num1 num2;
};
myCustomMod.max = function() {
return Math.max.apply(Math, [].slice.call(arguments));
}
注意:require.config配置shim中exports的值,一定要与相关文件中暴露出全局变量名称一致。如果暴露出多个全局变量,那么exports可以指定其中任何一个,作为模块的返回结果。建议只使用一个全局变量,已减少冲突的可能性。
代码语言:javascript复制/* require.config.js */
require.config({
waitSeconds: 0,
baseUrl: '/',
paths: {
myCustomMod: "myCustomMod"
},
shim: {
"myCustomMod": {
deps: [],
exports: "myCustomMod"
}
}
})
代码语言:javascript复制/* text.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Require Shim</title>
<script data-main="main" src="require.js"></script>
<script src="require.config.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<p>控制台中会打出结果</p>
</body>
</html>
注意,在本地运行需要一个静态服务器(下述为简单的Node静态服务器)
代码语言:javascript复制/* node-static-server.js */
var http = require("http");
var express = require("express");
var serveStatic = require('serve-static');
var app = new express();
app.use(serveStatic(__dirname '/'));
app.get("/", function(req, res) {
res.sendFile(__dirname "/test.html");
})
app.listen(1337, "localhost");