一、为什么使用RequireJS?
上述多个js文件加载的时候,浏览器会停止网页渲染(JS阻塞浏览器渲染),加载文件越多,网页失去响应的时间就会越长;另外各文件的依赖关系很难管理。
RequireJs的作用:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
(3)定义了一个作用域来避免全局名称空间污染。
二、require.js的加载
1.从下载最新版本的require,放在js目录下,使用script引入页面:
为了不阻塞页面渲染,可以把它放在HTML的最底部或改为如下方式:
async属性表明该文件需异步加载(defer属性兼容IE)。
假定代码文件是main.js,也放在js目录下,则用如下几种方式引入:
方式1:
data-main属性指定网页程序的主入口,这个文件会第一个被requirejs加载。requirejs默认所依赖的资源都是js,所以可以把main.js简写成main。
方式2:
在加载require.js后,通过requirejs加载config配置文件(如有),最后加载主模块:
三、主模块的写法
require()函数接受两个参数,第一个参数是一个数组,表示当前模块所依赖的模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该回调函数,从而在回调函数内部就可以使用这些模块(被依赖的模块有return的值)。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有当前面依赖的模块全部下载并执行对应的回调之后,才会运行。
四、模块的配置
require.config()方法可以定义模块的路径,并以短模块名的形式进行依赖的定义。该方法可以写在每个主模块(main.js)的前面,配合主模块一起使用。
参数是一个对象,这个对象的paths属性指定各个模块的加载路径。paths可以配置多个路径,如果远程cdn库没有加载成功,则加载本地的库。
如果不定义模块的配置,则在主模块中的依赖需要写完整路径。
在每个页面按需配置路径:
或者将config配置作为一个单独的js文件,然后
为了避免每个页面都要嵌套require,还可以用如下方式:
先创建单独的config.js文件:
然后通过如下方式使用:
通过主入口直接将模块配置注册到requirejs命名空间中,页面中后续的require方法无需再注册,可以直接使用短模块名进行依赖加载。
如果没有显式指定config及data-main,则默认的baseUrl为加载RequireJS的HTML页面所在目录。如果指定了data-main而没有在config中指定根路径,则该路径被设为baseUrl。
若想避开"baseUrl + paths"的解析过程,而是直接指定加载某一个目录下的脚本。可以这样做:如果一个module ID符合下述规则之一,其ID解析会避开常规的"baseUrl + paths"配置,而是直接将其加载为一个相对于当前HTML文档路径的脚本:
• 以 ".js" 结束.
• 以 "/" 开始.
• 包含 URL 协议,如 "http:" or "https:".
eg. require(['/www/js/app/vender/underscore.min.js'],function (_) {…})
require.js要求,每个模块是一个单独的js文件。加载多个模块就会发出多次HTTP请求,影响网页的加载速度。因此require.js提供了一个优化工具(r.js),当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数,但又需要和缓存之间进行取舍。
六、AMD模块的写法
require.js加载的模块,必须按照AMD的规定来写。即模块必须采用特定的define()函数来定义,通常返回一个对象,该对象具有供别的模块使用的方法或属性;或只执行相关逻辑而无输出。
七、require.js的相关插件
text插件,允许require.js异步加载txt、css或html等文本资源供js使用,而不需要在script内构建Html字符串。
注意:
模块的依赖既可以通过[]引入,也可以在回调函数里通过require()方法引入,效果一样。因为define方法会通过正则先扫描回调函数中require方法的依赖并下载,然后才执行该回调函数。但此时需要传入依赖require本身,否则会报错:
多个模块先后多次依赖同一个模块时,该模块只会被下载并初始化一次,之后require会保持对其的引用供别的模块再次使用。
区分require方法的执行和回调的执行: