amd模块定义模式

本文主要是介绍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>标签解决方案都更加简洁。有一种简洁的方式可以声明可能的独立模块和依赖。

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

·如果需要，可以延迟加载脚本

这篇关于amd模块定义模式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---