prototype里Form.Element.focus(element) 方法是否实现错误？

最新推荐文章于 2025-03-11 14:36:25 发布

最新推荐文章于 2025-03-11 14:36:25 发布 · 261 阅读

文章标签：

#prototype #JavaScript #框架 #编程 #CSS #ViewUI

博客作者在使用Prototype.js库时发现了Form.Element.focus方法的一个潜在bug：该方法返回字符串而非HTMLElement实例，导致无法进行链式调用。作者给出了修改示例。

今天上午没事做，在公司拿着买到的 <<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，所以拿出来供大家谈论一下。