Javascript js项目中ui与逻辑划分的概念

我想做重构的一些项目，我必须照顾从现在开始。项目的3/4是在JavaScript+jQuery中完成的。所有JS代码大约有5k行。该项目的主要开发人员将逻辑与DOM元素相结合，例如

var UPPERTOOLBAR = {
    setDialog : function() {
        this.$popup = $('#toolbar').dialog({
            autoOpen : false,
            height : 'auto',
            maxHeight : 450,
            resizable : false,
            stack : false,
            width : 300,
            zIndex : 997,
            position : {
                my : "right top+205",
                at : "right top",
                of : window
            }
        });
    }};

几行之后，我得到了相同的代码，但对于其他HTML元素：

var LEGEND = {
    setDialog : function() {
        this.$popup = $('#toolbar').dialog({
            autoOpen : false,
            height : 'auto',
            maxHeight : 450,
            resizable : false,
            stack : false,
            width : 300,
            zIndex : 997,
            position : {
                my : "right top+205",
                at : "right top",
                of : window
            }
        });
    }};

或事件处理程序

        $('#searchpanel').animate(self.__getDivHeight(mode), 'slow', 'swing', function() {
            $('#searchform').css('display', 'block');
            $('#searchheader').css('background-position', '-864px 0px');
            self.shown = true;
        });

然后他用另一个选择器复制相同的代码。。。。 由于为我维护这段代码时遇到的问题，我想知道是否最好创建一些类似于ex.GUI的对象，并将这些方法放置在主代码中的大多数可重复方法中。。。例如：

var GUI = {
  setDialog:function(selector){

   $(selector).dialog({

//all the coniguration
})
}}

等等。。。 首先，你认为这个全球性的想法好吗？我会遇到什么问题？也许还有别的解决办法？ 我在担心另一件事，如果会有很多不同配置的let say对话框呢？。。我应该将其存储在GUI对象中，还是单独存储在调用GUI对象方法的对象中？

---

我很乐意听取建设性的意见。谢谢

我建议重构应用程序以使用AngularJS。使用Angular，您仍然可以像上面那样编写jQuery，但是可以在称为指令的隔离环境中这样做

指令是一种通过名称或类将行为附加到HTML元素的方法。比如说,

<uppertoolbar>

您将发现jQuery从HTML中消失，并重新出现在它所属的.JS文件中

这是一个很好的起点

---

当您准备好开始编写指令时。

我是DRY的粉丝，尽可能让我的代码适合它。在上面的例子中，SetDialog指向一个“匿名”函数，即一个没有自己名字的函数。但是没有什么可以阻止您编写函数并引用它：

function realSetDialog() {
    this.$popup = $('#toolbar').dialog({
        autoOpen : false,
        height : 'auto',
        maxHeight : 450,
        resizable : false,
        stack : false,
        width : 300,
        zIndex : 997,
        position : {
            my : "right top+205",
            at : "right top",
            of : window
        }
    });
}


var UPPERTOOLBAR = {
  setDialog : realSetDialog
};

var LEGEND = {
  setDialog : realSetDialog
};

然后，如果需要更改setDialog函数，只需在一个位置进行更改

注意：函数名后面没有括号。在C/C++术语中，这相当于指向实际函数的指针。我花了一段时间才意识到Javascript的这种怪癖。它仍然正确地解析“this”，除非像realSetDialog；一样直接调用它

我要说的是，在大多数情况下，这些块中没有代码。当然，他们使用了function关键字，但这通常被用作“使我成为对象”的缩写。然后对象本身只有数据，这使得它更像是“表示”而不是“代码”，尽管我同意重复的重要性

---

希望这有帮助。

看看knockoutjs，伟大的JavaScript库mvvmyeah指针是这里的关键词。这与我头脑中的想法是一样的，但如果例如UPPERTOOLBAR宽度必须为300px，LEGEND toolbar宽度必须为150px，那么麻烦就开始了，因此我必须创建另一个配置没有大变化的对象，或者将它们作为参数传递给函数，但是会有太多的参数，这并不方便。事实上，Javascript使伪命名参数系统变得非常简单。让函数接受一个参数，该参数是一个属性与默认值不同的对象。然后您只需使用LEGEND.setDialog{width:150px}，而UPPERTOOLBAR.setDialog则使用默认值。内部代码，如width:o.width？'300px'：o.width。只需一个小样本就可以运行它，因为它是一个单一的函数，所以这样的工作并不乏味。