Hemos hecho un buen trabajo organizándonos hasta ahora. Obtener nuestro HTML dividido en una plantilla fue un gran paso. Ya estamos enturbiando las aguas, por así decirlo. Nuestros diferentes bits de funcionalidad en JavaScript se dividen en secciones discretas, lo que facilita la comprensión y el mantenimiento. Sé que hemos estado trabajando con una demostración bastante pequeña, pero espero que puedan imaginar cómo una aplicación se vuelve más complicada y más líneas de código, esta organización es increíblemente valiosa.
JavaScript no tiene ninguna "opinión" sobre la organización. Probablemente por eso a algunas personas les encanta y otras se sienten perdidas en él. Cómo eliges organizarlo depende totalmente de ti. También es probable que esa sea la razón por la que algunas personas realmente se aferran a marcos que, con opiniones o no, proporcionan una estructura organizativa. Por ejemplo, Backbone. ¡Pero esa es otra serie!
Para nuestra demostración, simplemente nos organizaremos alrededor de un objeto que simplemente creamos.
var Movies = ( )Todo lo que hacemos aquí está relacionado con la inclusión de algunas películas en la página, por lo que las incluiremos en una "cosa" llamada Películas. Recuerde que solo estamos haciendo lo que tenga sentido para nosotros organizativamente. Esto también tiene la ventaja de poner solo una variable en el "alcance global". Si hiciéramos todo en el ámbito global, sería un lío de variables anuladas accidentalmente (y funciones y lo que sea) declaradas en otro lugar.
Sin embargo, un objeto como ese no "hace" nada. Tendremos que "empezar".
var Movies = ( init: function() ( ) ) Movies.init();Tener una función llamada init es un estándar que permite a cualquiera que lea este código saber que el código que contiene es el que se ejecuta cuando se ejecuta este grupo de código. Eso debería leerse un poco como una tabla de contenido de lo que sucede con este grupo de código. Luego creamos otras funciones (más propiedades del objeto Movies) que hacen cosas que necesitamos hacer, en partes discretas. Recuerde que podemos llamar a las cosas como queramos, lo que tenga sentido para nosotros.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Bastante claro, ¿eh? Puede notar appendMovesToPageque no se llama en el init. Eso es porque no podemos llamar a eso hasta que tengamos datos para enviarlo. Esos datos provendrán de una llamada Ajax, lo que significa que necesitamos una devolución de llamada. Así getDataque acabará llamando a ese.
Todo lo demás que se completará aquí es simplemente mover bits de código que ya hemos escrito en el lugar correcto.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
Y hecho.
Veamos las cuatro preocupaciones que describimos anteriormente y veamos qué hicimos al respecto.
- Obteniendo los datos. Movimos el JSON a un archivo con el que pudiéramos acceder
$.getJSON, como es probable que debamos hacerlo en una situación real. Aparte de solo practicar eso, esto nos permitirá escribir pruebas a su alrededor. - Lógica de visualización. Ahora tenemos una función muy específica appendMoviesToPage que se llama cuando estamos listos para agregar nuestras películas a la página. Las funciones de un solo propósito son excelentes para (nuevamente) organización, comprensión y facilidad de mantenimiento.
- Manejo de eventos. Al utilizar la delegación de eventos, ya no mezclamos esta "lógica empresarial" con la lógica de visualización o la plantilla. Ni siquiera tenemos que preocuparnos por la ejecución de la orden de origen, porque en última instancia, estamos adjuntando los eventos al
document. Nuestra funcionalidad funcionará sin importar cuándo / cómo se agregue la plantilla a la página. - Plantillas. Totalmente movido a usar bibliotecas diseñadas específicamente para plantillas.
Yo llamaría a eso victoria. Aquí es donde terminamos:
Vea el Pen BwbhI de Chris Coyier (@chriscoyier) en CodePen