原文:http://www.360doc.com/content/15/0424/17/21412_465723215.shtml
requireJS的使用:
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。
一般情况下,我们加载js都是直接写在页面body里面,这样会造成页面阻塞,使用require不仅能解决这个问题,还能为大规模web开发提供规范,版本管理等。
例如一个经典的加载js是这样:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> </head> <body> <span>body</span> </body> </html>
而使用了require之后,页面变成了:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["a","b","c","d"]); </script> </head> <body> <span>body</span> </body> </html>
当然,我们可以使用 data-main把逻辑放到main.js文件里面
<script data-main="js/main.js" type="text/javascript" src="libs/require.js" ></script>
是不是很简单呢?
那require怎么用呢?下面先了解一下require的基本api:
require会定义三个变量:
define,require,requirejs,其中require === requirejs,一般使用require更简短
define 用来定义一个模块
require 加载依赖模块,并执行加载完后的回调函数
比较经典的写法是:
require(["module"],function(module){ module.function(); })
第一个参数是一个模块数组,第二个参数是回调函数,通常回调函数会有模块提供的接口,这样就实现了依赖注入,减少了全局变量污染。注意参数注入的顺序要与模块数组顺序一致,名字并不重要,顺序一致代表把对象传给这个变量。
这是require的基本写法,那这些文件在哪找呢?
require提供了很智能的找法,如果index.html页面加入了data-main标签,则这个目录将会成为基目录,即baseUrl,如果没有的话,index.html所在的目录将成为基目录,require默认的文件就是js文件,所以,我们在使用require的时候,可以连.js都不用写,直接require([‘a’]); 相当于加载了a.js文件
如果文件不在这个相对路径下,我们还可以通过配置来找文件,使用require.config()的path参数;
require.config({ paths : { // 其他目录下的文件 "a" : "../libs/zepto", // 绝对路径 "b" : "/libs/handlebars", // 加载cdn文件 "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"] } })
path映射那些不直接放置于baseUrl下的模块名(这相当于跟冗长的模块名取个简介的名字)。设置path时起始位置是相对于baseUrl的,除非该path设置以”/”开头或含有URL协议(如http:).
另外,通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,例如一些旧的库,或者jquery的插件库等,这时候就需要用到另一个功能:shim
require.config({ shim: { "underscore" : { exports : "_"; }, "jquery.form" : { deps : ["jquery"] } } })
这里jquery.form依赖于jquery,所以我们需要添加deps参数。还可以更简单点,对作为jQuery或Backbone的插件存在而不导出任何模块变量的”模块”们, shim配置可简单设置为依赖数组
requirejs.config({ shim: { 'jquery.colorize': ['jquery'], 'jquery.scroll': ['jquery'], 'backbone.layoutmanager': ['backbone'] } });
基本用法就这些,更深入的学习请参考requirejs官方文档:http://requirejs.org/
中文版的可以再看一下这个:http://javascript.ruanyifeng.com/tool/requirejs.html