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获取location.href的参数实例代码
Aug 02 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
js中延迟加载和预加载的具体使用
Jan 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
安装APACHE
2007/01/15 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
php 什么是PEAR?
2009/03/19 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
python简单程序读取串口信息的方法
2015/03/13 Python
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python构建基础的爬虫教学
2018/12/23 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
社区先进事迹材料
2014/05/19 职场文书
装修公司管理制度
2015/08/05 职场文书
python munch库的使用解析
2021/05/25 Python