一、RequireJS概述

  RequireJS是一个工具库,主要用于客户端的模块管理。实现异步或动态加载,从而提高代码的性能和可维护性。

  RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。

  1.1define方法:定义模块

    define方法用于定义模块,RequireJS要求每个模块放在一个单独的文件里。

    按照是否是依赖其他模块,可以分成两种情况讨论。第一种情况是定义独立模块,即所定义的模块不依赖其他模块;第二种是定义非独立模块,即所定义的模块依赖于其他模块。

  1)独立模块

    如果被定义的模块是一个独立模块,不需要依赖任何其他模块,可以直接用define方法生成。

    

define({
method1 : function(){},
method2 : function(){}
});

  上面代码生成了一个拥有method1、method2两个方法的模块。

  另一种等价的方法是,把对象写成一个函数,该函数的返回值就是输出的模块。

  

define(function(){
return {
method1:function() {},
method2:function() {}
};
})

  后一种写法的自由度更高一点,可以在函数体内写一些模块初始化代码。

  值得指出的是,define定义的模块可以返回任何值,不限于对象。

2)非独立模块

  如果被定义的模块需要依赖其他模块,则define方法必须采用下面的格式。

  

define(['module1','module2'],function(m1,m2) {

.....

});

  define方法的第一个参数是一个数组,它的成员是当前模块所依赖的模块。define方法的第二个参数是一个函数,当前面数组的所有成员加载成功后,它将被调用。它的参数与数组的成员一一对应。

1.2require方法:调用模块

  require方法用于调用模块,它的参数与define方法类似。

  

require(['foo','bar'],function( foo, bar){

    foo.doSomething();
});

2.配置require.js: config方法

  require方法本身也是一个对象,它带有一个config方法,用来配置require.js运行参数。config方法接受一个对象作为参数。

  

require.config({
paths: {
jquery: [
'lib/jquery'
]
}
});

  config方法的参数对象有以下主要成员:

   1)paths

    paths参数指定各个模块的位置。这个位置可以是同一个服务器上的相对位置,也可以是外部网址。可以为每个模块定义多个位置,如果第一个加载失败,则加载第二位置。指定本地文件路径时,可以省略文件最后的js后缀名。

   2)baseUrl

    baseUrl参数指定本地模块位置的基准目录,即本地模块的路径是相对于哪个目录的。该属性通常由require.js加载时的data-main属性指定。

   3)shim

    有些库不是AMD兼容的,这个时候就需要指定shim属性的值。shim可以理解成“垫片”,用来帮助require.js加载非AMD规范的库。

    

require.config({
paths:{
"underscore":"vender/underscore"
},
shim: {
"underscore":{
exports:"_"
}
}
});

3.插件

  requireJS允许使用插件,加载各种格式的数据。

4.优化器 r.js

  RequireJS提供一个基于node.js命令行工具r.js,用来压缩多个js文件。它的主要作用是将多个模块文件压缩合并成一个脚本文件,以减少网页的HTTP请求数。

以上为RequireJS大概理解,后期会更详细讲解requireJS在magento中的应用。

 Castle

05-20 23:19