今天上午没事做,在公司拿着买到的 <<prototype与script.aculo.us终极揭秘>>一书看,无意中发现了一个比较有趣的问题,不知道是不是 prototype.js自己的bug,拿上来让各位鉴定一下。
参照prototype.js的官方的api文档,Form.Element.focus(element) -> HTMLElement,他的意思应该是调用这个focus()方法之后返回的是应该是一个被prototye扩张的 HTMLElement,然后可以拿着返回的对象可以继续进行链式调用。可事实上并非如此。我自己测试了一把。下面的代码给的不全。要测试的话需要自己补全。
<script type="text/javascript">
function test_focus()
{
$("clickme").observe("click",function(){
alert(Object.isString(Form.Element.focus('username')))
Form.Element.focus('username').disable().setValue("hahahaha");
});
}
document.observe("dom:loaded",test_focus)
</script>
<body>
<form id="login">
username : <input type="text" id="username" value="hehehehe"><br>
password : <input type="text" id="password"><br>
<input type="button" value="click me" id="clickme"><br>
</form>
</body>
上面的代码运行到alert()部分的时候,会提示true,也就是说他返回的是一个String,然后会报出一个Form.Element.focus("username").disable is not a function的错误。
查看prototype.js的源代码,我们看到这个方法的定义,他其实就是直接返回了传进去的element,根本就没做扩展,所以所谓的链式编程到这里就不能继续下去了。
Form.Element = {
focus: function(element) {
$(element).focus();
return element;
},
select: function(element) {
$(element).select();
return element;
}
};
我直接把它hack掉之后上面的代码就可以正常运行了
Form.Element = {
focus: function(element) {
$(element).focus();
return $(element);
},
select: function(element) {
$(element).select();
return $(element);
}
};
我不知道这是不是prototype.js的bug,我这样的修改也只能说能测试通过我写的demo,所以拿出来供大家谈论一下。