CMD基础知识

一. 在public目录下建立一个index.html文件,所有页面中的内容都在
这里面实现,index.html中需要导入的文件有:
1. CMD框架的sea.js文件
<script src="js/seajs_modules/sea.js"></script>
2. 自己创建的主配置seajs_config.js文件
<script src="js/seajs_config.js"></script>

3. 给页面中的某个div设置id或其他属性,这样其他模板(页面)
就可以加载到index.html中,实现单页面

二. 主配置seajs_config.js文件的创建
在public目录下创建一个js目录,并在js目录中创建seajs_config.js文件
seajs.config({
base:'.' //设置当前目录为相对目录
alias: {
"module1": "js/.../m1",
"module2": "js/.../m2",
......................
在js目录下获取各个模块的js文件,相当于requirejs中的paths
注意: 在获取时,可以不写模块的路径.js这个后缀

}
})

主配置文件的主入口为 seajs.use():
seajs.use(["module1","module2",...],function(m1,m2,...){
m1.load();
m2.func2();
})

三. 各个模块的定义规范
seajs(CMD)框架有自己的使用规范,所以我们在使用它的时候就需要按照它的规范来引入
模块文件和改造模块文件;在这里,所有模块使用define函数来定义;

a. 把模块的js代码包裹在一个define(function(require,exports,module){.........})中,
在seajs中我们尽量采用按需加载的方式来加载模块,也就是后置加载;

require 获取模块的; exports 暴露本模块中的函数; module 暴露本模块中的函数;

exports和module都是用来暴露接口的,但一般我们还是使用return {json对象} 来暴露接口.

b. 使用return {各个json对象} 把需要被外部调用的函数暴露出来,这样我们在主配置
文件或其他模块文件中就可以调用这些被暴露出来的方法.
举例: return {
func1: myfunc1,
func2: myfunc2,
.............
以上被暴露出来的方法
}

四. 模块与模块之间的引用
比如模块A引用模块B和模块C中的函数,那么就在模块A中的define函数中添加参数,写法如下:
a. 前置加载引入的方式
define(["moduleB","moduleC"],function(mB,mC){
这样就可以在A中使用模块B和模块C所暴露出来的方法了;
注意:这里的"moduleB","moduleC"代表在主配置文件中已经获取到的模块的js;
像这种把需要加载的模块在定义的开头部分来加载的方式叫前置加载
})

b. 后置加载引入的方式
define(function(require,exports,module){
var module1 = require("module1");
module1.func1();
这里是在function中引入require,exports,module这三个参数,
然后通过require来获取到在主配置文件中已经获取到的模块,
在使用模块来调用该模块中的方法,这种方式就是后置加载.
})

说明: exports,module这两个参数都是用来暴露模块接口(函数)的方法,
但我们一般使用的是return {} 来返回json对象这种方法来暴露接口
return {load: load};
exports.load = load;
module.exports = {load:load};

五. 三方插件的引入时的改造
1. jquery.min.js的引入
jQuery不满足CMD规范,但其满足AMD规范,在对其改造时,不需要设置return
去返回接口(函数),它自带接口;但jquery中的$符号可能会与外部的冲突,所以
在改造的最后,设置 return $.noConflict(); 这样就不会与外部的$发生
冲突了:
define(function(){
jQuery.min.js中原本的所有内容放在这里;
return $.noConflict();
}

在主配置文件的alias中获取到jQuery后, 这样jQuery就改造好并成功引入了.

 

2. bootstrap.min.js的引入
bootstrap不满足CMD规范,也不满足AMD规范,对其改造时需要将它暴露出来,
对其的改造为:
define(function(require,exports,module){
return function($){ //将其暴露出来
bootstrap.min.js中原本的所有内容放在这里;
}
});
在主配置文件的alias中获取到bootstrap.min后, 这样bootstrap就改造好并成功引入了.

　在各个模块中引用bootstrap和jQuery的写法为:
var $ = require("jquery"); //设置$变量为获取到的jQuery文件
require("bootstrap")($); //必须写上($)才能正确获取到bootstrap文件