这本书真的挺不错的,感觉以前很多不敢碰,很迷茫的问题都解决好多,看到模块化记录一下自己的理解
下面是代码:
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];
}
作用域闭包 | 55
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
代码有点乱,手动缩进一波,看起来还好主要代码
modules[name] = impl.apply( impl, deps );//意思就是改变参数执行impl这个函数
for (var i=0; i<deps.length; i++) {
deps[i] = modules[deps[i]];
}//这个循环单独看简直一脸懵逼,得结合下面的代码看,并且其中有执行顺序先执行MyModules.define( "bar", [], function() {})函数后执行MyModules.define( "foo", ["bar"], function(bar) {}),当执行第二个函数时对象中modules已经存在一个key为bar的函数,所以第二个函数才能够顺利的执行。
整体代码理解一下应该没问题,因为是第一次向js源码发起挑战,记录一下。特别不喜欢那种看不懂源码的感觉,用什么插件出错了总要弄半天,不知道从何下手的感觉特别难受。