Magento开发基础知识之RequireJs

1、RequireJS概述

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

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

　　1.1define方法：定义模块

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

　　　　按照是不是依赖其余模块，能够分红两种状况讨论。第一种状况是定义独立模块，即所定义的模块不依赖其余模块；第二种是定义非独立模块，即所定义的模块依赖于其余模块。

　　1）独立模块

　　　　若是被定义的模块是一个独立模块，不须要依赖任何其余模块，能够直接用define方法生成。

　　　　

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

　　上面代码生成了一个拥有method一、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