模块化
# 模块化
当项目开发越来越复杂的时候,会遇到
- 命名冲突,团队协同开发,不同开发人员的变量,函数名称相同。(单人开发时间长了也会忘)
- 文件依赖,代码引入顺序错误
使用模块化开发会避免以上问题,并且让开发效率变高,方便后期维护
- 提升开发效率,代码方便重用,每个人开发的模块可以随用随取,不需要重复开发相同功能
- 方便后期维护,
模块化那有两个规范,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