requireJS学习笔记
一、常用的方法与命令
requiredefine其中define是用于定义模块,而require是用于载入模块以及载入配置文件。
通过 <script> 标签,将require.js 文件引入到当前的 HTML 页面中
<script src="js/require.js"></script>
二、参数配置
在requireJS中一个文件就是一个模块,其表现则是以key/value的键值对格式,key即模块的名称(模块ID),而value则是文件(模块)的地址
基本参数配置:
//index.html<script>require.config({ baseUrl:'js/', paths:{ 'jquery':'http://xxxx.xxx.com/js/jquery.min', 'index':'index' }, shim:{ }});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的设定。
shim 属性
它的值是一个对象,可以用于声明非标准模块的依赖和返回值。
所谓的 “非标准模块” 指的是那些不符合AMD规范的JS插件。
require.config({ baseUrl:'js/', paths:{ 'jquery':'http://xxx.xxxx.com/js/jquery.min', 'index':'index', 'say':'say', 'bar':'bar', 'tools':'tools' }, shim:{ 'tools':{ deps:['bar'], exports:'tool' }, 'say':{ deps:['./a','./b'], init:function(){ return { 'sayBye':sayBye, 'sayHellow':sayHellow } } } }});require(['index']);
这里需要注意的是如果所加载的模块文件是符合AMD规范,比如通过 define 进行定义的,那么require默认的优先级将是标准的,只有在不符合标准的情况下才会采用shim中定义的参数。
在 index 模块执行时:
define(['jquery','tool','say'],function($,tool,say){ tool.drag(); say.sayHellow(); say.sayBye();})
上面的示例中,关于 shim 中有三个重要的属性,它们分别是:
deps: 用于声明当前非标准模块所依赖的其它模块,值是一个数组,数组元素是模块的名称或者是ID。exports:用于定义非标准模块的全局变量或者方法。值一般是一个字符串。init:用于初始,处理,非标准模块的全局变量或者是方法,常用于当非标准模块存在多个全局变量以及方法,值是一个函数。//示例:require.config({ baseUrl:'js/', paths:{ 'jquery':'http://xxx.xxxx.com/js/jquery.min', 'index':'index' }});require(['index']);
三、加载配置文件
<script src="js/require.js"></script>
四、定义模块
在我们选择requireJS来模块化开发我们的项目或者页面时,就要明确的知道我们以后所编写的代码或者是某段功能,都是要放在一个个定义好的模块中。
下面是requireJS定义模块的方法格式:
define([id,deps,] callback);
//示例//index.jsdefine(['jquery','./utils'], function($) { $(function() { alert($); });});
从上面的示例中我们可以看出 index 模块中,依赖了 'jquery' 模块,并且在模块的回调函数中,通过 $ 形参来接收 jquery模块返回的值,除了 jquery 模块,index模块还依赖了 utils 模块,因为该模块没有在配置文件中定义,所以这里以附加路径的形式单独引入进来的。
五、载入模块
在说载入模块之前,我们先聊聊“模块依赖”。模块与模块之间存在着相互依赖的关系,因此就决定了不同的加载顺序,比如模块A中使用到的一个函数是定义在模块B中的,我们就可以说模块A依赖模块B,同时也说明了在载入模块时,其顺序也是先模块A,再模块B。
在require中,我们可以通过 require() 方法去载入模块。其使用格式如下:
require(deps[,callback]);
require.config({ paths:{ 'index':'index' }});require(['index']);
requireJS 通过 require([]) 方法去载入模块,并执行模块中的回调函数,其值是一个数组,数组中的元素便是要载入的模块名称也就是模块ID,这里我们通过 require(['index']) 方法载入了 index 这个模块,又因为该模块依赖了 jquery 模块,所以接着便会继续载入jquery模块,当jquery模块加载完成后,便会将自身的方法传递给形参 $ 最后执行模块的回调方法,alert出$参数具体内容
六、模块的返回值
require中定义的模块不仅可以返回一个对象作为结果,还可以返回一个函数作为结果。
// utils.jsdefine(function(require,exports,modules){ function sayHellow(params){ alert(params); } return sayHellow});// index.jsdefine(function(require,exports,modules){ var sayHellow = require('utils'); sayHellow('hellow World');})
如果通过return 返回多种结果的情况下:
// utils.jsdefine(function(require,exports,modules){ function sayHellow(params){ alert(params); } function sayBye(){ alert('bye-bye!'); } return { //return一个对象出来 'sayHellow':sayHellow, 'sayBye':sayBye }});// index.jsdefine(function(require,exports,modules){ var utils = require('utils'); utils.sayHellow('hellow World');})
这里有一个注意的地方,那就是非依赖性的模块,可以直接在模块的回调函数中,加入以下三个参数:
require:加载模块时使用。exports:导出模块的返回值。modules:定义模块的相关信息以及参数。总结:
1、在首页通过<script src="js/require.js"></script>引入require.js
2、通过define([id,deps,] callback);定义模块,
3、通过require.config配置模块的路径,
4、通过require(deps[,callback]);引入模块
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。