AMD规范和RequireJS模块化

阅读更多

什么是AMD模式？
define和require两个定义模块调用模块的方法合称为 AMD模式。
   **用于浏览器环境，允许异步加载模块，也可以根据需要动态加载模块。

1.引入require.js到网页，网页中就能进行模块化编程了

default hidden

data-main加载主文件，指定主代码所在的脚本文件，不可省略。

2.定义模块
1）独立定义模块：不依赖其他模块的模块

define(function (){
    return {
        add: function (a, b) {
            return a + b;
        }
    };
});

2）非独立模块：依赖其他模块的模块

//第一个参数是数组：成员是当前模块依赖的模块
//第二个参数是函数：参数与数组成员一一对应，前面数组所有成员加载成功后才被调用。返回一个对象供其他模块调用。define(['jquery'],function(jquery){
    return {//函数返回值就是输出的模块
        showme:function(el){
            $(el).show();
        }
    };
});

3.主模块require调用模块

//第一个参数是数组：表示依赖关系
require(['config','math/math','math/show'], function (config,math,show) {
    debugger;
    console.log(math.add(1,2));
    show.showme('.pp');
});

4.配置require.js config方法
  1）paths：指定各个模块的位置。
  2）baseUrl：指定本地模块位置的基准目录。
  3）shim：帮助require.js加载非AMD规范的库

require.config({
    paths : {
        jquery : '../components/jquery/dist/jquery',
        angular: '../components/angular/angular'
    }
   shim : {
        angular: {
            exports: 'angular'
        }
//backbone 依赖于underscore，输出符号为'Backbone'
        backbone：{
            deps:['underscore'],
            exports:'Backbone'
        }
        underscore:{
            exports:'_'
        }
   }
});