JavaScript编程模式:模块的力量(1)(2)
紧密增生
虽然松散增生很牛叉,但是这对你的模块有一定的限制。最重要的是你不能安全的重载(override)你的模块属性.你也不能在初始化的时候就使用模块的属性。紧密增生包含一个加载顺序,但是允许重载(override).例子:
- var MODULE = (function (my) {
- var old_moduleMethod = my.moduleMethod;
- my.moduleMethod = function () {
- // 重载方法,可通过old_moduleMethod调用旧的方法
- };
- return my;
- }(MODULE));
这样我们重载(override)了MODULE.moduleMethod,但如果需要,仍可保持对原方法的引用。
- Cloning and Inheritance 克隆和继承
- var MODULE_TWO = (function (old) {
- var my = {},
- key;
- for (key in old) {
- if (old.hasOwnProperty(key)) {
- my[key] = old[key];
- }
- }
- var super_moduleMethod = old.moduleMethod;
- my.moduleMethod = function () {
- //在克隆里重载方法,通过super_moduleMethod接入父级(super)
- };
- return my;
- }(MODULE));
这个模式可能是最灵活的选择。他允许一些neat compositions。这会带来一些灵活性上的代价。
跨文件私有状态
将一个模块划分到多个文件的限制之一是每个文件保持它自己的私有状态,而且不能解接入其他文件的私有状态。这是可以解决的,下面的例子用松散增生模块在多个增生之间保持私有状态:
- var MODULE = (function (my) {
- var _private = my._private = my._private || {},
- _seal = my._seal = my._seal || function () {
- delete my._private;
- delete my._seal;
- delete my._unseal;
- },
- _unseal = my._unseal = my._unseal || function () {
- my._private = _private;
- my._seal = _seal;
- my._unseal = _unseal;
- };
- // 持久的接入 _private, _seal, 和 _unseal
- return my;
- }(MODULE || {}));
任何文件都可以对他们的局部变量_private设属性,并且设置对其他的文件也立即生效。一旦这个模块加载结束,应用会调用 MODULE._seal()"上锁",这会阻止外部接入内部的_private。如果这个模块需要再次增生,应用的生命周期内,任何文件都可以调用_unseal() ”开锁”,然后再加载新文件。加载后再次调用 _seal()”上锁”。
子模块
我们最后的高级模式是最简单的,有很多好例子来创建子模块,就像创建一个普通的模块:
- MODULE.sub = (function () {
- var my = {};
- // …
- return my;
- }());
尽管这很明显,但我认为还是值得加进来的,子模块具有一般模块所有的高级能力,包括增生和私有状态。
总结
大多数高级模式可以与其他的互相组合形成有用的模式。如果让我来设计一个复杂应用的架构,我会组合使用loose augmentation, private state, 和 sub-modules.
这里我并没有研究性能问题。但是我想顺便提一句:模块模式效率很好。代码量可以更少,使加载代码更快。使用 loose augmentation允许简单的非阻碍式并行加载,这更可以提升下载的速度。初始化时间可能比其他方法要慢,但是这是值得的。
最后,这里有个sub-module动态的把自己加载到父模块去(如果没有则创建)。为了简洁,这里没有包含private state。这段代码允许一个复杂的大型分层代码库并行的加载自己和它的子模块:
- var UTIL = (function (parent, $) {
- var my = parent.ajax = parent.ajax || {};
- my.get = function (url, params, callback) {
- // ok, so I’m cheating a bit
- return $.getJavaScriptON(url, params, callback);
- };
- // etc…
- return parent;
- }(UTIL || {}, jQuery));
原文链接:http://www.douban.com/group/topic/10456277/
- 上一篇:DOM模型入门手册
- 下一篇:JavaScript DOM文档遍历实战(1)






