amd模块定义模式

朱雀 2022-10-01 04:54 93阅读 0赞

谈及前端模块化，自然会想到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>标签解决方案都更加简洁。有一种简洁的方式可以声明可能的独立模块和依赖。

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

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