前面介绍过JS中的namespace, 看起来好像我们已经成功解决了全局空间冲突的问题了。 但前面提到的方法有一个缺点——我们无法限制对方法和变量的访问,他们都是公开的。另一个不够优雅的地方就是引入了大量的this和prototype声明,略显繁琐。今天要讲的这个设计模式提供了一种易读的方法解决了以上问题,也是JS中最常用的设计模式之一。
让我们先来看一个看起来很奇怪的函数:
(function() {
// some code
})();
这个有许多括号的函数叫做立即调用函数表达式IIFE,其含义就是声明一个函数并立即执行该函数。为什么我们要如此大费周章的弄一个立刻执行的函数呢?回顾一下JS的基础知识,我们知道JS中并没有block scope这个概念,只有function才拥有自己的 scope。因此IIFE实际上创建了一个封闭的scope,用来模拟private scope。
对前面提到的namespace稍作修改:
var MODULE = (function() {
// some code
})();
可得到一个名为MODULE的私密封装空间, 外界无法访问该空间内部。 这里为了提高可读性,用大写声明模块。
如果我们在MODULE内部有一个叫做privateMethod的函数:
var MODULE = (function() {
var privateMethod = function() {
};
})();
外界无法用类似MODULE.privateMethod()这样的手段访问该函数, 我们成功创建了一个private method!同理,我们也可以创建private variable。
当我们创建了封闭的私密空间后,该空间对外界而言就是一个看不见内部构造的黑盒。但如果这个黑盒不能给我们提供服务,他就失去了存在的意义。为了给外界提供服务,我们还需要给这个黑盒子设置一组借口。就好比插座, 我们虽然看不到埋在墙里的部分是什么,但我们知道只要用适配的插头接入插座, 就可以得到一定标准的电流来驱动电器。
Module Pattern中的接口由return实现:
var MODULE = (function() {
return {
publicMethod: function() {
}
};
})();
return返回一个对象字面量,这个对象字面量就是外界可访问的接口 : MODULE.publicMethod();
该接口可包含多个方法,这些方法可以访问private variable和private function:
var MODULE = (function() {
var _privateName = '';
var privateMethod = function() {
};
return {
publicGetName: function() {
return _privateName;
},
publicOne: function() {
},
publicTwo: function() {
}
};
})();
于是一个几乎完整的private scope就诞生了。在这里不得不佩服JS的前辈们,能在这么贏弱的语法上硬是搭建出了相对完善的语言结构。
上面这个模式已近完整,可应对绝大部分情况了。但我们还可以跟前面讲过的namespace结合起来,让return部分更清晰明了:
var MODULE = (function() {
var publicObject = {};
var privateMethod = function() {};
publicObject.methodOne = function() {};
publicObject.methodTwo = function() {};
return publicObject;
})();
通过将借口的方法整合进返回对象中,return语句现在简洁了许多。另外也可以不返回对象,而是先声明方法,然后返回公共方法的引用:
var MODULE = (function() {
var privateMethod = function() {};
var methodOne = function() {};
var methodTwo = function() {};
return {
methodOne: methodOne,
methodTwo: methodTwo
};
})();
就我个人而言,我一般采用后两种方法。若接口中方法较少教简单,也可以采用第一种方法。
此外,module 也可以接收参数:
var MODULE = (function (param) {
// some code
})(param);
甚至接收另一个module作为参数:
var ModuleTwo = (function (Module) {
// access to `Module`
})(Module);
于是你会看到许多看起来不可思议又精妙绝伦的module pattern代码,就留给各位自己去探索吧。
网友评论