JS模块化编程2---AMD规范

CommonJS中,有一个全局方法require(),用于加载模块

var math = require(‘math’);
调用模块的方法
math.add(2,3);//5

对于浏览器端,如果math模块加载不出来,add方法调用不了,就会一直卡在那里,而服务器的模块在本地,不用担心
所以浏览器端不能用“同步加载”,只能异步加载,this is AMD
AMD Asynchronous Module Definition
所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成后,回调函数才会运行

require([Module],callback);
第一个参数里面加载的模块数组,第二个参数是成功加载后的回调函数

require(['math'],function(math){
    math.add(2,3);
});

require.js
require.js的诞生,就是为了解决这两个问题:
1.实现JS文件的异步加载,避免网页失去响应;
2.管理模块之间的依赖性,便于代码的编写和维护;

< script src=”js/require.js” defer async=”true”> < /script>
async异步加载,defer(IE下异步加载)
加载自己的main.js文件
< script src=”js/require.js” data-main=”js/main”>< /script>
data-main 指定网页的主模板,即第一个加载

//main.js
require([moduleA,moduleB,moduleC],function(moduleA,moduleB,moduleC){
    //coding
});
require([jQuery,underscore,backbone],function($,_,Backbone){
    //coding
});

AMD模块的写法
必须用define()函数来定义,如果一个模块不依赖其他模块,可以直接定义在define中
exp math模块

//math.js
define(function(){
    var add=function(a,b){
        return a+b;
    };
    return{
        add:add;
    };
});
加载方法如下
//main.js
require(['math.js'],function(math){
    return math.add(1,1);
});

你可能感兴趣的:(JS模块化编程2---AMD规范)