模块化
# 模块化
当项目开发越来越复杂的时候，会遇到
- 命名冲突，团队协同开发，不同开发人员的变量，函数名称相同。（单人开发时间长了也会忘）
- 文件依赖，代码引入顺序错误
使用模块化开发会避免以上问题，并且让开发效率变高，方便后期维护
- 提升开发效率，代码方便重用，每个人开发的模块可以随用随取，不需要重复开发相同功能
- 方便后期维护，
模块化那有两个规范，AMD规范和CMD规范
# 1. AMD 即（Asynchronous Module Definition）async，中文名是“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范
模块将被异步加载，模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。
- AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。
# 2. CMD（Common Module Definition） 通用模块定义。该规范明确了模块的基本书写格式和基本交互规则。该规范是在国内发展出来的
在 CMD 规范中，一个模块就是一个文件
- CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
# 区别：
# 1. 模块的加载
AMD提前执行(不管有没有用， 先加载过来) //特点 : 前期消耗网络资源大， 但是后期运行效率高.
CMD需求执行(有用我再去加载) //特点:整个自选消耗曲线比较平缓。
1
2
2
# 2. 代码书写
// AMD 推荐的是依赖前置**
define(['./a.js', './b.js'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})
// CMD 推荐的是依赖就近**
define(function(require, exports, module) {
var a = require('./a.js')
a.doSomething()
// 此处略去 100 行
var b = require('./b.js') // 依赖可以就近书写
b.doSomething()
// ...
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# RequireJS
html:
<script src="require.js" data-main="main.js"></script>
//require.js 在加载的时候会检察data-main 属性
//data-main 指向第一个加载的js文件
1
2
3
2
3
main.js:
//引入外部js文件，重命名
require.config({
paths:{
//新文件名:原文件名 文件名，不带后缀！！！！！
"jquery":"jquery-1.11.3.min"，
"kuozhan":"kuozhan"
},
shim:{
"当前模块":["依赖模块"] //新增， 为没使用define定义模块的函数 设置加载顺序
}
})
//调用引入的文件中的方法 第一个参数 ["依赖的模块"] 第二个参数是回调函数 （使用模块的代码）
require(["jquery"],function($){ //参数代表模块对象， jquery内置的$不受影响，但会影响其他插件加载
$("body").css("background-color","black")
})
require(["jquery","kuozhan"],function($,k){ //引入多个模块
$("body").css("background-color","black")
console.log(k.add(1,2))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
kuozhan.js:
//通过define 定义自定义功能
define(function(){
return {
add:function(a,b){
return a+b;
},
max:function(a,b){
if(a>b)
{return a}
else{
return b
}
}
}
})
//补充，当引用的插件，自身没有模块化，如果它还依赖于其他插件
require.config({
paths:{ //需要引入的插件
"jquery":"jquery-1.11.3.min", //不能写文件后缀 .js
"bt":"js/bootstrap.min",
"go":"gouwu"
},
shim:{ //如果你引入的插件，本身不是模块化后的模块
"bt":["jquery"] //这里面写的都是昵称，键值对的值是你键要依赖的模块
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31