JavaScript AMD规范简单介绍(一)
AMD是"Asynchronous Module Definition"的缩写。意思就是"异步模块定义".
AMD定义了我们所用的模块都是是异步载入的,所以我们要将依赖模块的代码片段要放在一个回调函数中,当异步载入模块完成后(也就是此模块已可用时)触发回调函数
经常使用的AMD库有require.js、sea.js
AMD标准中定义了下面两个API
(1) require([module], callback);
(2) define([depends], callback);
require接口用来载入一系列模块,define接口用来定义并暴露一个模块
在AMD中我们js的代码都是放在require的回调中的,require函数帮我们载入依赖的模块而且处理器深层次的依赖关系(依赖的依赖等等)并在一切依赖载入完成后,将模块作为回调函数的传參,并调用回调函数.
看下面场景
我们的js代码须要B,C模块.B模块不依赖于不论什么模块,C模块依赖于D模块
![](//img-blog.csdn.net/20140826145400039?</p><p>watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29uZ3poZW5nXzc0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
require([B,C],function(B,C){ var A = {}; A.say = B.say; A.run = C.run; return A; }); B.js define([], function(){ var B = {}; B.say = function() { console.info('say hello!'); } return B; }); C.js define([D], function(D){ var C={}; c.run = function() { console.info(D.name + ' free running!'); } return C; }) D.js define([],function(){ var D={'name':'songzheng'}; return D; });
先如果一切模块都还未载入,整个载入步骤例如以下
(1)代码依赖着B、C模块,调用require载入B、C模块
(2)B模块不依赖于不论什么模块当载入成功后,回调factoryB,安装B模块
(3)在载入C模块时发现C模块依赖着D模块于是调用require载入D模块
(4)D模块不依赖不论什么模块,载入成功后,回调factoryD载入安装D模块
(5)C依赖的D模块载入成功后,回调factoryC,安装C模块
(6)全部依赖安装完成,运行回调函数
我在自己的AMD实现的步骤中加了一些日志打印,能够更清晰的看到模块的载入过程
<script type="text/javascript"> require(['Iris','cookie'], function(Iris, Cookie){ console.info(Iris); console.info(Cookie); }); </script>
posted on 2017-05-31 18:21 yjbjingcha 阅读(173) 评论(0) 编辑 收藏 举报