2

我正在设计一个使用大量 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）或者这种任务有更好的方法（包括任何解释替代方案的链接）？

4

0 回答 0