afcn0

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

afcn0 — Thu, 18 Oct 2007 22:47:59 +0800

作者: afcn0 链接：http://afcn0.javaeye.com/blog/133291 发表时间: 2007年10月18日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

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版本
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

JavaScript原形链多继承函数

afcn0 — Tue, 16 Oct 2007 18:00:00 +0800

作者: afcn0 链接：http://afcn0.javaeye.com/blog/132590 发表时间: 2007年10月16日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

JavaScript由于对象使用原形继承,原形链只能有一条,所以一般不能实现多继承,就算是多继承,也是把别的构造函数内容拿过来,修改一下context在原来构造函数基础上继续执行,我写了个自认为可以实现多继承的函数

Object.extend = function(destination, source) {
  for (var property in source)
    destination[property] = source[property];
  return destination;
};
Object.prototype.mix=function(sub){
sub.call(this);
var temp=Object.extend({},sub.prototype);
temp.__proto__=this.__proto__;
this.__proto__=temp
}

使用:

>>> function test(){this.a=123}   
>>> test.prototype.b=345  
345  
>>> a={}   
Object   
>>> a.mix(test)   
>>> a   
Object a=123 b=345  
>>> function test2(){this.c=678}   
>>> test2.prototype.test3=789  
789  
>>> a.mix(test2)   
>>> a   
Object a=123 c=678 test3=789 b=345

其中定义了空对象a,后分别继承自test和test2构造函数,都有prototype继承,并且对于原构造函数无侵入影响

>>> test2.prototype   
Object test3=789  
>>> test.prototype   
Object b=345

主要是利用closure封闭住__proto__原原形上级,中间使用temp中转,各位高手看看这样可行吗,我想不出来不使用__proto__实现的方法
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

如何跨越原形链调方法

afcn0 — Tue, 16 Oct 2007 16:48:09 +0800

作者: afcn0 链接：http://afcn0.javaeye.com/blog/132555 发表时间: 2007年10月16日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

我们知道js对象很多属性方法都不是自己的，也就说都不是早绑定上去的，比如"aa"有很多方法，当然它是基本类型，不是对象，但是js由于有String Boolean Number这三个影子wrapper所以基本类型也可变对象，与本文无关，本文讲的是怎么跨原形链调用函数，比如

a=[1,2,3];alert(a);

看到的是1,2,3，其实这个不是a对象的toString方法，是在Arry.prototype.toString上面的，这个我们也知道，但是现在我就是想实现不走它，而调用Object.prototype.toString，可能有朋友说是不是delete(Array.prototype.toString)不是就可以了，当然可以了，但是你删除了其他数组的toString方法，&^%$*&^，当然不可以，所以，我想到了个办法，其实无非就是改变context了，toString吗，关键就是谁toString，所以

a=[1,2,3];alert(Object.prototype.toString.call(a));

很不错吧，但是写这文的时候，我又想到了个办法，就是

a=[1,2,3];a.toString=Object.prototype.toString;alert(a)

晚强绑定，看着很不错，其实跨越原形链最好的解决办法还是象最后不走原形链，后者象我第一个解决办法就是自己手动找函数手动指定context，完美,原形链无处不在，不管字符串的各种方法，还是数组的push pop slice splice，都是原形链，如果说学习js不懂原形链，太遗憾了
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐