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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
javascript实现2048游戏示例
May 04 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
jQuery ajax应用总结
Jun 02 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
vue v-for 使用问题整理小结
Aug 04 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP 中常量的知识整理
2017/04/14 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
javascript时间差插件分享
2016/07/18 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
vue实现评论列表功能
2019/10/25 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
Html5 localStorage入门教程
2018/04/26 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
美国折扣网站:jClub
2017/08/07 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
采购主管岗位职责
2014/02/01 职场文书
举起手来观后感
2015/06/09 职场文书
获奖感言怎么写
2015/07/31 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python