AMD的规范演化
对于web项目来说,打交道的不仅仅有后台,前台页面也是少不了的,而前台的页面js也常常是我们后台程序员必须要使用的语言, 今天说下项目中的js的组织方式。
文件函数型
所谓文件函数型是指所有的js的脚本都是中都是一个一个的方法,没有任何的封装,这也是传统的项目中常用的方法。如下:
file1.js1
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45 function add(a,b){
return a+b;
}
```
**file2.js**
```js
function minutes(a,b){
return a-b;
}
```
当我们想使用个方法的时候只需要应用相应的js就行了,这样的缺点很明显,就是要时刻明确文件之间的相互依赖关系的顺序,不然就会导致程序无法正常的运行。 比如还是上面的两个js,我在file1.js中有家一段代码:
**file1.js**
```js
function add(a,b){
return a+b;
}
function sum(a,b,c){
return add(a,minutes(b,c));
}
```
如果在引用的时候,先引用的file1.js则会导致files1.js中有方法没有找到。 如果项目足够的大,就纯粹的js的依赖关系就足以让我们焦头烂额。
这种方法还有很多潜在的风险,如果我在file1.js中有定义了一个minutes方法,这样file2.js中的方法就面临被覆盖的风险,所以这种布局的方式,不应该是项目的首选。
### jquery扩展型
在web的项目中,在面对dom操作的时候,传统的js的过于繁杂,所以jquery的使用应该占了很大的一部分的比重(确切的说在MVVM框架流行前)。
jquery也提供了两种扩展方法:
- **静态方法扩展**
jquery静态方法的扩展是直接扩展到$对象上面 :
``` js
$.funcA=function(){
// do something
}
在任何引入jquery的地方都可以使用$.funcA()来调用
- jquery对象方法扩展
1 | $.fn.funcB=function(){ |
使用的方法: $(“#id”).funcB()来调用。
上面的方面解决了方法见的相互的依赖顺序问题,但没有解决方法被覆盖的问题,同时又带来了一个副作用,增加了js方法的调用深度,降低了js的执行效率。
模块加载型
模块话加载是对jquery扩展和文件方法的一个进化,把每个方法都用一个模块封装起来,不至于被外面的方法覆盖。
module1.js
1 | var module1=function(){ |
上面代码 依赖math和graph两个库,在定义模块前声明了依赖。
引用模块:
1 | require(['foo', 'bar'], function ( foo, bar ) { |
更多内容参见:
阮一峰-requireJS和AMD规范