파이어 폭스 확장을위한 자바 스크립트

Question

내 자바 스크립트 코드를 정렬 및 상속 아래처럼 JQuery와, 객체와 정렬 기능입니다 포함 : 이전

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 [] property 및 sortList() 메서드를 추가했습니다.

이제 문제가 생겼습니다. 정렬 된 결과를 가져 오는 getSortedList() 메서드를 임시로 추가했지만 은 중복 된 것으로 분명히입니다.

다른 OOP 언어 인 경우 상속을 사용할 수 있지만 Javascript에는없는 것으로 들었습니다. 사용 방법 및 작성 방법을 모르겠습니다.

이 상황에 대한 좋은 해결책은 무엇입니까? 일부 상속 메서드를 사용하거나 정렬 목록을 처리하기 위해 getListString을 수정해야합니까?

후자에는 2 가지 큰 문제가있는 것 같습니다. 하나는 유지 관리 문제입니다. list []와 sortedList []를 처리하기 위해 .getListStings (새로운 인수)에 새로운 인수를 추가하면이 코드의 다른 부분에서이 메서드가 사용되는 문제가 발생할 수 있습니다.

다른 문제는 인수가 "this"개체의 개체이므로 ex입니다. "this.list.length"행을 수정하기 위해 인수를 직접 사용할 수 없으며 대신 새로운 가치있는 조건문을 필요로하지만 조건을 포함하면 OOP에 적합하지 않습니다.

이 문제에 대한 조언을 보내 주시면 감사하겠습니다. 모든

Answer 1

첫째, 당신은 상속하지 않고 코드를 재사용 할 수있는 깨끗한 코드를 유지하기 위해 :

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/