RequireJs的使用详解

发布于 2017-06-01 08:35:06 | 147 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

RequireJS JavaScript模块加载器

一、为什么使用RequireJS？

　 <script src="a.js"></script>
　　<script src="b.js"></script>
　　<script src="c.js"></script>

上述多个js文件加载的时候，浏览器会停止网页渲染(JS阻塞浏览器渲染)，加载文件越多，网页失去响应的时间就会越长；另外各文件的依赖关系很难管理。

RequireJs的作用：

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

（3）定义了一个作用域来避免全局名称空间污染。

二、require.js的加载

1.从官网下载最新版本的require，放在js目录下，使用script引入页面：

<script src="js/require.js"></script>

为了不阻塞页面渲染，可以把它放在HTML的最底部或改为如下方式：

<script src="js/require.js" defer async="true" ></script>

async属性表明该文件需异步加载（defer属性兼容IE）。

2.加载页面逻辑代码：

假定代码文件是main.js，也放在js目录下，则用如下几种方式引入：

方式1：

<script  data-main="js/main" src="js/require.js"></script>

data-main属性指定网页程序的主入口，这个文件会第一个被requirejs加载。requirejs默认所依赖的资源都是js，所以可以把main.js简写成main。

方式2：

在加载require.js后，通过requirejs加载config配置文件（如有），最后加载主模块：

require([‘configUrl'],function () { //config.js必须通过requirejs加载才能注册
 require([moduleAName],function(moduelA){
 //逻辑代码
 })
});

三、主模块的写法

// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

require()函数接受两个参数，第一个参数是一个数组，表示当前模块所依赖的模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该回调函数，从而在回调函数内部就可以使用这些模块（被依赖的模块有return的值）。

require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有当前面依赖的模块全部下载并执行对应的回调之后，才会运行。

四、模块的配置

require.config()方法可以定义模块的路径，并以短模块名的形式进行依赖的定义。该方法可以写在每个主模块（main.js）的前面，配合主模块一起使用。

参数是一个对象，这个对象的paths属性指定各个模块的加载路径。paths可以配置多个路径，如果远程cdn库没有加载成功，则加载本地的库。

如果不定义模块的配置，则在主模块中的依赖需要写完整路径。

在每个页面按需配置路径：

require.config({  //注册模块的配置，供后面的代码使用
　　　　baseUrl: '/js/', 
 paths: {
 　　"jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min"
  "fixheight": "login/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...other code; 
 fixHeight.init();
});

或者将config配置作为一个单独的js文件，然后

require([“configJsUrl”],function(){  //需要在main文件中通过require先异步加载模块配置
 require([‘ModuleName'],function(Name){
 …other code
 })
})

为了避免每个页面都要嵌套require，还可以用如下方式：

先创建单独的config.js文件：

require.config({ //注册模块的配置，供后面的代码使用
 baseUrl: "/js/app/", //其他依赖都是对于此位置的相对路径
 // 路径配置
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “模块短名”:”相对于baseUrl的路径地址，省略模块文件的后缀.js”
 },
 // 非AMD模式编写的类库需要重新配置
 shim: {
 underscore: {
  exports:'_'
 },
 backbone（短模块名仍需要定义路径）: {
  exports: 'Backbone',  　　　　//类库输出的变量名，表明这个模块被外部调用时的名称
  deps:['jquery','underscore'] //该模块的依赖
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value　　//js资源的参数，控制版本刷新缓存
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码，会依次加载需要的模块

然后通过如下方式使用：

<script data-main="js/config" src="js/require.js"></script>

通过主入口直接将模块配置注册到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字符串。

define(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template,cat){
 $('body').append($(template));
 document.body.appendChild(cat);
　}
); 

注意：

模块的依赖既可以通过[]引入，也可以在回调函数里通过require()方法引入，效果一样。因为define方法会通过正则先扫描回调函数中require方法的依赖并下载，然后才执行该回调函数。但此时需要传入依赖require本身，否则会报错：

define(function(require){
 var helper=require(‘helpModuleUrI');//也会提前加载该依赖
 …
})

多个模块先后多次依赖同一个模块时，该模块只会被下载并初始化一次，之后require会保持对其的引用供别的模块再次使用。

区分require方法的执行和回调的执行：

require('config',callBack1);
require('b',callBack2);
// 两个require方法会立即执行，但callBack的执行顺序不确定，取决于下载的顺序。
//不同于以下代码，会严格按顺序执行
require('config',function(){
 require('b',callBack2)
})

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持phperz！