prototype1.5 分析之Element:

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");只是需要知道两次调用$()所进行的逻辑路径不同
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值