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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 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
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
python求众数问题实例
2014/09/26 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python3对接mysql数据库实例详解
2019/04/30 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
灰雀教学反思
2014/04/28 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
家长通知书家长意见
2015/06/03 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python