amd模块定义模式

谈及前端模块化,自然会想到AMD(异步模块定义)和CMD(通用模块定义),这里我着重谈一下AMD的相关内容

AMD的整体目标是提供模块化的JavaScript解决方案,以便开发人员使用。

关于AMD有两个关键概念是值得我们注意的,它们是用于模块定义的define方法和用于处理依赖加载的require方法。使用以下方式,define用于定义已命名或未命名模块。

define(
module_id//可选
[dependencies]//可选
function(){}//实例化模块或对象的函数
);

module_id是一个可选参数,当遗漏这个参数时,我们程这个参数是匿名的。
回到define方法,dependencies参数表示我们定义模块所需的依赖数组,第三个参数适用于执行实例化模块的函数。示例如下:

define(
"myModule",
['foo','bar'],
function (foo,bar){
var myModule={
fn:function(){
console.log("hello");
}
};
return myModule;
}
)
另外一种方式,return直接返回要暴露的内容。
define(
"myModule",
['math', 'graph'],
function(math, graph) {
return {
plot: function(x, y) {
return graph.draw(math.grid(x, y))
}
}
};
})
那如果我们希望动态获取依赖呢,这样做依赖的加载会不会更灵活高效。
define(function(require){
var isReady=false;
var foobar;
require(["foo","bar"],function(foo,bar){
isReady=true;
foobar=foo()+bar();
});
//依然返回一个模块
return{
isReady:isReady;
foobar:foobar;
}
});
模块定义好以后,如何加载使用呢,这里有curl.js和RequireJS两种类型的加载器。
以最熟悉的requireJS为例,加载上面定义好的myModule模块

require(["app/myModule"],function(myModule){

var module=new myModule();
module.fn();


})
为何AMD是编写模块化JavaScript的更好选择

·对于如何完成灵活模块的定义提供了明确的建议

·比很多人依赖的现有全局命名空间和<script>标签解决方案都更加简洁。有一种简洁的方式可以声明可能的独立模块和依赖。

·封装模块的定义,帮助我们避免全局命名空间被污染

·如果需要,可以延迟加载脚本
————————————————
版权声明:本文为CSDN博主「u013344815」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u013344815/java/article/details/66475851

posted @ 2020-06-16 11:45  全情海洋  阅读(362)  评论(0编辑  收藏  举报