普通Javascript对象上的jQuery.bind()事件

时间:2022-11-17 23:57:45

Is it ok to bind jQuery events to plain, non-DOM Javascript objects:

将jQuery事件绑定到普通的非DOM Javascript对象是否可以:

var myobject = {};
$(myobject).bind("foobar", function() { alert("daa"); });

$(myobject).trigger("foobar");

What are the implications for

有什么影响

  • Garbage collection (no new references created preventing object to GC'ed)

    垃圾收集(没有新的引用创建阻止对象到GC'ed)

  • Object attributes (new attributes assigned to the object)?

    对象属性(分配给对象的新属性)?

  • Performance

Some things I have noted

我注意到的一些事情

  • Event name must not conflict with a function name on the object, e.g. you cannot have function init and event named init and trigger it correclty
  • 事件名称不得与对象上的函数名称冲突,例如你不能有函数init和事件名为init并触发它correclty

2 个解决方案

#1


14  

Instead of using the jquery event system, I would implement one that mimics it using the jQuery.Callbacks method.

我将使用jQuery.Callbacks方法实现一个模仿它的方法,而不是使用jquery事件系统。

var myClass = function(){
    this._callbacks = {};
};
myClass.prototype = {
  addEvent: function(evname,callback) {
    if (!this._callbacks[evname]) {
      this._callbacks[evname] = $.Callbacks();
    }
    this._callbacks[evname].add(callback);
  },
  removeEvent: function(evname) {
    if (!this._callbacks[evname]) {
      return;
    }
    this._callbacks[evname].remove();
    //Might need this too:
    //this._callbacks[evname] = null;
  },
  triggerEvent: function(evname) {
    if (this._callbacks[evname]) {
      this._callbacks[evname].fire();
    }
  }
};
var foo = new myClass();
foo.addEvent("foo",function(){
  console.log('foo');
});
foo.triggerEvent("foo");
foo.removeEvent("foo");
// event was removed, the below line won't do anything.
foo.triggerEvent("foo"); 

http://jsfiddle.net/kEuAP/


However, to answer your question, I don't see any immediate problems with what you are doing other than it isn't documented and may change functionality from version to version (although it works in all currently available versions 1.2.6+).

但是,为了回答您的问题,除了没有记录之外,我没有看到您正在做什么的任何直接问题,并且可能会在版本之间更改功能(尽管它适用于所有当前可用的版本1.2.6+)。

#2


3  

Seeing as jQuery support alteration of object properties via animate also, this is definitely fine.

看到j​​Query也支持通过动画更改对象属性,这绝对没问题。

var obj = {'test':0}; 
var interval = setInterval(function(){console.log(obj);}, 250);
$(obj).on("fun", function(){this.test++});

$(obj).animate(
    {'test':100}, 
    3000, 
    function (){ 
        console.log(obj);
        clearInterval(interval);


        $(obj).trigger("fun")
        console.log("increment",obj); 
    }
);

//will console log {test: 1.5}, {test: 6.4} etc then {test: 100}
//and finally "interval" {test: 101}

Quickredfox's backup comment is a pretty good source too: http://forum.jquery.com/topic/triggering-custom-events-on-js-objects

Quickredfox的备份评论也是一个非常好的来源:http://forum.jquery.com/topic/triggering-custom-events-on-js-objects

#1


14  

Instead of using the jquery event system, I would implement one that mimics it using the jQuery.Callbacks method.

我将使用jQuery.Callbacks方法实现一个模仿它的方法,而不是使用jquery事件系统。

var myClass = function(){
    this._callbacks = {};
};
myClass.prototype = {
  addEvent: function(evname,callback) {
    if (!this._callbacks[evname]) {
      this._callbacks[evname] = $.Callbacks();
    }
    this._callbacks[evname].add(callback);
  },
  removeEvent: function(evname) {
    if (!this._callbacks[evname]) {
      return;
    }
    this._callbacks[evname].remove();
    //Might need this too:
    //this._callbacks[evname] = null;
  },
  triggerEvent: function(evname) {
    if (this._callbacks[evname]) {
      this._callbacks[evname].fire();
    }
  }
};
var foo = new myClass();
foo.addEvent("foo",function(){
  console.log('foo');
});
foo.triggerEvent("foo");
foo.removeEvent("foo");
// event was removed, the below line won't do anything.
foo.triggerEvent("foo"); 

http://jsfiddle.net/kEuAP/


However, to answer your question, I don't see any immediate problems with what you are doing other than it isn't documented and may change functionality from version to version (although it works in all currently available versions 1.2.6+).

但是,为了回答您的问题,除了没有记录之外,我没有看到您正在做什么的任何直接问题,并且可能会在版本之间更改功能(尽管它适用于所有当前可用的版本1.2.6+)。

#2


3  

Seeing as jQuery support alteration of object properties via animate also, this is definitely fine.

看到j​​Query也支持通过动画更改对象属性,这绝对没问题。

var obj = {'test':0}; 
var interval = setInterval(function(){console.log(obj);}, 250);
$(obj).on("fun", function(){this.test++});

$(obj).animate(
    {'test':100}, 
    3000, 
    function (){ 
        console.log(obj);
        clearInterval(interval);


        $(obj).trigger("fun")
        console.log("increment",obj); 
    }
);

//will console log {test: 1.5}, {test: 6.4} etc then {test: 100}
//and finally "interval" {test: 101}

Quickredfox's backup comment is a pretty good source too: http://forum.jquery.com/topic/triggering-custom-events-on-js-objects

Quickredfox的备份评论也是一个非常好的来源:http://forum.jquery.com/topic/triggering-custom-events-on-js-objects