参数配置
requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单。
- require
- define
其中define
是用于定义模块,而require
是用于载入模块以及载入配置文件。
在requireJS中一个文件就是一个模块,并且文件名就是该模块的ID,其表现则是以key/value的键值对格式,key即模块的名称(模块ID),而value则是文件(模块)的地址,因此多个模块便有多个键值对值,这些键值对再加上一些常用的参数,便是require的配置参数,这些配置参数我们通常会单独保存在一个JS文件中,方便以后修改、调用,所以这个文件我们也称之为“配置文件”。
下面是requireJS的基本参数配置:
//index.html
<script>
require.config({
baseUrl:'js/',
paths:{
'jquery':'http://xxxx.xxx.com/js/jquery.min',
'index':'index'
}
});
require(['index']);
</script>
require.config()
是用于配置参数的核心方法,它接收一个有固定格式与属性的对象作为参数,这个对象便是我们的配置对象。
在配置对象中 baseUrl
定义了基准目录,它会与 paths
中模块的地址自动进行拼接,构成该模块的实际地址,并且当配置参数是通过script
标签嵌入到html文件中时,baseUrl默认的指向路径就是该html文件所处的地址。paths
属性的值也是一个对象,该对象保存的就是模块key/value值。其中key便是模块的名称与ID,一般使用文件名来命名,而value则是模块的地址,在requireJS中,当模块是一个JS文件时,是可以省略 .js 的扩展名,比如 “index.js” 就可以直接写成 “index” 而当定义的模块不需要与 baseUrl
的值进行拼接时,可以通过 "/"
与 http://
以及 .js
的形式来绕过 baseUrl
的设定。
加载配置文件
现在我们知道require的配置有两种加载方式,一种是放入到script标签嵌入到html文件中,另一种则是作为配置文件 app.js
来独立的引入。
独立的引入配置文件也有两种方式,一种是通过script标签加载外部JS文件形式:
<script src="js/require.js"></script>
<script src="js/app.js"></script>
另一种方式则是使用 require 提供的 data-main
属性,该属性是直接写在引入require.js的script标签上,在require.js 加载完毕时,会自动去加载配置文件 app.js。
<script data-main="js/app" src="js/require.js"></script>
通过 data-main
去加载入口文件,便会使配置对象中的 baseUrl
属性默认指向地址改为 app.js 所在的位置,相比之下我更加推荐这种方式,因为它更可能的方便快捷。
定义模块
在我们选择requireJS来模块化开发我们的项目或者页面时,就要明确的知道我们以后所编写的代码或者是某段功能,都是要放在一个个定义好的模块中。
下面是requireJS定义模块的方法格式:
define([id,deps,] callback);
ID:模块的ID,默认的便是文件名,一般无需使用者自己手动指定。
deps:当前模块所以依赖的模块数组,数组的每个数组元素便是模块名或者叫模块ID。
callback:模块的回调方法,用于保存模块具体的功能与代码,而这个回调函数又接收一个或者多个参数,这些参数会与模块数组的每个数组元素一一对应,即每个参数保存的是对应模块返回值。
载入模块
模块与模块之间存在着相互依赖的关系,因此就决定了不同的加载顺序,比如模块A中使用到的一个函数是定义在模块B中的,我们就可以说模块A依赖模块B,同时也说明了在载入模块时,其顺序也是先模块A,再模块B。
在require中,我们可以通过 require()
方法去载入模块。其使用格式如下:
require(deps[,callback]);
deps:所要载入的模块数组。
callback:模块载入后执行的回调方法。
这里就让我们依然使用上述的 index 模块为例来说明
示例:
require.config({
paths:{
'index':'index'
}
});
require(['index']);
requireJS 通过 require([])
方法去载入模块,并执行模块中的回调函数,其值是一个数组,数组中的元素便是要载入的模块名称也就是模块ID,这里我们通过 require(['index'])
方法载入了 index 这个模块,又因为该模块依赖了 jquery 模块,所以接着便会继续载入jquery模块,当jquery模块加载完成后,便会将自身的方法传递给形参 $
最后执行模块的回调方法,alert出$参数具体内容。
常用参数
deps
用于声明require.js在加载完成时便会自动加载的模块,值是一个数组,数组元素便是模块名。
callback
当deps中的自动加载模块加载完毕时,触发的回调函数。
config
config属性可以为模块配置额外的参数设定,其使用格式就是以模块名或者模块ID为key,然后具体的参数为value。