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 JSON的解析方式
Jul 25 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 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代码 适用于登陆页面制作
2016/08/17 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
招商专员岗位职责
2014/02/08 职场文书
行政办公室岗位职责
2014/03/18 职场文书
公司担保书格式范文
2014/05/12 职场文书
爱护花草树木的标语
2014/06/11 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
店铺转让协议书
2015/01/29 职场文书
运动会运动员赞词
2015/07/22 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
解析Java异步之call future
2021/06/14 Java/Android
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
golang生成vcf通讯录格式文件详情
2022/03/25 Golang