prototype1.5 分析之Element:

最新推荐文章于 2025-09-19 10:10:46 发布

最新推荐文章于 2025-09-19 10:10:46 发布 · 144 阅读

文章标签：

#prototype element $()

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了Prototype JavaScript框架中的关键概念和技术实现细节，包括Element的创建与扩展、常用方法如toggle的功能实现，以及Object继承的具体实现方式。通过本文可以深入理解Prototype框架的工作原理。

1、创建Element:
   if(!window.Element)
      var Element = new Object();
   此语法等效与：var Element = Element ||new Object();

2、Element.Methods = {
      visible:{ //       },
      toggle:{
      },
      hide:{
      }
   }
3、分析一下Methods中的一个有代表性的方法toggle，其实现如下：
   toggle:function(){
      for(var i = 0;i <arguments.length;i++){       
         var element = $(arguments[i]);
         Element[element)?'hide':'show'](element);
      }
   }
在toggle方法中我们注意到Element.visible这种调用形式，但是在什么时候定义了Element的visible方法呢？
处？我们知道如果要调用处的visible的话应该是如下形式的：
   Element.Methods.visible(...);
这里之所以使得Element具有visible方法的原因还是extend的作用，从源代码中我们可以发现:
   Object.extend(Element, Element.Methods);
   这也是1.5与以前版本的不同,在1.4的版本中，处理形式为：
   Object.extend(Element, {
      visible: function(element) {
      return $(element).style.display != 'none';
      }, 
当然原理是一样的，但1.5引入了Methods使得概念更为清晰  
4 、Object继承的实现：复制属性
    Object.extend = function(destination, source) {
        for (var property in source) {
           destination[property] = source[property];
        }
        return destination;
    }
5、辅助方法分析
   $()
   定义为：function $() {
             var results = [], element;
             for (var i = 0; i < arguments.length; i++) {
                 element = arguments[i];
                 if (typeof element == 'string'){
                    element = document.getElementById(element);
                    results.push(Element.extend(element));
                 }
             return results.length < 2 ? results[0] : results;
          }
     此方法使用arguments来得到方法的参数，其基本原理是document.getElementById(idname);如果传递进来的
     参数不是string类型的话，则返回其本身，否则，调用getElementById方法，因此我们可以按照如下的方式使用：
     表单：<form id="f1">
          $(f1) <==>document.getElementById("f1");
          $($(f1))<==>document.getElementById("f1");只是需要知道两次调用$()所进行的逻辑路径不同