Prototype修改版本，比jQuery还好用的事件注册器

2007-10-18

Prototype非常强大，但是jQuery也非常好用，Prototype当然也象jQuery学习了，比如$$的css选择器，可是使用起来依然不是那么方便，并且随着1.60出现，Prototype库越来越大，我有个想法，想在一定程度上修改Prototype，增加一些有用的功能，去掉一些没用的东西，第一个版本，我扩展了事件的注册机制
原本在Prototype里面如果想注册事件，必须这样

$("id").observe("click",function(){alert("hello world")})

注册多个元素一般这样

$$("div img").each(function(node){node.observe("click",function(){alert("hello")})})

相当的麻烦，那我扩展出了$E函数，专门接受特殊事件伪类选择器添加事件处理函数，可以这样用

$E("#id::click")(function(){alert("hello world")});

甚至

$E("#id::click")("alert('hello world')");

怎么样，简单吧，其实就是原来的css选择器文本加"::"伪类标志，加事件名，比如"click",还添加了Chain.bindEvent方法，可以实现一次大量元素添加事件，比如，现在我想给很多元素添加事件，看下面代码

var target={
"#bbb::click":"alert(234);return false",
"#bbb2::mouseover":function(){alert("haha")},
"#bbb3::mouseout":"prompt()",
"input::mouseover":"confirm('eee')"
}
Chain.bindEvent(target)

这样就全搞定了，以后你所要维护的就是页面当中的一个事件参数列表了，甚至这个列表可以象css一样在各个页面当中复用，本修改版是基于1.5.11版本

chain.rar (20.8 KB)
描述: Chain 版本0.01
下载次数: 36

22:47
浏览 (1728)
评论 (6)
进入论坛
发布在 javascript研究小组圈子
相关推荐

sunfengcheng 5 小时前

我想知道上面的 Java 代码怎么加上去的，嘿嘿，是不是太菜了？？

afcn0 2007-10-20

1. 1.6 rci基本就是最后版本了,"Barring any heinous bugs, RC1 will be our last release candidate, and you can expect the final version of 1.6.0 to land in early November.
"
2.类继承经过讨论已经按照讨论结果修改了,不会再变动了
3.Hash表从写了,现在都是closure,避免与继承的属性冲突
4.自定义事件必须有namespace
看讨论,基本就是release了,当然我在建议$$最后一个参数支持context,虽然现在有select方法

afcn0 2007-10-20

确实是没考虑如何删除事件,但是,这样的写法

$E("#id::click")("alert('hello world')");

以及

var target={   
"#bbb::click":"alert(234);return false",   
"#bbb2::mouseover":function(){alert("haha")},   
"#bbb3::mouseout":"prompt()",   
"input::mouseover":"confirm('eee')"  
}   
Chain.bindEvent(target)

这样的批量注册事件,我看在语法上还是新颖的,删除事件的话,我也想用类似语法,比如

$E("#id::click")(false);

或者类似的

笨笨狗 2007-10-19

Prototype原来的写法很好啊，而且，就这句来说：

js 代码

$$("div img").each(function(node){node.observe("click",function(){alert("hello")})})

有个提高效率的技巧，调用invoke可以避免创建闭包

js 代码

$$("div img").invoke("observe","click",handler)

而且，不知道楼主考虑过没有，如果你修改了添加事件监听的api，那也该提供一个对应的删除事件监听的api吧？

所以，我还是习惯原来的写法。另外现在1.6版还未正式定下来，以后的改变可能会很大，比如类继承的设计，还是先等等再用了。比较期待新的自定义事件的功能：）

倒是对Prototype的迭代方法有点不满，怎么不传入一个处理函数，在第一次循环节点的时候处理每个节点呢？那样就不用循环两次了，所以，我写了个自己的获取某个元素子节点的方法来代替，可以在收集元素的同时对节点做处理，比如添加事件处理函数，可以查某元素的所有子节点、特定标签的子节点、第一个或者最后一个子节点，并在查找过程中处理，提高运行效率：

js 代码

var findChild = function(element,option){
var element = $(element);
var option = Object.extend({tagName:null,position:"all",iterator:null},option);
option.tagName = option.tagName ? option.tagName.toLowerCase():null;
if(option.position=="all"){
var elements = [];
if (!(element = element.firstChild)) return elements;
if(!option.tagName){
while (element){
if(element.nodeType==1){
(typeof option.iterator != "function") ? null : option.iterator(element = $(element));
elements.push(element);
}
element = element.nextSibling;
}
}else{
while (element){
if(element.nodeType==1&&element.tagName.toLowerCase()==option.tagName){
(typeof option.iterator != "function") ? null : option.iterator(element = $(element));
elements.push(element);
}
element = element.nextSibling;
}
}
return elements;
}else if(option.position=="last"){
if(!(element = element.lastChild)) return null;
if(!option.tagName){
while (element){
if(element.nodeType==1){
(typeof option.iterator != "function") ? null : option.iterator(element = $(element));
return element;
}
element = element.previousSibling;
}
}else{
while (element){
if(element.nodeType==1&&element.tagName.toLowerCase()==option.tagName){
(typeof option.iterator != "function") ? null : option.iterator(element = $(element));
return element;
}
element = element.previousSibling;
}
}
}else{
if (!(element = element.firstChild)) return null;
if(!option.tagName){
while (element){
if(element.nodeType==1){
(typeof option.iterator != "function") ? null : option.iterator(element = $(element));
return element;
}
element = element.nextSibling;
}
}else{
while (element){
if(element.nodeType==1&&element.tagName.toLowerCase()==option.tagName){
(typeof option.iterator != "function") ? null : option.iterator(element = $(element));
return element;
}
element = element.nextSibling;
}
}
}
}

赶时间写的没有做过优化，不过这个思想应该没错，实际使用中能明显看到效率改进。

afcn0 2007-10-19

对于

$E("div span::['mouseover','mouseout','click']")("dosomething()")

这样的语法,多事件同一事件处理函数,以及

$E("div span::['mouseover','mouseout','click']")("test1()","test2()","test3()")

这样的语法,多事件,多事件处理函数,各位网友认为是不是有必要呢?
另外上个例子当中使用的select语法是1.6里面的方法,这个版本里面没有

afcn0 2007-10-19

其实此版本重点就是$E函数的扩展，主要是扩展了事件伪类，毕竟jQuery除了XPath CSS也支持自己独创的比如:odd :even，那我独创个事件伪类，并且这样的代码

$E("div span::mouseover")("this.select('img').invoke('hide')")
$E("div span::mouseout")("this.select('img').invoke('show')")

也非常清晰，并且使用Chain.bindEvent通过对象列表，基本可以实现事件处理函数不用写成inline的形式，并且我还在考虑是否使用1.6 rc1里面的dom:ready进行事件注册，此版本为事件测试版本，大家看看有没有什么bug

发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

afcn0

浏览: 3536 次
性别:
来自: 天津
详细资料

搜索本博客

博客分类

全部博客 (3)

其他分类

存档

2007-10 (3)
更多存档...

评论排行榜

[什么是RSS?]

afcn0