Ejemplo simple de un buen estilo de programación de Javascript?

Question

Estoy luchando con Javascript. La mayoría de mis problemas no surgen de la falta de comprensión del idioma (bueno, eso también, pero tengan paciencia conmigo). En cambio, el problema principal es comprender qué es un buen estilo de organización de programación/código.

Por ejemplo, necesito tener distintas entidades (formularios, áreas de texto, tablas, etc.) en una página, y las he modificado según los eventos, ya sea por usuario o Ajax.

Mi primera idea fue definir una clase para cada entidad, definir métodos en el prototipo de estas clases, crear instancias de las clases vinculadas a identificadores HTML específicos (ya sea implícitamente o al crear una instancia nueva) y registrar manejadores entre eventos y llamadas a métodos. En otras palabras, tipo de "estilo QT". Pronto me di cuenta de que no es trivial. No puede registrar métodos de objetos directamente como devoluciones de llamada, tiene que envolverlos en un cierre, etc.

Otra idea que tuve fue declarar solo un conjunto de funciones de devolución de llamada, sin objetos, y cada devolución de llamada opera en variables globales y en el DOM. Rápido y sucio, sin problemas. Es como si su página fuera solo un objeto grande cuyos eventos se manejan internamente.

Cada solución que podía pensar me dejó con la sensación de que estaba haciendo un uso drástico de la herramienta. Al final, no me siento cómodo porque vi muy pocos códigos de JavaScript en mi experiencia de programación, y es muy diferente de todos los idiomas con los que tengo experiencia. Al leer las primeras cosas que descargo, está garantizado que es una pérdida de tiempo, ya que está comprimido y/o ofuscado y/o no está "actualizado" con las "buenas prácticas de JavaScript" actuales, así que te pido un simple, página web potente y limpia, más su código JavaScript asociado para acceder rápidamente a un estilo de diseño de programación/código adecuado.

(Estoy usando jQuery, pero mi pregunta es independiente de eso. Sin embargo, sería preferible un ejemplo que use jQuery).

Answer 1

Tengo un ejemplo de cómo crear aplicaciones de JavaScript en this question. El resumen es:

• Cree un archivo para cada objeto singleton. En su código, almacene la capa intermedia ajax y la interfaz ui en archivos separados
• Cree un objeto singleton global para las 3 capas generalmente en el proyecto; GUI, back-end y aplicación
• Nunca utilice ajax puro desde ningún lugar fuera del objeto de Back-end. Almacene la URL en la página del lado del servidor en el objeto Backend y cree una función que use esa URL para contactar al servidor.
• Tiene una clase JSON en el servidor que puede informar errores y excepciones al cliente. En el objeto Backend, compruebe si el objeto JSON devuelto contiene un error, y llame a la función serverError en la clase GUI para presentar el error al usuario (o desarrollador).

Answer 2

Aprendí a escribir JavaScript leyendo el JavaScript: The Good Parts de Douglas Crockford. También tiene a lot de stuffonline puede check out.

Mi estilo básico es eliminar los mecanismos de JavaScript para la creación de clases y tratarlo más como Scheme creando "objetos" con cierres y notación literal de objetos. (No estoy seguro de si tienes algún fondo con Scheme; de ​​lo contrario, este enfoque puede parecer menos natural para ti). Para una mejor explicación de cómo hacerlo, Crockford tiene un breve ensayo here.He aquí un breve ejemplo:

var pezDispenser = (function() { 
    var amount = 20; 
    return { 
     dispense: function() { 
      if (amount > 0) } 
       amount -= 1; 
       alert('delicious pez!'); 
      } else { 
       alert('no more pez!'); 
      } 
     } 
    }; 
}()); 

pezDispenser.dispense(); 

He encontrado que esto es un enfoque muy potente y flexible.

Crockford también tiene una guía de estilo general para el idioma here y here.

Espero que esto ayude.

Answer 3

Esta pregunta es bastante antigua.

Pero me ha gustado esta página: 42 Javascript best practices (Opera)