requiresjs初级接触(1)

Veröffentlicht am

为什么要使用require.js？

在我最先接触前端的时候，我发现所有的JavaScript代码都会写在一个文件里面，文件包含了CSS代码，html代码，JavaSrcipt代码，只要加载一个文件即可，可是随着我学习的深入，发现代码越来越复杂，代码量也越来越多，一个文件已经无法满足了，所以代码被分成若干个文件进行加载，可这种方式有很多弊端。

  1. 代码必须依次加载，顺序乱了就会报错
  2. 多人协作下，代码中很多变量名会相同，导致代码运行出错
  3. 加载的时候，文件过多网页就会失去响应，时间拉长
    为了解决这样的问题，require.js应运而生，它解决了上述问题，实现了js的异步加载和管理模块之间的依赖性，方便了代码的编写和维护。

使用requrie.js的方法

进入官网，下载最新的requrie文件。

下载完成后，将文件放到你所需要编辑的网页文件夹下，
'放置require.js文件'
然后在html文档中插入script标签，

<script src="js/require.js" defer async="true"></script>

这样表明这个文件需要异步加载，避免了网页失去响应，同时你可以吧这个文件放到head里面去。

载我们自己的代码

成功加载require.js以后，下一步就要加载我们自己的代码了，一般我们需要加入一个入口模块，在代码界普遍使用main作为入口模块名，将这个入口文件同样放在js文档下，代码如下：

<script src="js/require,js" data-main="js/main"></script>

入口模块怎么写？

入口模块依赖于其他模块，这个时候就要使用AMD规范定义的require()函数。

1
2
3
require(['module1','module2'],function(module1,module2)){
  //to do something
});

require()函数接受两个参数，第一个是一个数组，数组中包含所使用的模块名，第二个是一个回调函数，当前面制定的模块都加载成功后，他将会被调用。

模块的加载

使用require.config()方法，我们可以对模块的加载进行自定义，require.config()就卸载住模块(main.js)的头部，参数就是一个对象，这个对象的paths属性制定各个模块的加载路径。

1
2
3
4
5
6
require.config({
	paths:{
		"module1":"module1.min",
		"module2":"module2.min"
	}
});

上面的写法是旨在模块说在和main模块在同一个目录下，如果这些模块在其他的目录下，则有下面两种写法：

1
2
3
4
5
6
require.config({
paths:{
 "module1": "xx/module1.min",
 "module2": "xx/module2.min"
}
});

第二种是直接改变基目录（baseURL）

1
2
3
4
5
6
7
require.config({
	baseUrl:"js/xx",
	paths:{
		"module1":"module1.min",
		"module2":"module2.min"
	}
});

require使用实例。

require.js加载的模块，采用的是AMD规范，模块的写法要使用AMD所归定的写法，模块使用define()函数来定义，如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定一个math.js文件，定义了一个math模块，那么根据AMD的规定。模块就要这样写：

1
2
3
4
5
6
7
8
9
10
11
//math.js
define(function(){
	var mult = fuction(x,y){
	 return x*y
	};
	return {
	 mult: mult
	}
});

那么在main.js模块就要使用如下代码进行加载：

1
2
3
4
5
//main.js
require(['math'],function(math){
 console.log(math.mult(2,3));
});

如果math模块还要依赖其他模块的话，那么define（）函数的第一个参数，就必须是一个数组，知名该模块的依赖性。举个例子,比如math模块必须依赖”Num”模块下的mult函数：

1
2
3
4
//main.js
require(['math'],function(math){
 console.log(2.3)
});

math 模块：

1
2
3
4
5
6
7
8
9
10
11
 //math.js
 define(["Num"],function(myLib){
	var foo = function(x,y){
		return Num.mult(x,y)
	}
	return {
		foo:foo
	}
});

Num模块：

1
2
3
4
5
6
7
8
9
10
11
12
 //Num.js
 define(function(){
	var Mult = function(x,y){
		return x+y
	}
	return {
		Mult: Mult
	}
	
});