JavaScript自定义对象公开事件的正确方式

Question

我有一个JavaScript自定义对象：

function Graph (dataType, provider){
   this.dataType = dataType;
   this.provider = provider;
}

我通过“new”关键字实例化该对象，然后将其传递给代码的其他部分，这些部分可能需要跟踪此对象属性的更改。

当修改Graph对象的属性时，我希望所有其他使用该对象的用户能够收到通知。在像C#这样的语言中，我会使用setter来引发事件。在自定义JavaScript对象中创建事件的正确方式是什么？

- user1044169

---

你是在使用 knockout 还是只是误打标签了？ - Sean Vieira

Answer 1

使用JQuery，您可以在任何时间将任何类型的事件创建并附加到您想要的任何对象上。

function Graph (dataType, provider){
   this.dataType = dataType;
   this.provider = provider;
}

var g = new Graph;

g.dataType = "whatever1";
g.provider = "whatever2";
g.event = $.Event("mywhateverEvent");
g.myOwnProperty2 = $.Event("thisisAnEventToo");

现在您可以进一步操作事件，使用以下方式对事件进行任何操作：

g.event = <whateverCodeIWant>;
g.myOwnProperty2 = <whateverCodeIwant2>

既然你似乎喜欢构造函数，你也可以这样做：

function Graph (dataType, provider, evt){
   this.dataType = dataType;
   this.provider = provider;
   this.evt = evt
}

var myevt =  $.Event("whateverEvent");
myevt = <codeTomanipulatemyEventFurtherNowIfIWantTo>;
var g = new Graph("datawhatever", "providerwhatever", myevt);
$("whateverIWant").bind(myevt); 
//or whatever other binding - it will bind to that very event
$("whateverIWant").bind(g.evt);//equivalent to above line- binds to same event object

- sajawikio

---

如果有多个代码片段想要订阅同一个对象上的同一事件，该如何处理？谢谢。 - user1044169

请看我重新编写的示例。事件对象可以随时被任何其他对象绑定、操作等。 - sajawikio

Answer 2

Object.defineProperty 是你想要的（假设你可以接受 不支持桌面版 IE < 9 或 Firefox < 4）

function Graph (dataType, provider){
   this._dataType = dataType;
   this._provider = provider;
}

Graph.prototype = {
    get dataType() {
        return this._dataType;
    },
    set dataType(data) {
        yourEventDispatcher.trigger("datatype modified");
        this._dataType = data;
    },
    get provider() {
        return this._provider;
    },
    set provider(data) {
        yourEventDispatcher.trigger("provider modified");
        this._provider = data;
    }
};

参见：JavaScript getters和setters入门指南？

- Sean Vieira

---

我喜欢这个。非常不错。只是好奇 - 如果我有像50个属性，我是否可以触发任何属性更改，还是必须定义50个setter？ - sajawikio

@sajawikio - 目前您需要定义50个setter - 目前有一个提案正在进行中，用于监视对象的所有属性的API（代理），但目前仍处于草案阶段。 - Sean Vieira

谢谢。但是在这种情况下，IE < 9 是一个问题。 - user1044169

Answer 3

使用EventEmitter库，例如https://github.com/Wolfy87/EventEmitter。完整指南在这里，但简而言之，您需要加载EventEmitter JavaScript文件，然后执行以下操作：

Graph.prototype = Object.clone(EventEmitter.prototype);

然后你可以做

var g = new Graph("Blah", "Blah");
g.emitEvent('foo');

- Femi

---

请记住，Object.clone是一个新方法，不是特别跨浏览器。不过，你可以很容易地编写自己的克隆方法或使用库。这里也有一些关于克隆的很好的问题。 - Olical