我试图使用这个
class plugin在JQuery中重写一个Mootools工具提示类.当我的类被实例化时,我将事件监听器附加到目标链接,这将淡出工具提示.
在事件回调中,JQuery将关键字“this”分配给事件的目标,所以为了保持对类的属性的引用,我使用apply()来设置“this”来表示类实例.这显然是Mootools的handy bind()函数的JQuery中的对应项.
不幸的是当我使用apply()我失去了回调的事件参数.例如,在这一点我得到一个“e是未定义”的错误在第二行.
this.target.bind('click',function(e){
e.preventDefault();
var tip = this.opts.tip;
tip.fadeOut(500,function(){
tip.bind('click',function(){
showing = false;
})
});
}.apply(this))
我在这里错过了一个招数吗？有人知道这个问题吗？
谢谢
弗雷德
解决方法
TBH,mootools .bind,你称之为ES5中的Function.bind,并且可以在支持js 1.8.5规范的浏览器中本地使用. MooTools只是增强了没有它的浏览器,但是让本机实现保留在原型上(如果有的话).
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
你可以很容易的将它作为一个Function.prototype.bind装饰器来实现,如果不能在本地使用它,就像上面的例子那样使用它：
// Function.prototype.bind polyfill
if ( !Function.prototype.bind ) {
Function.prototype.bind = function( obj ) {
if(typeof this !== 'function') // closest thing possible to the ECMAScript 5 internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
var slice = [].slice,args = slice.call(arguments,1),self = this,nop = function () {},bound = function () {
return self.apply( this instanceof nop ? this : ( obj || {} ),args.concat( slice.call(arguments) ) );
};
bound.prototype = this.prototype;
return bound;
};
}
正如你所看到的,它比一个简单的.apply / .call有一点更多的参与
需要考虑的一件事是,如果您需要使用绑定,或者您可以保存参考.
例如.
var self = this;
this.target.bind("click",function(e) {
var tip = self.opts.tip;
});
这样做比功能绑定还要小.它也为您提供了一个正确的引用,作为触发元素(event.target === this).你会发现这个模式在mootools-core中比bind一般 – 尽管如果要将事件分配给类方法,通常需要绑定,例如：
this.element.addEvents({
click: this.showTip.bind(this),mouseleave: this.hideTip.bind(this)
});
在这种情况下,保存引用将无法正常工作,但您可以将其重写为
var self = this;
this.element.addEvents({
click: function(e) {
self.showTip(e);
}
});
一个jQuery特定的实现是代理 – http://api.jquery.com/jquery.proxy/