使用javascript进行排序和继承

Sorting and inheritance with javascript

本文关键字:继承 排序 javascript 使用      更新时间:2023-09-26

FireFox扩展的javascript代码包括jquery、object和sort函数,如下所示:

var myModel = {
    list:[],
    anotherList:[],
    sortedList:[],//newly added propaty for newly added methods.
    sortedAnotherList:[],   //newly added propaty for newly added methods.
    getListStings: function(){
        var result      = "";
        var firstTags   = '<div class="imglist"><p class="title">List</p><div><table>';
        var lastTags    = '</table></div></div>';
        var listlength      = this.list.length;
        result += firstTags;
        for(var i=0; i<listlength; i++){
            result += "<tr><td>"+this.list[i] + "</td></tr>";
        }
        result += lastTags;
        return (result);
    },
    getSortedList: function(){//newly and tentatively added method.
        var result      = "";
        var firstTags   = '<div class="imglist"><p class="title">Sorted List</p><div><table>';
        var lastTags    = '</table></div></div>';
        var listlength      = this.sortedList.length;
        result += firstTags;
        for(var i=0; i<listlength; i++){
            result += "<tr><td>"+this.sortedList[i] + "</td></tr>";
        }
        result += lastTags;
        return (result);
    },
    sortList: function(){//newly added method.
        this.sortedList = this.list;
        this.sortedList.sort();
    },
    ...(other methods are here.)
}
var outputResult ={
    ...
}
$(function(){
    ...
    // when click-handler triggered
    myModel.sortList();
    outputResult.output(myModel.getSortedList);
    ....
});

以前,它没有对数组进行排序的函数,我新添加了这个函数。首先,我在myModel对象中添加了sortedList[]属性和sortList()方法。

现在我遇到了一个问题。我暂时添加了getSortedList()方法,它可以获得排序结果,但显然是多余的

如果这是其他OOP语言,我可能会使用继承,但我听说Javascript没有继承,我不知道如何制作和使用它们。

对于这种情况,什么是好的解决方案我应该制作并使用一些继承方法,还是应该修改getListString来处理排序列表?

后者似乎有两个大问题,一个是维护问题。将新参数添加到.getListStings(新参数)中以处理list[]和sortedList[]可能会在使用此方法的代码的其他部分造成问题。

另一个问题是,参数是"this"对象中的对象,因此,ex。为了修改"this.list.length"行,参数不能直接使用,而是需要一个新的有效的条件语句,但包含条件语句对OOP不好。

对于这个问题的任何建议,我们都将不胜感激。

首先,为了保持代码的干净,您可以在没有继承的情况下重用代码:

var myModel = {
    list:[],
    anotherList:[],
    sortedList:[],//newly added propaty for newly added methods.
    sortedAnotherList:[],   //newly added propaty for newly added methods.
    getListStings: function(){
        return this.getListHTML('List', this.list);
    },
    getSortedList: function(){//newly and tentatively added method.
        return this.getListHTML('Sorted List', this.sortedList);
    },
    getListHTML: function (title, list) {
        var result = '<div class="imglist"><p class="title">' + title + '</p><div><table>';
        var listlength = list.length;
        for(var i=0; i<listlength; i++){
            result += "<tr><td>" + list[i] + "</td></tr>";
        }
        result += '</table></div></div>';
        return result;
    },
    sortList: function(){//newly added method.
        //If you want to keep the unsorted array you'll need to create a new array
        this.sortedList = this.list.slice();
        this.sortedList.sort();
    },
    ...(other methods are here.)
}

其次,JS中存在继承,以下是一些解读:

  • http://alexsexton.com/blog/2013/04/understanding-javascript-inheritance/
  • http://www.klauskomenda.com/code/javascript-inheritance-by-example/
  • http://davidshariff.com/blog/javascript-inheritance-patterns/