如何设计这种架构？答案

【问题标题】：How to design this architecture?如何设计这种架构？
【发布时间】：2012-01-01 00:37:47
【问题描述】：

我有 3 个课程：

function A(data){
    this.data = data || [];
}    
A.prototype.remove = function(index){
    // remove index from this.data;
};
function B(data){
    this.data = data || [];
}  
B.prototype.add = function(x){
    this.data.push(x);
};
B.prototype.update = function(index, x){
    this.data[index] = x;
};
function C(data){  
    this.data = data || [];
}
C.prototype.add = function(x){
    this.data.push(x);
};
var a = new A(xx);
var b = new B(xx);
var c = new C(xx);

有关系：
如果我调用 a.remove(i) 删除一个元素，b 会将其添加到它的 data。
如果我打电话给b.update(i, x)，c 会将x 添加到其data。
我怎么能用最小的耦合设计这个？

ps：这只是一个例子来说明情况，请不要关心初始化等。

【问题讨论】：

标签： javascript architecture module

【解决方案1】：

我会最好地使用事件来实现松散耦合。作为基础，我推荐使用 Backbone.js（参见 Backbone.Events 部分），它占用空间非常小，并为您提供出色的自定义事件支持。来自文档的简要说明：

Events 是一个可以混入任何对象的模块，使对象能够绑定和触发自定义命名事件。

它可能看起来像这样：

function A(data){
    this.data = data || [];
}    
A.prototype.remove = function(index){
    // remove index from this.data;
    // dispatch A_Remove event
    this.trigger("A_Remove", this.data);
};
function B(data){
    this.data = data || [];
}  
B.prototype.add = function(x){
    this.data.push(x);
};
B.prototype.update = function(index, x){
    this.data[index] = x;
    this.trigger("B_Update", x);
};
function C(data){  
    this.data = data || [];
}
C.prototype.add = function(x){
    this.data.push(x);
};
var a = new A(xx);
var b = new B(xx);
var c = new C(xx);

// mixin event support to your objects
_.extend(a, Backbone.Events);
_.extend(b, Backbone.Events);
_.extend(c, Backbone.Events);

// event listener for A_Remove event
a.bind("A_Remove", function(data) {
    b.add(data);
});
// event listener for B_Update event
b.bind("B_Update", function(data) {
    c.add(data);
});

使用这种基于事件的方法，您的类将尽可能地松散耦合，A、B 或 C 无需了解彼此。同时您获得了最高的灵活性——您可以随时添加更多的侦听器或事件类型。

我觉得这是最好的解决方案。

【讨论】：

【解决方案2】：

我会向 A 类和 B 类添加回调

function A(data, callback) {
  this.data = data || [];
  this.callback = callback || function() {};
}

A.prototype.remove = function(index) {
  // remove index from this.data;
  this.callback(this.data[index]);
}
...
var b = new B(xx);
var a = new A(xx, function(e) {b.add(e);});

【讨论】：