AMD模块化编程之require.js

AMD: 全称是Asynchronous Module Definition,即异步模块加载机制。
AMD规范简单到只有一个API,即define函数:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

其中:
module-name:  模块标识,可以省略。
array-of-dependencies:  所依赖的模块,可以省略。
module-factory-or-object:  模块的实现,或者一个JavaScript对象。

require.js:

解决的问题
1. 实现js文件的异步加载,避免网页失去响应
2. 管理模块之间的依赖性,便于代码的编写和维护。
     模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量。RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块。

基本使用:

1、引入:
<script data-main="main" src="require.js"></script>
2、主模块js中(main.js),加载相应的js:
 
require.js中,有属性baseUrl,其为所有模块的查找根路径。若不设置,则默认值是加载require.js的html所处位置
 
//自定义模块的加载
require.config({
    paths: {
        'jquery': 'jquery-1.12.1.min'
    }
});

//接受两个参数,数组和回调函数
require(["jquery"], function() {
    //callback
    init();
});
3、模块的定义(math.js) / 模块的调用(main.js)
//定义模块
define(function() {
    var add = function(x, y) {
        return x + y;
    }
    return {
        add: add
    }
});

//调用模块
require(['math'], function(math) {
    console.log(math.add(1, 2));
})
4、如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明改模块依赖性。依赖关系会以参数的形式注入到该函数上,参数列表与依赖名称列表一一对应。
define(['mylib'], function(mylib)) {
    function foo() {
        mylib.doSomething();
    }
    return {
        foo: foo
    }
}
当require加载上面这个模块的时候,会先加载myLibs.js文件。
5、加载非规范的模块
 
     require.config() 接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。
     比如,jquery的插件可以这样定义:
shim: {
    'jquery.scroll': {
        deps: ['jquery'],
        exports: 'jQuery.fn.scroll'
    }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注