Truly
写精彩代码 品暇逸人生
posts - 91,comments - 425,trackbacks - 55

作者: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(){
var buttonObj = this.buttonObj;
alert(buttonObj.value);
}

var b = new Element(1, document.getElementById('test'));
</script>

</body>
</html>

运行这个页面,点击ClickMe的时候返回来我们初始化的值1,而set之后,再次点击,却没有得到期望的值2。

我们使用属性方法来改造上面的代码,得到:
<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(){
var buttonObj = this.buttonObj;    
alert(buttonObj.domEl.getValue());
}

var b = new Element(1, document.getElementById('test'));
</script>

</body>
</html>

打开页面,点击Click Me,然后点击set按钮,再次点击Click Me,这次我们得到了正确的结果,方法的好处就在于此。

有了上面的基础,我们就很方便的实现对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(){
var buttonObj = this.buttonObj;    
alert(buttonObj.domEl.getValue());
}
Element.prototype.valueChangeHandler
=function(){
var buttonObj = this.buttonObj;
alert('value is changed to '
+ buttonObj.domEl.getValue());
}

var b = new Element(1, document.getElementById('test'));
</script>

</body>
</html>

这样当我们点击set按钮改变dom元素value的时候,则激发其onValueChange事件,并且此方法可以应用到所有的DOM元素上,更加方便实现MVC模式和Obsever模式。

同时通过本文的示例,更加清晰的认识了使用属性或者说闭包方式带给我们的好处。

enjoy code!
posted on 2007-08-03 22:31  Truly  阅读(9140)  评论(7编辑  收藏