如何组织Javascript UI？

Question

我需要关于程序架构的好例子和最佳实践.

我正在尝试为适用于Google.Maps的应用构建一个JS用户界面.在第一稿中,用户应该能够以类似于GM的方式在地图上绘制几何形状然后通过AJAX发送形状并显示响应.

问题是代码变得复杂只是用多边形编辑.

在Joel的"Duct-tape Programmer"的启发下,我尝试绘制一个直截了当的代码,它可以动作并切换事件处理程序,以避免使用大的if-else树."新建多边形"按钮为map.onclick创建一个观察者,更改其他按钮的事件处理程序或隐藏它们,并隐藏自身等.

这种方法的缺点是数据处理代码与接口混合在一起.创建div容器以在新多边形上显示数据的代码位于处理w/GM或w /形状数据的代码旁边.如果我想修改UI,我需要处理整个应用程序.

我可以稍后再查看它并将这个生成UI的代码移到别处,但后来我的主程序员.相反,他坚持使用"消息传递"方法:一个简单的事件系统,其中对象订阅事件并触发它们.接口代码可以与数据处理和与GM交谈完全隔离,但现在每个监听器都必须仔细检查此消息是否适用于它.

例如,单击地图上的多边形必须突出显示它并开始编辑.但是如果正在绘制另一个多边形而不是.那么,有些人在和你说话吗？ - 代码随处可见.

我会很感激UI架构方法的好例子.

Answer 1

向您建议的事件处理理念是一种很好的方法.

这是一些更多的想法:

• 使形状绘图的东西成为一个组件
• 形状绘图组件将事件发送到其他代码,以对"编辑"或"单击"等内容做出反应
• 该组件还可以处理编辑部分 - 它将"clicked"事件发送给控制器,控制器告诉组件进入编辑模式
• 在编辑模式下,组件不会发送正常的"点击"事件,直到编辑关闭,避免了您必须检查的问题

一般来说,最好有一个"视图"层,它只处理显示数据并将有关该数据的用户操作的事件(即点击等)发送到"控制器"层,然后由此决定do - 例如,它可以决定将视图更改为编辑模式.

Answer 2

我不知道这是不是重点.但我用它作为我所有javascript项目的一个神殿.

(function () {
var window = this,
    $ = jQuery,
    controller,
    view,
    model;

controller = {
    addEventForMenu : function () {
        // Add event function for menu
    }
};

view = {
    content : {
        doStuff : function () {

        }
    },

    menu : {
        openMenuItem : function () {

        }
    }
};

model = {
    data :  {
        makeJson : function () {
            // make json of string
        },

        doAjax : function () {

        },

        handleResponse : function () {

        }
    }
}

$.extend(true, $.view, view);
})();

这里的好处是它只是将视图对象扩展到DOM,其余的保存在匿名范围内.

同样在bug项目中,我为每个部分创建了这些文件,即map.js,content.js,editor.js

如果您只关注视图对象中方法的命名,那么在开发过程中您可以拥有任意数量的文件.当项目设置到生产环境时,我只需将其设为一个文件并将其缩小.

..fredrik