Question

我想重构一些我必须从现在开始照顾的项目。项目的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;
        });

然后他复制过去相同的代码，但与另一个选择器.... 因为DRY的问题以及为我维护这段代码的问题，我想知道创建一些像ex的对象是否更好。 GUI并为主要代码放置大多数可重复方法的方法...例如：

var GUI = {
  setDialog:function(selector){

   $(selector).dialog({

//all the coniguration
})
}}

依旧...... 首先，你认为这个全球性的想法是好的吗？我可以期待什么问题？也许有另一种解决方案？我担心另一件事，如果会有很多让我们说具有不同配置的对话框怎么办？我应该将它存储在GUI对象中，还是可以分别用于调用GUI对象方法的对象？我很乐意提出建设性的意见。谢谢！：）

Answer 1

我建议重构应用程序以使用AngularJS。使用Angular，你仍然会像上面一样编写jQuery，但是会在一个名为Directive的隔离环境中编写。

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

<uppertoolbar>

你会发现jQuery从HTML中消失并重新出现在它所属的.JS文件中。

http://www.egghead.io是一个很好的起点。

http://docs.angularjs.org/guide/directive当你准备好开始编写指令时。

Answer 2

我是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关键字，但这通常被用作“让我成为对象”的简写。然后，对象本身只有数据，使其更像是“呈现”而不是“代码”，尽管我同意重复的诙谐。

希望这有帮助。

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

2 个答案: