Pregunta de mejores prácticas de JavaScript orientada a objetos: cómo debo configurar mis objetos para el siguiente

Question

He decidido que necesito mejorar mis habilidades de programación de JavaScript, así como mis habilidades de OO. Actualmente estoy leyendo algunos libros, pero a veces es difícil comprender la teoría sin ver primero algunos ejemplos prácticos. Entonces, tengo una pregunta teórica sobre "mejores prácticas" para la siguiente situación ...

Me gustaría crear una secuencia de comandos OO que muestre una lista de registros de búsqueda recuperados del servidor. También quiero poder editar cada registro de etiqueta de búsqueda en su lugar.

Actualmente estoy haciendo esto procesalmente con un poco de ayuda de la biblioteca jQuery:

acepto una lista de JSON-codificada de registros searchtag desde el servidor. Se ve así:

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

yo tiro el JSON directamente en jTemplates para crear el HTML correspondiente, así:

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

Por último quiero que sea posible modificar cada searchtag con un Editar- en el lugar método, por lo que hay que adjuntar un método de pre-construidos edición en el lugar para cada elemento hTML:

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

Esto funciona muy bien procesalmente. Y tal vez lo más inteligente sería dejar lo suficientemente bien solo. :) Pero, por el bien de la discusión, ¿cuál es la mejor manera de escribir algo como esto desde la perspectiva OO?

¿Debo tener un solo objeto "searchTagList" que tenga métodos para cada uno de los pasos descritos anteriormente?

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

¿O es incorrecto? (Parece que todo lo que hago es ajustar mis funciones de procedimiento en un objeto.) ¿Debo de alguna manera analizar los datos JSON en instancias de cada etiqueta de búsqueda y luego adjuntar métodos individuales a cada etiqueta de búsqueda? (Esto parece una gran sobrecarga, sin ganancia.)

Disculpas de antemano si parece que estoy recogiendo pelos. Pero realmente quiero entender esto en mi cabeza.

Gracias,

Travis

Answer 1

En realidad, los ejemplos de jQuery que posteaste no son procedual, son OO. Específicamente, son una implementación de objetos encadenables que proviene de la escuela de programación de fluidos del diseño OO.

Procedual sería algo así como:

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

funcional sería algo así como:

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

jQuery han hecho un muy buen trabajo de objetivar la API DOM. Está bien usarlo como inspiración de su propia biblioteca OO DOM. Otro que yo recomendaría que miraras es YUI3 (YUI2 es muy procesal).

Específicamente, el patrón general de jQuery y YUI3 es:

nodeListConstructor(query_string).nodeMethods(); 

Dónde definen un objeto nodo OO-como para envolver alrededor de DOM HTMLElements y luego otro objeto lista de nodos estilo OO para permitirle a los nodos de proceso por lotes . Esto en mi humilde opinión es un buen patrón de diseño.

Answer 2

Puede usar el patrón de Módulo Javascript para obtener buenos resultados aquí.

De acuerdo con ese patrón de su definición searchTagList cambiaría a:

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

las dos funciones renderList y bindEdit todavía sería capaz de acceder a la searchTagData pero no se podrá acceder al módulo de código searchTagList exterior.

Observe que la función anónima se ejecuta inmediatamente y devuelve un objeto que contiene dos métodos públicos (renderList y bindEdit) que forman un closure en el miembro privado searchTagData.

Puede leer más sobre el patrón de Módulo here.