requirejs处理前端JS依赖

简介：

Requrejs遵循AMD规范，可以解决前端JS依赖问题，对于富客户端开发是不可少的。

使用：

在HTML文件中放入如下的标签，这里会载入require.js源码，并且执行scripts/main.js的内容。

这里main.js所在的目录将被定义问root directory， 以后的依赖定义都可以相对于这个目录。

 

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

  

main.js中写入如下内容：

 

require(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});
 

 这里会查找scripts/jquery.js, script/canvas.js, scritps/app/sub.js，并将返回值作为参数。

 注意，这里就要求这三个js是返回了正确的对象，例如jquery.js应该访问一个jQuery的对象，简单说就是它们需要遵守AMD规范。

 

jQuery是遵守AMD规范的，下面是这方面的定义，对于没有遵循的库可以稍微DIY，让其返回正确值。

这里是jQuery关于AMD的定义。

 

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
	define( "jquery", [], function () { return jQuery; } );
}

  

怎么让js遵循AMD？

如果这个js没有依赖其他js文件，那么就可以直接在闭包最后返回一个该js的“功能对象”。

如果依赖其他文件，那么就需要类似这样写：

 

define(["./cart", "./inventory"], function(cart, inventory) {
        //return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

 

 

["./cart", "./inventory"]是该文件的依赖，"."开始表示相对于当前文件，而不是相对于root directory。返回的值的方式很灵活，可以像jquery那样返回封装好的对象，也可以直接用json封装。

 

更多配置实用见官网，可以指定一些路径缩写，例如这个application要获取一些public 的lib，我们可以把这个lib的路径配置上。例如，在main.js中添加

 

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        app: '../app'
    }
});