使用require.js
requirejs使用入门
什么是requirejs?
RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。
RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main,require.js使用它来启动脚本加载过程,而baseUrl一般设置到与该属性相一致的目录。
为什么要使用require.js?
我们在做项目的过程中,往往都需要加载很多个js文件,如下所示:
<script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script> <script src="4.js"></script> <script src="5.js"></script> <script src="6.js"></script>
这样的写法的缺点是Js会阻塞渲染页面,并且文件越多, 那么等待的时间也就越长,并且文件多的情况下往往还存在文件间依赖的问题, 有时候比较复杂,那么文件间的依赖就成了问题。
所以require.js主要就是为了解决下面的两个问题:
(1)实现js文件的异步加载,避免页面失去响应。
(2)管理项目之间的依赖性,便于代码的维护和管理。
如何使用require.js?
使用require.js非常简单,只需要在页面中使用一个require.js即可,如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>require</title> <script src="./require.js" data-main="js/main" type="text/javascript"></script> </head> <body> <!-- your code is here --> </body> </html>
即我们在html文件中只需要使用一个require.js文件的引入即可,然后data-main引入的是网页程序的主模块,这个文件会被require.js第一个加载,由于require.js默认文件的后缀名为.js,所以这里我们写成main即可。
如何写主模块main.js
什么是主模块?
主模块就是入口文件,它是require.js加载执行的第一个文件,这就是主模块,并且其他的所有js文件将在这里被引入执行。
为什么要使用主模块?
我们知道require.js在index.html唯一的被引入,而没有引入其他js文件,这也是为了方便管理。 那么内部机制就要求需要这么一个主模块,然后就可以很好的管理模块之间的关系,试想如果没有这么一个主模块,那么require.js也会无从下手的。
main.js中怎么写呢? 如果我们只需要这一个js就够了,比如就执行alert("hello");那么main.js文件中只有这么一句:
alert("hello");
然后打开html文件时,就会alert("hello");了,但是我们使用require.js不可能就使用这么一个文件,否则就不用require了。
真正的情况是: 主文件main.js依赖于其他文件, 这时就要使用AMD规范来定义require()函数。如下所示:
// main.js require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ // some code here });
即接受的第一个参数是一个数组,指定模块名称(不带.js的文件), 然后第二个参数是一个函数,其中的参数暴露出了模块中暴露的方法,然后我们就可以在回调函数中使用这些模块了。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
例子
比如之前的index.html中的body部分是<div class="wrap"></div>,然后引入了require.js并指定了main.js为入口文件,在main.js中定义如下:
require(['jquery'],function ($) { $('.wrap').html("hello, world!"); });
即我们只引入了jquery,并且在回调函数中将$暴露出来并使用,那么启动index.html文件之后,我们就可以在页面上看到渲染的hello, world了。 注意: 此时的目录结构如下:
所以:我们需要注意下面的几点:
- require.js会默认认为require()中第一个参数数组里的文件和main.js在同一个目录下。
- 我们引入的文件即jquery.js,因为默认是.js后缀,所以我们直接写文件名即可。
- 在require的回调函数中,我们使用回调函数中的接口,即如果这里没有定义为$,而是定义为foo,那么我们就需要使用foo。
、
存在的问题: 如果说依赖文件(如jquery)何main.js文件不再同一个目录中该怎么引用呢?
比如现在的目录时这样的:
那么现在我们就会发现,你在require函数的第一个参数中写成'jquery'或者‘lib/jquery’或者‘../lib/jquery’或者‘./lib/jquery’都是无法成功的。
这时我们就需要使用require.config()方法对路径进行配置了。如下所示:
require.config({ paths: { jquery: '/lib/jquery' } });
如果有多个文件,并且多个文件在同样的目录下,我们可以定义一个baseUrl, 如下:
require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });
如果某个模块在另一个主机上,我们可以直接定义其网址:
require.config({ paths: { "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min" } });
如何定义模块?
在使用require时,我们用的是AMD的规范进行加载的,所以在定义模块时,也是需要使用AMD规范来定义模块。
比如现在我们在和main.js同一个目录下定义一个alert模块:
define(function () { var alertName = function (str) { alert("I am " + str); } var alertAge = function (num) { alert("I am " + num + " years old"); } return { alertName: alertName, alertAge: alertAge }; });
即使用define定义,其中接受一个回调函数作为参数,在这个回调函数中定义模块,最后返回一个对象,对象的属性就是我们可以调用的方法。
然后我们看看如何在main.js中使用:
require(['alert'], function (alert) { alert.alertName('JohnZhu'); alert.alertAge(21); });
即使用也非常简单,就是引入alert模块,然后调用其中的alertName和alertName方法即可。
问题:如果一个模块在定义时需要依赖其他模块怎么办?
比如这个alert模块需要依赖jquery,那么我们就可以这么定义:
define(['jquery'],function () { var alertName = function (str) { alert("I am " + str); $('.wrap').html("I am " + str); } var alertAge = function (num) { alert("I am " + num + " years old"); } return { alertName: alertName, alertAge: alertAge }; });
即我们直接将define的第一个参数(一个数组)中使用jquery, 然后直接使用即可。
- 注意: 这里显然使用jquery的使用默认路径还是和main.js在同一个目录下。
- 这里我们没有在回调函数中传入参数,但是是可以传的,只是省略了,如果我传入foo,那么就可以用foo(".wrap").html("I am " + str);来使用。
- 于是main.js在加载alert模块时,会等到jquery模块加载完再执行其中的回调函数。
加载非规范的模块
理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。那么,require.js是否能够加载非规范的模块呢?
答案是可以的,但是需要在使用require之前,用require.config()方法定义一些他们的特征。
require.config({ shim: { 'underscore':{ exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' } } });
之前我们介绍过require.config中的paths,这里又介绍了shim对象,它专门用来配置不兼容的模块。具体来说,每个模块要定义:
(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
(2)deps数组,表明该模块的依赖性。
比如,我们可以这样定义一个jquery插件:
shim: { 'jquery.scroll': { deps: ['jquery'], exports: 'jQuery.fn.scroll' } }
即deps说明他是需要依赖jquery的, exports说明可以通过juqery的scroll访问到它。
require.js插件
requirejs还提供了一系列的插件供我们使用。
domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
require(['domready!'], function (doc){ // called once the DOM is ready });
text和image插件,则是允许require.js加载文本和图片文件。
define([ 'text!review.txt', 'image!cat.jpg' ], function(review,cat){ console.log(review); document.body.appendChild(cat); } );
补充例子
最近看到有人类似于这样使用require。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>require</title> <script src="./require.js" type="text/javascript"></script> </head> <body> <!-- your code is here --> <div class="wrap"> </div> <script> require(['js/dosomething']); </script> <script src="js/jquery.js"></script> </body> </html>
dosomething是这样的:
alert('god');
- 即我们使用require来引入模块,但是dosomething这个模块并没有按照AMD规范来编写。
- 我们可以看到利用require的好处在于可以异步加载文件。 这种用法的好处就是在于require的文件会异步加载。
- 并且在我们引入的目的仅仅是执行一些功能,而不需要暴露出方法来,所以可以直接写
参考文档: