开始记录...
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();
}
}
}
});
网友评论