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");只是需要知道两次调用$()所进行的逻辑路径不同