Javascript编程模式，JavaScript Programming PatternsPart 2.(高级篇
- 模块编程模式的启示(Revealing Module Pattern)
- 客户端对象（Custom Objects）
- 懒函数定义（Lazy Function Definition）
Christian 不喜欢module pattern，并对此编程模式进行了研究.在此基础上想出了一些新的东西他称之为 Revealing Module Pattern. 正如其名, 这种模式来源于Module Pattern, 但相比之下结构感更强且利于理解,尤其是在开发团队中将自己的代码移交给别人更容易上手.
首先，他还是一种基础的function定义与回调:
var anchorChange4 = function () {}();其次,定义属性与方法时我们不用花太多的时间去在意 他们是否是 private 或者 public:
// this will be a private property
var config = {
colors: [ "#F63", "#CC0", "#CFF" ]
}
// this will be a public method
var init = function () {
var self = this;
}
// assign reference to current object to "self"
// get all links on the page
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = config.colors[i];
anchors[i].onclick = function () {
self.changeColor(this, this.color);
// this is bound to the anchor object
return false;
};
}
// this will be a public method
var changeColor = function (linkObj, newColor) {
linkObj.style.backgroundColor = newColor;
}现在我们说一下核心部分.切换到 Module Pattern模式下, 你已经注意到了在结束时return 语句中包含public 属性和方法. 在 Revealing Module Pattern模式下, 你只需要放入共享的属性与方法即可:
return {
// declare which properties and methods are supposed to be public
init: init,
changeColor: changeColor
} 只有2个公共属性需要初始化一个是 init (负责编译前的准备工作) 和 changeColor (负责函数调用时的 clicked事件). 这样代码保持了整洁:
// revealing module pattern
var anchorChange4 = function () {
// this will be a private property
var config = { colors: [ "#F63", "#CC0", "#CFF" ] }
// this will be a public method
var init = function () {
var self = this;
}
// assign reference to current object to "self"
// get all links on the page
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = config.colors[i];
anchors[i].onclick = function () {
self.changeColor(this, this.color);
// this is bound to the anchor object
return false;
};
}
// this will be a public method
var changeColor = function (linkObj, newColor) {
linkObj.style.backgroundColor = newColor;
}
return {
// declare which properties and methods are supposed to be public
init: init,
changeColor: changeColor
}
} ();与所有的编程模式一样, 你需要在script代码快中调用:
<script type="text/javascript">
anchorChange4.init();
</script>客户端对象（Custom Objects）
创建一类对象在面向对象的语言中很常见. 但是Javascript与面向对象相比较是基于对象的语言. 在JavaScript中, 在接受参数创建对象时你必须调用 function 构造器 .你不能像java 一样有类与子类（ Java ）.
首先, 我们需要为我们的对象创建函数构造器:
var anchorChanger = function () {};我们初始化了一个空的函数构造器,稍后为对象添加 init 方法.
使用原型, 对我们的对象可以添加各种属性且可以访问. 最后设置了 3 属性, 也就是: config, changeColor and init.
anchorChanger.prototype.config = {
colors: [ "#F63", "#CC0", "#CFF" ]
}
anchorChanger.prototype.changeColor =
function (linkObj, newColor) {
linkObj.style.backgroundColor = newColor;
};
anchorChanger.prototype.init = function () {
var self = this;
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = self.config.colors[i];
anchors[i].onclick = function () {
self.changeColor(this, this.color);
return false;
};
}
};Mike West指出, 使用原型的效率会很高.他不必每次都创建对象访问对象.
// custom object constructor
var anchorChanger = function () {
this.init();
};
anchorChanger.prototype.config = {
colors: [ "#F63", "#CC0", "#CFF" ]
}
anchorChanger.prototype.changeColor = function (linkObj, newColor) {
linkObj.style.backgroundColor = newColor;
};
anchorChanger.prototype.init = function () {
var self = this;
}
// get all links on the page
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
for (var i = 0; i < size; i++) {
anchors[i].color = self.config.colors[i];
anchors[i].onclick = function () {
self.changeColor(this, this.color);
return false;
};
} ;在页面中我们只需要声明一个 anchorChanger的接口即可:
<script type="text/javascript"> new anchorChanger(); </script>
惰性函数定义（Lazy Function Definition）
Peter Michaux 提出了 Lazy Function Definition 模式. 当你在页面中反复计算、调用函数多次时这种模式很实用.在这种模式下你要确定你的方法只做了一次,且仅仅做了一次.例子中 Peter 给出了在不同浏览器宿主环境不同而处理滚动的功能也不同.在不同浏览器模型中, 当函数在第一时间被调用时,滚动功能也不同（此处参看lazy-function-definition-pattern）.
对于我们的任务而言,这种模式没有提供任何的优势,因为在这里我们没有繁重复杂的计算. 我们仅仅是展示一下这种模式是如何工作的:
var anchorChange5 = function () {};像别的模式一样添加一些功能,代码如下:
// define configuration
var config = {
colors: [ "#F63", "#CC0", "#CFF" ]
};
// get all links
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
// loop through anchors and attach events
for (var i = 0; i < size; i++) {
anchors[i].color = config.colors[i];
anchors[i].onclick = function ()
{ anchorChange5().changeColor(this, this.color);
return false;
};
} 以上代码确保在调用时运行一次,所以不需要包含随后调用函数的性质.在 Lazy Function Definition 模式,需要从新定义函数声明:
// redefine function so that it only holds the changeColor function
anchorChange5 = function () {
return {
changeColor: function (linkObj, newColor) {
linkObj.style.backgroundColor = newColor;
}
};
};所以懒函数定义模式代码如下:
// lazy function definition
var anchorChange5 = function () {
// define configuration
var config = { colors: [ "#F63", "#CC0", "#CFF" ] };
// get all links
var anchors = document.getElementsByTagName("a");
var size = anchors.length;
// loop through anchors and attach events
for (var i = 0; i < size; i++) {
anchors[i].color = config.colors[i];
anchors[i].onclick = function () {
anchorChange5().changeColor(this, this.color);
return false;
};
}
// redefine function so that it only holds the changeColor function
anchorChange5 = function () {
return { changeColor: function (linkObj, newColor) {
linkObj.style.backgroundColor = newColor;
} };
};
};发生了什么:
- anchorChange5 在页面上调用和定义 config 变量与 anchors集合
- 每一个 anchor会被粘贴上一个onclick事件, 当被触发调用 changeColor方法并且从新声明 anchorChange5 function
- 在此之后, anchorChange5会从新声明并可以访问到只持有 changeColor 方法
在body之间，要调用 anchorChange5 :
<script type="text/javascript">
anchorChange5();
</script>