prototype Element学习笔记(篇一)


Posted in Javascript onOctober 26, 2008

先说一下Element对DOM扩展的技术思路,我也是看了一天的代码,这才有了点心得。
使用prototype,我们最常用的莫过于$('div1')之类的代码。从而获得扩展后的element对象,然后,我们就可以用它的各种扩展出来的方法了,如:
$('div1').addClassName('loading').show();
所以,我们研究Element的扩展正应当以此为入口。
function $(element) {
if (arguments.length > 1) {
for (var i = 0, elements = [], length = arguments.length; i < length; i++)
elements.push($(arguments[i]));
return elements;
}
if (Object.isString(element))
element = document.getElementById(element);
return Element.extend(element);
}
这个函数一个巧妙的递归就可以处理多个参数的情况,实在令我赞叹啊。代码中的关键是:Element.extend(element),在extend之前,element还仅仅是一个普通的DOM对象,extend之后就被扩展了,可见,秘密就在extend之中。
既然是Element.extend(element),那么,我们当然不能单独去研究extend,还是得先了解一下Element是何物。
(function() {

var element = this.Element;

this.Element = function(tagName, attributes) {

attributes = attributes || { };

tagName = tagName.toLowerCase();

var cache = Element.cache;

if (Prototype.Browser.IE && attributes.name) {

tagName = ' <' + tagName + ' name="' + attributes.name + '">';

delete attributes.name;

return Element.writeAttribute(document.createElement(tagName), attributes);

}

if (!cache[tagName]) cache[tagName] = Element.extend(document.createElement(tagName));

return Element.writeAttribute(cache[tagName].cloneNode(false), attributes);

};

Object.extend(this.Element, element || { });
}).call(window);
这种代码比较有个性,基本结构是:(function(){……}).call(window);所以,看到这个结构,就要晓得,省略号部分出现的this都是指向window的。
var element=this.Element;这行不难理解,但是,关键是this.Element这时还没有被定义。后面则是定义一个类:window.Element类,它有两个参数:tagName、attributes。它的作用就是创建一个元素,并把一个纯洁的指定标签对应的DOM对象放入缓存。创建元素后,并且写入指定的属性值。这儿要提醒一下:
writeAttribute、readAttribute这两个函数功能显然,读、写属性,但是,它的代码并不简单啊,它的复杂性主要源于不同的浏览器中,读、写属性的方法的不同。
这是Element类的构造函数的定义,它之后的Element.cache = { };缓存,什么的缓存,不大好描述,各种标签的纯洁版DOM元素对象的缓存?这话说得太恶心了。后面紧跟着就是一个:Element.Methods={……},在这里,几乎定义了所有的扩展方法。这里的扩展方法都有一个特征,代码中没有一个用this的,都是老老实实传进去一个element引用。这是一个伏笔,为什么要定义成这样,是有原因的。且容后交待。
现在Element大概说了一下,就得讲一讲Element.extend了。
Element.extend = (function() {

if (Prototype.BrowserFeatures.SpecificElementExtensions)

return Prototype.K;

var Methods = { }, ByTag = Element.Methods.ByTag;

var extend = Object.extend(function(element) {

if (!element || element._extendedByPrototype ||

element.nodeType != 1 || element == window) return element;

var methods = Object.clone(Methods),

tagName = element.tagName, property, value;

// extend methods for specific tags

if (ByTag[tagName]) Object.extend(methods, ByTag[tagName]);

for (property in methods) {

value = methods[property];

if (Object.isFunction(value) && !(property in element))

element[property] = value.methodize();

}

element._extendedByPrototype = Prototype.emptyFunction;

return element;

}, {

  refresh: function() {

// extend methods for all tags (Safari doesn't need this)

if (!Prototype.BrowserFeatures.ElementExtensions) {

Object.extend(Methods, Element.Methods);

Object.extend(Methods, Element.Methods.Simulated);

}

}

});

extend.refresh();

return extend;
})();
第一行的原理我不大肯定,不说,下面的代码看似复杂,待我抽出它的大概结构来:
var extend=Object.extend(function(element){……},{refresh:function(){……}});
extend内,第一个函数作用是从XXXX.Methods中获取方法,并复制到本element中。这儿主要基于这样的考虑:
一、元素如果是一个Form,就得从Form.Methods取方法
二、元素如果是表单内的可输入元素,就得从Form.Element中取方法
三、所有元素都应当从Element.Methods中取得通用方法(后面的refresh所考虑的)。
也就是说,这儿要考虑多种情况,本来应当是个if语句的事,但是,这儿巧妙地设计了一个Element.Methods.ByTag。从而解决了这个问题。
if (Object.isFunction(value) && !(property in element))
element[property] = value.methodize();
如果Methods中的成员不是函数或者函数在element中已存在,则不会覆盖。这儿到了关键了,那个value.methodize(),这时,前面的伏笔生效了,methodize的作用就是把当前调用者传递进方法。且作为第一个参数传入。它的使用方法一般是:
obj.methodname=functionname.methodize();
这样,调用时,obj对象就会作为第一个参数传入functionsname这个函数。
到此为止,这个extend函数中的大概思路应当清晰了,现在还有一个问题没有清楚:根据元素的tagName来获得应当从哪个Methods获得扩展,那么,我们有必要了解一下ByTag的详情,查找一下,找到了:
Object.extend(Element.Methods.ByTag, {
"FORM": Object.clone(Form.Methods),
"INPUT": Object.clone(Form.Element.Methods),
"SELECT": Object.clone(Form.Element.Methods),
"TEXTAREA": Object.clone(Form.Element.Methods)
});
ok,差不多就这样了。

Javascript 相关文章推荐
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 #Javascript
在html页面中包含共享页面的方法
Oct 24 #Javascript
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 #Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 #Javascript
checkbox 多选框 联动实现代码
Oct 22 #Javascript
javascript网页关闭时提醒效果脚本
Oct 22 #Javascript
javascript Select标记中options操作方法集合
Oct 22 #Javascript
You might like
PHP DataGrid 实现代码
2009/08/12 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vue 组件简介
2020/07/31 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python 文件管理实例详解
2015/11/10 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
python抓取网页中链接的静态图片
2018/01/29 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python代码实现猜拳小游戏
2020/11/30 Python
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
老干部工作汇报材料
2014/10/28 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript