Magento开发基础知识之RequireJs

一、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

Magento开发基础知识之RequireJs

猜你喜欢