如何处理同一级别的对象之间的交互

Question

我正在设计一个网站，它使用大量的javascript来控制页面上发生的事情。网页的每个部分（地图，列表面板等）都有一个关联的javascript对象。我对处理这些对象之间的通信的最佳实践有一些疑问。

这是一个简化版本：想象一个网站，其中有一个谷歌地图加上标记在页面的一侧，在LHS上有一个列表，其中包含每个标记的详细信息。见下图。

单击标记时，相关详细信息将在LHS面板上突出显示，如果单击详细信息，相应的地图标记将为其设置动画。

我想要这样做的方法是让每个对象通过顶级而不是直接调用另一个对象的方法（即，这样每个对象只报告事件并让顶层决定做什么） 。请参阅下面的图表和代码......

//Class to construct and operate the google map and its markers etc
function MainMap(){
    var me = this;

    me.createMapMarkers = function()
        ....
        /* clickedMapMarker is called but not defined within this class */
        me.clickedMapMarker(); 
        ....
    }

    me.bounceMarker = function(marker){ /* code to animate the marker */ }

    ...
}


//Class to handle the construction and operation of the list items 
function ListingsPanel(){
    var me = this;

    me.createListItems = function()
        ....
        me.clickedListLink(item);
        ....
    }

    me.highlightItem = function(item){ /* code to highlight */ }

    ...
}


//Instantiate the objects
theMainMap = new MainMap();
theListingsPanel = new ListingsPanel();


//Wiring between the objects
theMainMap.clickedMapMarker = theListingPanel.highlightItem;

theListingPanel.clickedListLink = function(item){
    theMainMap.bounceMarker(item);
    ...
}

我的问题是：

1）这种设计方案是否有名称？

2）clickedMapMarker()之类的名称是什么 - 这是一个事件处理程序吗？

3）我是否有权在顶层联系互动？

4）或者是否有更好的方法来完成这种任务（包括任何解释替代方案的链接）？