Objektorientierte JavaScript-Best Practices Frage: Wie konfiguriere ich meine Objekte für die folgenden

Question

Ich habe beschlossen, dass ich meine JavaScript-Programmierkenntnisse sowie meine OO Fähigkeiten verbessern muss. Ich lese gerade einige Bücher durch, aber manchmal ist es schwierig, die Theorie in den Griff zu bekommen, ohne zuerst einige praktische Beispiele zu sehen. Also habe ich eine theoretische Frage zu "Best Practices" für das folgende Szenario ...

Ich möchte ein OO-Skript erstellen, das eine Liste der vom Server abgerufenen Suchbegriffe anzeigt. Ich möchte auch in der Lage sein, jeden Searchtag-Datensatz an Ort und Stelle zu bearbeiten.

Zur Zeit mache ich das prozedural mit einem bisschen Hilfe von der jQuery-Bibliothek:

Ich akzeptiere eine JSON-codierte Liste der searchtag Datensätze vom Server. Es sieht wie folgt aus:

[ 
    { "searchTagName" : "tagOne", "searchTagID" : "1" }, 
    { "searchTagName" : "tagTwo", "searchTagID" : "2" }, 
    { "searchTagName" : "tagThree", "searchTagID" : "3" }, 
    etc... 
] 

ich die JSON direkt in jTemplates Dump die entsprechende HTML, wie so zu erstellen:

$("#searchTagList") 
    .setTemplateElement("template_searchTagList") 
    .processTemplate(searchTagData); 

Schließlich möchte ich es möglich sein, jede searchtag mit einem Editier- zu ändern in-Place-Verfahren, so lege ich ein vorgefertigtes edit-in-Place-Verfahren zu jedem hTML-Elemente:

$(".searchTag").editInPlace(); 

Diese sehr gut prozedural funktioniert. Und vielleicht wäre es das Klügste, wenn man gut genug in Ruhe gelassen würde. :) Aber, um zu argumentieren, was ist der beste Weg, um so etwas aus einer OO-Perspektive zu schreiben.

Sollte ich ein einzelnes Objekt "searchTagList" mit Methoden für jeden der oben beschriebenen Schritte haben?

var searchTagList = 
{ 
    searchTagData: JSONdata, 
    renderList: function() { /*send to jTemplates */ } 
    bindEdit: function() { /* attach edit-in-place */ } 
} 

Oder ist das falsch? (Es scheint, als würde ich nur meine prozeduralen Funktionen in ein Objekt einfügen.) Sollte ich irgendwie die JSON-Daten in Instanzen von jedem Suchtag analysieren und dann einzelne Methoden an jedes Suchtag anhängen? (Dies scheint wie viel Overhead, für keinen Gewinn.)

Entschuldigung im Voraus, wenn es scheint, als ob ich auf Haare picken. Aber ich möchte dieses Zeug wirklich in meinem Kopf haben.

Danke,

Travis

Answer 1

Eigentlich Sie die jQuery Beispiele geschrieben nicht Procedual sind, sind sie OO. Insbesondere sind sie eine Implementierung von verkettbaren Objekten, die aus der Fluid-Programmier-Schule von OO Design stammt.

Procedual wäre so etwas wie:

var el = cssQuery("#searchTagList"); 
var templateObject = makeTemplate(el,"template_searchTagList"); 
processTemplate(templateObject,searchTagData); 

Functional so etwas wie wäre:

processTemplate(
    makeTemplate(
     cssQuery("#searchTagList"), 
     "template_searchTagList" 
    ), 
    searchTagData 
); 

jQuery haben eine ziemlich gute Arbeit geleistet, die DOM-API objektiviert. Es ist in Ordnung, sie als Inspiration für Ihre eigene OO DOM-Bibliothek zu verwenden. Eine andere, die ich Ihnen empfehlen würde, ist YUI3 (YUI2 ist sehr procedural).

Insbesondere das allgemeine Muster von jQuery und YUI3 ist:

nodeListConstructor(query_string).nodeMethods(); 

Wo sie eine OO-ähnlichen Knotenobjekt definieren um wickeln DOM HTMLElements und dann Objekt eine andere OO-Stil nodeList Sie Batch-Prozessknoten zu ermöglichen, . Das ist meiner Meinung nach ein gutes Designmuster.

Answer 2

Sie könnten das JavaScript-Modul-Muster hier gut verwenden.

Nach diesem Muster Ihre searchTagList Definition würde sich ändern:

var searchTagList = function() { 
    searchTagData: JSONdata; 
    return { 
    renderList: function() { /*send to jTemplates */ }, 
    bindEdit: function() { /* attach edit-in-place */ } 
    }; 
}(); 

Die beiden Funktionen renderList und bindEdit würde noch in der Lage sein searchTagData zugreifen aber unzugänglich bleiben außerhalb searchTagList Modul zu codieren.

Beachten Sie, dass die anonyme Funktion sofort ausgeführt wird und ein Objekt mit zwei öffentlichen Methoden (renderList und bindEdit) zurückgibt, die eine closure für das private Mitglied searchTagData bilden.

Sie könnten mehr über das Modul Muster here lesen.