Javascript编程模式（JavaScript Programming Patterns）Part 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>