RequireJS是一个JavaScript文件和模块载入器。
还原一下需求的来源:一个网页开始的时候,所有js代码都写在一个文件里面,只要加载这一个就够了。随着应用越来越复杂,代码越来越多,一个文件不够了,由于各种原因必须分成多个文件,还有用到其他的一些框架,这样就必须加载多个js文件。有个问题就是加载的时候,浏览器会停止网页渲染,加载越多而失去响应的时间就越长;另外,js文件之间存在依赖关系,因此要保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。为了解决以上问题,于是像require.js这样的项目就诞生了。
使用示例:
<!doctype html> <html> <head> <title>requirejs使用</title> <meta charset="UTF-8"> <script data-main="main" src="http://cdn.staticfile.org/require.js/2.1.15/require.min.js" type="text/javascript" async="true"></script> </head> <body> </body> </html>
上面代码中的script标签data-main属性是在require.js加载后要载入的js文件(main.js)
接下来是main.js,
require.config({ paths: { jquery:[ ‘http://cdn.staticfile.org/jquery/1.11.1/jquery.min‘, ‘http://cdn.bootcss.com/jquery/1.11.1/jquery.min‘ ] } }); require([‘jquery‘], function(_jj) { alert(_jj.fn.jquery); } );
使用require.config()方法,可以对模块的加载行为进行自定义。require.config()参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。这里直接是引用的线上的地址(去掉.js后缀)。
require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。require()异步加载jquery,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
如果,main.js只是,
require([‘jquery‘], function(_jj) { alert(_jj.fn.jquery); } );
这样的话,默认它会去加载与main.js在同一个目录的jquery.js文件。如果不在同一目录,那么用require.config()方法是有必要的,还有可以用baseUrl改变基目录。
这里简要说下还有个shim参数,从理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但更多的流行库都没有,那么这样的模块在用require()加载之前,要先定义它们的一些特征。
最后,require.js要求每个模块是一个单独的js文件。这样的话,如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。因此,require.js提供了一个优化工具r.js,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。