llamar - ¿Cómo puedo escribir Javascript reutilizable?
llamar javascript desde html (3)
Patrón básico
En cuanto a su patrón básico, puedo sugerirle que modifique su estructura para usar el patrón de módulo y las funciones nombradas:
var Search = (function(){
var pubs = {};
pubs.carSearch = carSearch;
function carSearch(color) {
}
pubs.peopleSearch = peopleSearch;
function peopleSearch(name) {
}
return pubs;
})();
Sí, eso parece más complicado, pero en parte porque no hay una función de ayuda involucrada. Tenga en cuenta que ahora, cada función tiene un nombre (sus funciones anteriores eran anónimas; las propiedades a las que estaban vinculadas tenían nombres, pero las funciones no tenían, lo que tiene implicaciones en términos de la visualización de la pila de llamadas en los depuradores y similares). El uso del patrón de módulo también le brinda la posibilidad de tener funciones completamente privadas a las que solo pueden acceder las funciones dentro de su objeto de Search . (Solo declare las funciones dentro de la gran función anónima y no las agregue a las pubs .) Más sobre mi justificación para eso (con ventajas y desventajas, y por qué no puede combinar la declaración de funciones y la asignación de propiedades) here .
Recuperando parametros
Una de las funciones que realmente me gusta de Prototype es la función de Form#serialize , que recorre los elementos del formulario y crea un objeto plano con una propiedad para cada campo en función del nombre del campo. (La implementación actual de Prototype - 1.6.1 tiene un problema en el que no conserva el orden de los campos, pero es sorprendente que rara vez sea un problema). Parece que estarás bien atendido por algo así y ellos '' no es difícil de construir; entonces su lógica de negocios trata con objetos con propiedades nombradas de acuerdo con su relación y no tiene conocimiento de la forma real en sí.
Valores de retorno / mezcla de interfaz de usuario y lógica
Tiendo a pensar en las aplicaciones como objetos y las conexiones e interacciones entre ellos. Así que tiendo a crear:
- Objetos que representan el modelo de negocio y tal, independientemente de la interfaz (aunque, por supuesto, el modelo de negocio es casi seguramente impulsado por la interfaz). Esos objetos se definen en un solo lugar, pero se usan tanto en el lado del cliente como en el del servidor (sí, uso el lado del servidor de JavaScript) y se diseñan con la serialización (a través de JSON, en mi caso) en la mente para que pueda enviarlos de un lado a otro. fácilmente.
- Los objetos del lado del servidor que saben cómo usarlos para actualizar la tienda subyacente (ya que tiendo a trabajar en proyectos con una tienda subyacente), y
- Objetos del lado del cliente que saben cómo usar esa información para renderizar a la interfaz de usuario.
(¡Lo sé, casi no es original!) Intento mantener la tienda y los objetos genéricos para que funcionen principalmente observando las propiedades públicas de los objetos comerciales (que son casi todas las propiedades; no uso los patrones como Crockford que te permite ocultar datos realmente, los encuentro demasiado caros). El pragmatismo significa que, a veces, la tienda o la representación de objetos solo tienen que saber con qué están lidiando, específicamente, pero trato de mantener las cosas genéricas donde pueda.
Comencé a envolver mis funciones dentro de Objetos, por ejemplo:
var Search = {
carSearch: function(color) {
},
peopleSearch: function(name) {
},
...
}
Esto ayuda mucho con la legibilidad , pero sigo teniendo problemas con la reutilización . Para ser más específicos, la dificultad está en dos áreas:
Parámetros de recepción . Muchas veces tendré una pantalla de búsqueda con múltiples campos de entrada y un botón que llama a la función de búsqueda javascript. Tengo que poner un montón de código en el clic del botón para recuperar y luego marcar los valores de los campos de entrada en la llamada de función, o tengo que codificar los nombres / ID de los campos de entrada HTML para poder recuperarlos posteriormente con Javascript. La solución que he decidido para esto es pasar los nombres de campo / ID a la función, que luego utiliza para recuperar los valores de los campos de entrada. Esto es simple pero realmente parece impropio.
Valores de retorno . El efecto de la mayoría de las llamadas de Javascript tiende a ser una en la que algunos cambios visuales en la pantalla cambian directamente, o como resultado de otra acción realizada en la llamada. La reutilización es una tostada cuando pongo estos efectos de alteración de pantalla al final de una función. Por ejemplo, después de completar una búsqueda, necesito mostrar los resultados en la pantalla.
¿Cómo manejan los demás estos problemas? Poner mi límite de pensamiento me lleva a creer que necesito tener una capa de Javascript específica para cada página entre cada uso en mi aplicación y los métodos genéricos que creo que se usarán en toda la aplicación. Usando el ejemplo anterior, tendría un botón de búsqueda cuyo onclick llama a myPageSpecificSearchFunction, en el que los ID / nombres de los campos de búsqueda están codificados, lo que calcula los parámetros y llama a la función de búsqueda genérica. La función genérica devolvería solo datos / objetos / variables, y no leería directamente ni realizaría cambios en el DOM. La función de búsqueda específica de la página recibiría estos datos nuevamente y alteraría el DOM de manera apropiada.
¿Estoy en el camino correcto o hay un mejor patrón para manejar la reutilización de los objetos / métodos de Javascript?
Comencé a usar el patrón del módulo , pero luego comencé a hacer todo en los complementos de jQuery . Los complementos permiten pasar opciones específicas de la página.
El uso de jQuery también le permitiría repensar la forma en que identifica sus términos de búsqueda y encuentra sus valores. Podría considerar agregar una clase a cada entrada y usar esa clase para evitar nombrar específicamente cada entrada.
Javascript es ridículamente flexible, lo que significa que su diseño es especialmente importante ya que puede hacer las cosas de muchas maneras diferentes. Esto es lo que probablemente hace que Javascript tenga menos ganas de prestarse a la reutilización.
Hay algunas notaciones diferentes para declarar sus objetos (funciones / clases) y luego ponerles nombres. Es importante entender estas diferencias. Como se menciona en un comentario aquí, ''el espacio de nombres es una brisa'' - y es un buen lugar para comenzar.
No podría ir lo suficientemente lejos en esta respuesta y solo estaría parafraseando, así que recomiendo comprar estos libros: