RequireJS由James Burke创建,他也是AMD规范的创始人。
RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。
当然也不会有阻塞(blocking)的情况发生。好,以一个简单示例开始。
新建一个目录,结构如下
目录r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官网下载即可。
index.html如下
1 2 3 4 5 6 7 8 9 10 11 | <!doctype html> <html> <head> <title>requirejs入门(一)</title> <meta charset="utf-8"> <script data-main="main"src="require.js"></script> </head> <body>
</body> </html> |
使用requirejs很简单,只需要在head中通过script标签引入它(实际上除了require.js,其它文件模块都不再使用script标签引入)。
细心的同学会发现script标签上了多了一个自定义属性:data-main="main",等号右边的main指的main.js。当然可以使用任意的名称。这个main指主模块或入口模块,好比c或java的主函数main。
main.js如下
1 2 3 4 5 6 7 8 9 | require.config({ paths: { jquery:'jquery-1.7.2' } });
require(['jquery'],function($) { alert($().jquery); }); |
main.js中就两个函数调用require.config和require。
require.config用来配置一些参数,它将影响到requirejs库的一些行为。
require.config的参数是一个JS对象,常用的配置有baseUrl,paths等。
这里配置了paths参数,使用模块名“jquery”,其实际文件路径jquery-1.7.2.js(后缀.js可以省略)。
我们知道jQuery从1.7后开始支持AMD规范,即如果jQuery作为一个AMD模块运行时,它的模块名是“jquery”。注意“jquery”是固定的,不能写“jQuery”或其它。
注:如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。
jQuery中的支持AMD代码如下
1 2 3 | if(typeofdefine ==="function"&& define.amd && define.amd.jQuery ) { define("jquery", [],function() {returnjQuery; } ); } |
我们知道jQuery最终向外暴露的是全局的jQuery和 $。如下
1 2 | // Expose jQuery to the global object window.jQuery = window.$ = jQuery; |
如果将jQuery应用在模块化开发时,其实可以不使用全局的,即可以不暴露出来。需要用到jQuery时使用require函数即可,
这里require函数的第一个参数是数组,数组中存放的是模块名(字符串类型),数组中的模块与回调函数的参数一一对应。这里的例子则只有一个模块“jquery”。
把目录r1放到apache或其它web服务器上,访问index.html。
网络请求如下
我们看到除了require.js外main.js和jquery-1.7.2.js也请求下来了。而它们正是通过requirejs请求的。
页面上会弹出jQuery的版本
这是一个很简单的示例,使用requirejs动态加载jquery。使用到了以下知识点
1、data-main属性
2、require.config方法
3、require函数
上一篇是把整个jQuery库作为一个模块。这篇来写一个自己的模块:选择器。
为演示方便这里仅实现常用的三种选择器id,className,attribute。RequireJS使用define来定义模块。
新建目录结构如下
这次新建了一个子目录js,把main.js和selctor.js放入其中,require.js仍然和index.html在同一级目录。
HTML 如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctype html> <html> <head> <title>requirejs入门(二)</title> <meta charset="utf-8"> <style type="text/css"> .wrapper { width: 200px; height: 200px; background: gray; } </style> </head> <body> <divclass="wrapper"></div> <script data-main="js/main"src="require.js"></script> </body> </html> |
这次把script标签放到了div的后面,因为要用选择器去获取页面dom元素,而这要等到dom ready后。
因为把main.js放到js目录中,这里data-main的值须改为“js/main”。
selector.js 如下
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 | define(function() {
functionquery(selector,context) { vars = selector, doc = document, regId = /^#[\w\-]+/, regCls = /^([\w\-]+)?\.([\w\-]+)/, regTag = /^([\w\*]+)$/, regNodeAttr = /^([\w\-]+)?\[([\w]+)(=(\w+))?\]/;
varcontext = context == undefined ? document : typeofcontext =='string'? doc.getElementById(context.substr(1,context.length)) : context;
if(regId.test(s)) { returndoc.getElementById(s.substr(1,s.length)); } // 略... }
returnquery; }); |
define的参数为一个匿名函数,该匿名函数执行后返回query,query为函数类型。query就是选择器的实现函数。
main.js 如下
1 2 3 4 5 6 7 8 | require.config({ baseUrl:'js' });
require(['selector'],function(query) { varels = query('.wrapper'); console.log(els) }); |
require.config方法执行配置了baseUrl为“js”,baseUrl指的模块文件的根目录,可以是绝对路径或相对路径。这里用的是相对路径。相对路径指引入require.js的页面为参考点,这里是index.html。
把目录r2放到apache或其它web服务器上,访问index.html。
网络请求如下
main.js和selector.js都请求下来了。
selector.js下载后使用query获取页面class为“.wrapper”的元素,控制台输出了该元素。如下
总结:
1、使用baseUrl来配置模块根目录,baseUrl可以是绝对路径也可以是相对路径。
2、使用define定义一个函数类型模块,RequireJS的模块可以是JS对象,函数或其它任何类型(CommonJS/SeaJS则只能是JS对象)。
这篇来写一个具有依赖的事件模块event。event提供三个方法bind、unbind、trigger来管理DOM元素事件。
event依赖于cache模块,cache模块类似于jQuery的$.data方法。提供了set、get、remove等方法用来管理存放在DOM元素上的数据。
示例实现功能:为页面上所有的段落P元素添加一个点击事件,响应函数会弹出P元素的innerHTML。
创建的目录如下
为了获取元素,用到了上一篇写的selector.js。不在贴其代码。
index.html 如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <html> <head> <title>requirejs入门(三)</title> <meta charset="utf-8"> <style type="text/css"> p { width: 200px; background: gray; } </style> </head> <body> <p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p> <script data-main="js/main"src="require.js"></script> </body> </html> |
cache.js 如下
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 | define(function() { varidSeed = 0, cache = {}, id ='_ guid _';
// @private functionguid(el) { returnel[id] || (el[id] = ++idSeed); }
return{ set:function(el, key, val) {
if(!el) { thrownewError('setting failed, invalid element'); }
varid = guid(el), c = cache[id] || (cache[id] = {}); if(key) c[key] = val;
returnc; },
// 略去... }; }); |
cache模块的写法没啥特殊的,与selector不同的是返回的是一个JS对象。
event.js 如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | define(['cache'],function(cache) { vardoc = window.document, w3c = !!doc.addEventListener, expando ='snandy'+ (''+Math.random()).replace(/\D/g,''), triggered, addListener = w3c ? function(el, type, fn) { el.addEventListener(type, fn,false); } : function(el, type, fn) { el.attachEvent('on'+ type, fn); }, removeListener = w3c ? function(el, type, fn) { el.removeEventListener(type, fn,false); } : function(el, type, fn) { el.detachEvent('on'+ type, fn); };
// 略去...
return{ bind : bind, unbind : unbind, trigger : trigger }; }); |
event依赖于cache,定义时第一个参数数组中放入“cache”即可。第二个参数是为函数类型,它的参数就是cache模块对象。
这样定义后,当require事件模块时,requirejs会自动将event依赖的cache.js也下载下来。
main.js 如下
1 2 3 4 5 6 7 8 9 10 11 12 | require.config({ baseUrl:'js' });
require(['selector','event'],function($, E) { varels = $('p'); for(vari=0; i<els.length; i++) { E.bind(els[i],'click',function() { alert(this.innerHTML); }); } }); |
依然先配置了下模块的根目录js,然后使用require获取selector和event模块。
回调函数中使用选择器$(别名)和事件管理对象E(别名)给页面上的所有P元素添加点击事件。
注意:require的第一个参数数组内的模块名必须和回调函数的形参一一对应。
把目录r3放到apache或其它web服务器上,访问index.html。网络请求如下
我们看到当selector.js和event.js下载后,event.js依赖的cache.js也被自动下载了。这时点击页面上各个P元素,会弹出对应的innerHTML。如下
总结:
当一个模块依赖(a)于另一个模块(b)时,定义该模块时的第一个参数为数组,数组中的模块名(字符串类型)就是它所依赖的模块。
当有多个依赖模时,须注意回调函数的形参顺序得和数组元素一一对应。此时requirejs会自动识别依赖,且把它们都下载下来后再进行回调。
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0。随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0.1。此次变化较大,代码也进行了重构,层次更清晰可读。功能上主要变化如下:
1,延迟模块的执行。
这是一个很大变化,以前模块加载后factory立马执行。性能上肯定有一些损耗。2.0修改实现,再没人诟病AMD的模块是立即执行的。现在也可以等到require的时候才执行。
2,config增加了shim,map,module,enforceDefine。
shim参数解决了使用非AMD方式定义的模块(如jQuery插件)及其载入顺序。使用shim参数来取代1.0版本的order插件。其实在1.0版本中就曾经有人开发过use和wrap插件来解决此类问题。考虑到很多开发者有此类需求(比如某些JS模块是较早时候其他人开发的,非AMD方式)此次2.0版本直接将其内置其中。
下面是一个使用jQuery插件形式配置的参数。我们知道jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。而jQuery插件都依赖于jQuery,即在require插件时得保证jQuery先下载下来。可以如下配置
1 2 3 4 5 6 | require.config({ shim: { 'jquery-slide': ['jquery'] } }); require(['jquery-slide']); |
这时会保证先下载jquery.js,然后再下载jquery-slide.js。
map参数用来解决同一个模块的不同版本问题,这一灵感来自于Dojo的packageMap。有这样的场景:开发初期使用了的jquery-1.6.4,后期升级到了1.7.2。但担心有些依赖jquery-1.6.4的代码升级到1.7.2后有问题。因此保守的让这部分代码继续使用1.6.4版本。这时map参数将派上用场。
假如A,B模块中使用了jquery-1.6.4.js,C,D模块中使用了jquery-1.7.2.js。如下
1 2 3 4 5 6 7 8 9 10 11 12 | requirejs.config({ map: { 'A': { 'jquery':'jquery-1.6.4' }, 'B': { 'jquery':'jquery-1.7.2' } } }); require(['A']);// download jquery-1.6.4.js require(['B']);// download jquery-1.7.2.js |
这时require(['A'])将会下载jquery-1.6.4.js,require(['B'])会下载jquery-1.7.2.js。模块“A”如果写成“*”则表示除了B模块使用jquery-1.7.2之外其它模块都使用jquery-1.6.4。map参数解决了模块的各个版本问题,很好的向下兼容了老代码。
config参数用来给指定的模块传递一些有用的数据。如下
1 2 3 4 5 6 7 | require.config({ config: { 'A': { info: {name:'jack'} } } }); |
使用A的模块中可以通过A.config().info获取到该数据信息。如
1 2 3 4 | require(['A'],function(A) { varinfo = a.config().info; console.log(info); }); |
enforceDefine用来强制模块使用define定义,默认为false。如underscore不再支持AMD后,其代码移除了define。此时如果仍然使用requirejs来载入它,它就是普通的js文件了。此时如果enforceDefine设为true,虽然underscore.js能下载但requirejs会报错。如
1 2 3 4 5 6 | require.config({ enforceDefine:true }); require(['underscore'],function(_){ console.log(_) }) |
错误信息
4,require函数增加了第三个参数errbacks。
很明显该函数指模块文件没有载入成功时的回调。这个也是应一些开发者得要求而增加,其中还包括另一个著名AMD的实现curl的作者John Hann。
1 2 3 4 5 | require(['b'],function(){ console.log('success'); },function(err){ console.log(err) }); |
err会给出一些出错提示信息。
5,更强大的paths参数。
requirejs 1.x版本中已经有paths参数,用来映射模块别名。requirejs2.0更加强大,可以配置为一个数组,顺序映射。当前面的路径没有成功载入时可接着使用后面的路径。如下
1 2 3 4 5 6 7 8 9 10 11 12 | requirejs.config({ enforceDefine:true, paths: { jquery: [ 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min', 'lib/jquery' ] } });
require(['jquery'],function($) { }); |
当google cdn上的jquery.min.js没有获取时(假如google宕机),可以使用本地的lib/jquery.js。
6,在模块载入失败回调中可以使用undef函数移除模块的注册。
这个灵感来自dojo AMD loader,RequireJS取名undef。如下
1 2 3 4 5 6 7 8 | require(['jquery'],function($) { //Do something with $ here },function(err) { varfailedId = err.requireModules && err.requireModules[0]; if(failedId ==='jquery') { requirejs.undef(failedId); } }); |
7,删除了jQuery domready相关代码。
这次没人再诟病RequireJS和jQuery耦合的太紧密。
8,删除了priority,packagePaths,catchError.define。
这几个参数已经有相应的替代品。
最后需要注意的是,虽然功能增加了不少。但代码量却减少了近60行。主要是去掉了jQuery ready相关代码。另外newContext函数依然有1000多行。
为了应对日益复杂,大规模的JavaScript开发。我们化整为零,化繁为简。将复杂的逻辑划分一个个小单元,各个击破。这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元。如果上线时都是这些小文件,那将对性能造成一定影响。
RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大,不但可以压缩js,css,甚至可以对整个项目进行打包。
r.js的压缩工具使用UglifyJS或Closure Compiler。默认使用UglifyJS(jQuery也是使用它压缩)。此外r.js需要node.js环境,当然它也可以运行在Java环境中如Rhino。
这篇以一个简单的示例来感受下r.js,创建的目录如下
和入门之三目录结构一样,写了三个模块cache,event,selector。这三个模块的代码就不在贴了。main.js也未做修改,实现的功能仍然是为页面上的所有段落P元素添加个点击事件,点击后弹出P的innerHTML。唯一的区别是目录中多了个r.js。
index.html做了修改,如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!doctype html> <html> <head> <title>requirejs进阶(一)</title> <meta charset="utf-8"/> <style type="text/css"> p { background:#999; width: 200px; } </style> </head> <body> <p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p> <script data-main="built"src="require.js"></script> </body> </html> |
注意,data-main改为了“built”,上一篇的是“main”。我们将使用r.js把js目录下的cache.js,event.js,selector.js,main.js合并压缩后写到r4目录中。
好,让我们开始合并压缩吧。
1,打开windows命令窗口,cd到r4目录中
2,输入命令
node r.js -o baseUrl=js name=main out=built.js
命令行信息可以看到已经将各个js文件合并成功了。这时回到r4目录会发现多了一个built.js文件。
好了,合并压缩过程完成了。
把目录r4放到apache或其它web服务器上,访问index.html。网络请求如下
可以看到除了require.js,就只有built.js了。大大减少了JS文件的http请求。这时点击页面上各个P元素,会弹出对应的innerHTML
这说明功能完损无缺。
下面对命令行做个简单解释。
node r.js -o baseUrl=js name=main out=built.js
-o 表示优化,该参数是固定的,必选。
baseUrl 指存放模块的根目录,这里是r4/js,因为cd到r4中了,只需设置为js。可选,如果没有设置将从r4中查找main.js。
name 模块的入口文件,这里设置成“main”,那么r.js会从baseUrl+main去查找。这里实际是r4/js/main.js。r.js会分析main.js,找出其所依赖的所有其它模块,然后合并压缩。
out 指合并压缩后输出的文件路径,这里直接是built.js,那么将输出到根目录r4下。
好了,再介绍两个参数
1,excludeShallow 合并时将排除该文件
node r.js -o baseUrl=js name=main out=built.js excludeShallow=selector
可以看到输出信息中不再包括selector.js。这时运行index.html页面,会发现selector.js被单独请求下来了。
2,optimize (none/uglify/closure) 指定是否压缩,默认为uglify
不传该参数时r.js默认以UglifyJS压缩。设置为none则不会压缩,仅合并,这在开发阶段是很用用的。
node r.js -o baseUrl=js name=main out=built.js optimize=none
这时生成的built.js是没有压缩的。
总结:
这篇演示了采用模块开发后上线前的一个小示例:把所有模块文件合并为一个文件。
先下载r.js放到开发目录中,然后使用命令行来合并压缩。其中演示了命令行参数-o、baseUrl、name、out及excludeShallow、optimize的使用。-o、name、out是必选的,其它为可选。
这一篇来认识下打包工具的paths参数,在入门一中就介绍了require.config方法的paths参数。用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”,但文件名可通过paths配置可以不必是“jquery.js”,而是带有版本的如“jquery-1.7.2.js”)。
在入门一中,jquery-1.7.2.js和main.js都在一个域中,即把jquery-1.7.2.js下载到本地了。但有时可能一些JS资源不在同一个域。比如直接使用Google CDN上的jquery 1.7.2版本。而这时应该如何使用打包工具r.js呢?
r.js自然不会去载入非本地资源,即没有办法去把外域的js文件请求下来再合并,压缩。当使用paths参数后,使用r.js合并压缩时要忽略paths映射的文件-不合并它。让其作为一个独立模块请求。
创建目录及文件如下
和上一篇一样,但main.js代码不同,注意目录中没有jQuery库。
main.js
1 2 3 4 5 6 7 8 9 10 | require.config({ baseUrl:'js', paths: { 'jquery':'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min' } });
require(['jquery','event','selector'],function($, E, S) { alert($); }); |
配置了paths参数,即jquery模块使用Google CDN的文件。
如果按照上一篇的命令来执行合并压缩,
node r.js -o baseUrl=js name=main out=built.js
发现命令行报错了,提示“D:\work\req\r5\js\jquery.js”不存在。刚刚新建的目录中的确没有jquery.js,因为我们使用的是Google CDN上的jquery。
此时压缩参数paths就排上用处了,修改如下
node r.js -o baseUrl=js name=main out=built.js paths.jquery=empty:
注意红色圈住的参数(empty后有个冒号哦),表示paths.jquery不参与合并,压缩。这时生成的built.js也就不包含它了。
把目录r5放到apache或其它web服务器上,访问index.html。
网络请求如下
built.js包含了main.js、event.js、cache.js,selector.js。jquery则是独立的一个请求,来自ajax.googleapis.com。
再看看如何使用r.js来合并压缩css文件。在r5下新建一个css文件夹,里面有四个css文件:main.css、nav.css、form.css、grid.css。
main.css是合并的主文件,或称配置文件。要合并的文件使用@import引入。如下
main.css
1 2 3 | @importurl("nav.css"); @importurl("grid.css"); @importurl("form.css"); |
另外三个是普通的css文件,里面定义的各种样式。这里不贴代码了。这里将使用命令行将这四个文件合并后生成到r5/css/built.css。
node r.js -o cssIn=css/main.css out=css/built.css
这时回到r5/css目录会发现多了一个built.css文件,该文件是另外四个css文件的合并项。
还可以使用optimizeCss参数设置来配置是否压缩及压缩选项。optimizeCss的取值有standard/none/standard.keepLines/standard.keepComments/standard.keepComments.keepLines。
none 不压缩,仅合并
standard 标准压缩 去换行、空格、注释
standard.keepLines 除标准压缩外,保留换行
standard.keepComments 除标准压缩外,保留注释
standard.keepComments.keepLines 除标准压缩外,保留换行和注释
示例:
node r.js -o cssIn=css/main.css out=css/built.css optimizeCss=standard
压缩后built.css整个为一行了。
总结:
1,对于path配置的非本地的模块文件,使用r.js合并压缩时需要配置paths.xx=empty:。
2,cssIn和optimizeCss参数的使用来合并压缩css文件。
进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一个js文件或把所有的css压缩为一个css文件。其中包括一些压缩配置参数的使用。
但以上两种方式有几个问题
1、通过命令手动配置压缩选项显得很呆板
2、都仅合并为一个文件
对于最后只生成一个文件的库来说,这种方式并无不妥。比如jQuery,它的工程中小文件有20多个,打包后只有一个jquery-1.x.x.js。对于多数实际应用项目来说,可能打包后需要生成多个js文件。有些是页面打开时就要用到的,有些是用户点击或输入时按需加载的。
r.js有另外一种方式来合并压缩,即通过一个配置文件(如build.js)。配置文件内部采用前端工程师非常熟悉JSON格式。这样当项目开发目录固定后,配置文件也相应固定。通过配置文件就很好的隔离了开发环境及上线环境。
这次我们创建的目录中包含所有前端资源,js,css,图片。
其中有两个页面page1.html,page2.html。这两个页面分别使用page1.js和page2.js。
page1.js依赖于event和selector,page2.js依赖于event、selector和jQuery。jQuery是非本地的,没有合并前我们直接访问这两个页面,那么单个的js文件会依次下载。
现在使用r.js来合并压缩,使每个页面除下载require.js外只下载各自合并的大文件page1.js和page2.js。
build.js如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ({ appDir:"./", baseUrl:"js", dir:"../r6-built", paths: { jquery:'empty:' }, modules: [ { name:"page1" }, { name:"page2" } ] }) |
进入命令行输入如下命令
node r.js -o build.js
会发现在和r6同级的目录生成了r6-built目录
该目录包含于r6一样的层级结构,这时访问该目录中的page1.html,page2.html。
这时的page1.js和page2.js就是其它模块文件的合并。另外在r6-built中其它的模块文件也被压缩了。
在build.js中可以配置很多其它参数,可以在这个示例文件中找到更多配置选项。这里不一一列举。
总结:
通过配置文件方式可以实现更加强大,灵活的合并工作。可以生成多个合并文件,包括不同页面的js,css。