开始记录...
1,我们的目录结构大概是这样:
Paste_Image.png
2,index.html
文件内容,加载require库文件,看到data-main没有,那个就是我们整个JS逻辑的开始编写地方,data-main后面的值一般都是省略.js后缀,可以也写成main.js。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>requireJS使用说明书</title>
<script data-main="main" src="require.js"></script>
</head>
<body>
使用这个JS库,让模块之间加载和调用更加明确。
1,data-main为函数入口
2,define定义模块
3,通过return或者exports返回
4,require.config为配置选项
</body>
</html>
3,来瞅瞅main.js
里的内容,具体看注释,需要注意的是我们的返回值,思考一下为什么是对象。
//定义配置文件
requirejs.config({
//查找所有模块的根路径
baseUrl: './js',
//设置相对路径,映射到不能直接在baseUrl下找到的模块名
paths:{
"jquery":"lib/jquery",
"jquery-private":"lib/jquery-private"
},
//为那些没有使用 define() 声明依赖项、没有设置模块值,暴露出全局变量
shim:{
},
// 对于给定的相同的模块名,加载不同的模块,而不是加载相同的模块。
map:{
'*': { 'jquery': 'jquery-private' },
'jquery-private': { 'jquery': 'jquery' }
}
});
//main文件为入口,也就是我们逻辑的开始地方
require(["a","b","c","d","e","f","jquery"], function(a,b,c,d,e,f,$) {
//a文件,返回一个对象
var Module_A = a;
console.log(Module_A.size);
//b文件,返回一个函数
var Module_B = b;
Module_B.sayB();
//c文件,依赖B文件,返回一个对象
var Module_C = c;
Module_C.sayC();
//d文件,引入其他的cmd规范文件,然后重新拼装我们需要的
var Module_D = d;
Module_D();
//e文件,引入require,然后调用其他模块
var Module_E = e;
console.log(Module_E.e);
//f文件,引入exports,不通过return返回
var Module_F = f;
console.log(Module_F.f.F);
//查看jQuery对象
console.dir($)
});
4,我们把这几a,b,c,d,e,f里的JS文件内容粘出来看看
//a.js,很显然返回了一个对象,键值对。
define({
color:"red",
size:12
});
//b.js,定义一个匿名函数(下面还有两个),这里随便返回一个对象
define(function () {
var B = "我是B中的一个字符串变量";
function sayB(){
console.log("我是B模块中的sayB方法");
}
return {
B:B,
sayB:sayB
}
});
//c.js,引入b文件依赖,然后随便返回一个对象
define(["b"],function(b){
var B = b;
var C = "我是C的字符串变量";
return {
C:C,
sayC:B.sayB
}
});
//d.js,具体看匿名函数中的参数,把其他模块弄进来在重新拼装
define(function(require,exports,module){
var a = require("a");
var b = require("b");
return function(){
console.log(b.B);
};
});
//e.js,引入require,再调用其他define的模块
define(function(require){
var a = require("a");
return {
e:a.color
}
});
//f.js,引入exprots模块,这样我们可以不用return进行返回了
define(['exports'],function(exports){
exports.f = {F:"我是F的字符串"};
});
5,对于那些不冲突(重名,不依赖)的库,可以通过paths(配置选项里)直接定义,左边名字:右边路径
6,对于依赖的需要在shim里进行重新暴露,eg:
shim: {
'backbone': {
//deps需要加载的依赖项的数组
deps: ['underscore', 'jquery'],
//导出名称
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
return this.Foo.noConflict();
}
}
}
});