旧机制下的模块化编程采用的一般是独立作用域进行封装,如我们所熟悉的立即执行函数(IIFE)
(function(){
***
})()
又或者对象形式封装
var module = new Object({});
var module1 = {};
又或者宽放大模式 (本质上还是属于IIFE)
var module1 = (function (mod) {
mod.m1 = function () { console.log();}
return mod;
})(window.module1 || {});
现在化的模块机制
var MyModules = (function Manager() { var modules = {}; function define(name, deps, impl) { for(var i = 0; i < deps.length; i++) { deps[i] = modules[deps[i]]; } modules[name] = impl.apply(impl, deps); } function get(name) { return modules[name]; } return { define: define, get: get }; })(); /********************************* 这段代码的核心是 modules[name] = impl.apply(impl, deps)。为了模块的定义引入了包装 函数(可以传入任何依赖),并且将返回值,也就是模块的 API,储存在一个根据名字来管 理的模块列表中。 下面展示了如何使用它来定义模块: *********************************/ MyModules.define("bar", [], function () { function hello(who) { return "Let me introduce: " + who; } return { hello: hello }; }); MyModules.define("foo", ["bar"], function (bar) { var hungry = "hippo"; function awesome() { console.log(bar.hello(hungry).toUpperCase()); } return { awesome: awesome }; }); var bar = MyModules.get("bar"); var foo = MyModules.get("foo"); console.log(bar.hello("hippo")); // Let me introduce: hippo foo.awesome(); // LET ME INTRODUCE: HIPPO /******************** "foo" 和 "bar" 模块都是通过一个返回公共 API 的函数来定义的。"foo" 甚至接受 "bar" 的 示例作为依赖参数,并能相应地使用它。 为我们自己着想,应该多花一点时间来研究这些示例代码并完全理解闭包的作用吧。最重 要的是要理解模块管理器没有任何特殊的“魔力”。它们符合前面列出的模块模式的两个 特点:为函数定义引入包装函数,并保证它的返回值和模块的 API 保持一致。 换句话说,模块就是模块,即使在它们外层加上一个友好的包装工具也不会发生任何变化 ********************/