作者：Truly
日期：2007.8.3
上篇文章介绍了属性，或者说是闭包，本文讨论它的一个实际应用。
由于将变量封装为方法，这样可以更好的保护私有变量，同时，我们也可以方便的监视它值的变化。
先看如下代码，部分代码来自于《Action in Ajax》
<html>
<head>
<title>Test5</title>
</head><body>
<span id='test'>Click Me!</span>
<input type=button onclick="document.getElementById('test').value = 2" value='set'>
<script>
function Element(value, domEL){
this.domEl = domEL;
this.value = value;
this.domEl.buttonObj = this;
this.domEl.onclick=this.clickHandler;
}
Element.prototype.clickHandler
=function(){我们使用属性方法来改造上面的代码，得到：
<html>
<head>
<title>Test6</title>
</head><body>
<span id='test'>Click Me!</span><input type=button onclick="document.getElementById('test').setValue(2)" value='set'>
<script>function Element(value, domEL){
this.domEl = domEL;
this.domEl.getValue = function() { return value; };
this.domEl.setValue = function(newValue) { value = newValue; };
this.value = value;
this.domEl.buttonObj = this;
this.domEl.onclick=this.clickHandler;
}
Element.prototype.clickHandler
=function(){有了上面的基础，我们就很方便的实现对DOM元素的onValueChange事件进行监听：
<html>
<head>
<title>Test7</title>
</head><body>
<span id='test'>Click Me!</span>
<input type=button onclick="document.getElementById('test').setValue(2)" value='set'>
<script>
function Element(value, domEL){
this.domEl = domEL;
this.domEl.getValue = function() { return value; };
this.domEl.setValue = function(newValue) { var isChange=false || value!=newValue; value = newValue; if(isChange && this.onValueChange) this.onValueChange(); };
this.domEl.buttonObj = this;
this.domEl.onclick=this.clickHandler;
this.domEl.onValueChange=this.valueChangeHandler;
}
Element.prototype.clickHandler
=function(){同时通过本文的示例，更加清晰的认识了使用属性或者说闭包方式带给我们的好处。
enjoy code！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。