w3schools tag tab style page for color javascript jquery frameworks code-organization

javascript - tag - title of page html



Javascript: ¿Cómo dar sentido a todos los marcos y filosofías de diseño? (4)

He sido usuario de jQuery (y algunos de sus complementos menores) por un tiempo. El código Javascript que he desarrollado a lo largo de los años podría describirse mejor como ... desordenado. Utilizó una tonelada de variables y funciones globales aquí y allá, no usó formas estándar de organizar el código, ni ningún patrón de diseño alguno.

Actualmente estoy creando la nueva versión de un sitio web, y he terminado de hacer el backend con las plantillas PEAR::MDB2 y Smarty . El resto es solo PHP casero con algunas clases.

Ahora estoy en el punto en el que agregaré la capa de Javascript en la parte superior del sitio web para mejorar la facilidad de uso de algunas características. (asegurándome de que todo se degrada con gracia) Quiero escribir un Javascript mejor, más limpio y más organizado que antes, así que hice una pequeña investigación. Leí el Javascript orientado a objetos de Stefanov para comprender mejor algunos conceptos que solo conozco libremente (prototipos, constructores, etc.) también. Ahora estoy atascado en un punto en el que me pregunto qué marcos de Javascript debería usar y cómo organizarlos todos.

Después de realizar mi investigación, entendí Cappuccino & Objective-J , y Sproutcore no era lo que estaba buscando. Para citar la página de Cappucino:

Cappuccino no está diseñado para crear sitios web o para hacer que los sitios existentes sean más "dinámicos". Creemos que estos objetivos están demasiado alejados de los del desarrollo de aplicaciones para que se puedan atender bien con un solo marco. Proyectos como Prototype y jQuery son excelentes en esas tareas.

Así que ahí está eso. Luego me enteré de Coffee Script , que es más un "compilador" uno a uno y no me ayudaría con la organización real de mi código.

También me topé con algunos artículos que dan pautas:

También me enteré de Backbone.js , Shoestring , JavaScriptMVC , Google Loader , jQuery Tools , jQuery UI . Realmente no sé qué hacer con todo esto ... Las cosas que sé:

  • No quiero invertir mucho tiempo en aprender algo demasiado complejo, quiero mantener las cosas simples y flexibles tanto como sea posible (por eso no uso Symfony en el backend, por ejemplo), pero limpio y organizado. .
  • Quiero usar jQuery, la pregunta es, ¿qué debo usar con él? (eso también es compatible)

En este momento, usaría jQuery y jQuery Tools y "organizaría" todo eso en un literal de espacio de nombres / objeto simple con propiedades y métodos simples y también, ya que el sitio está localizado, solo planeo usar el vsprintf simple (como lo hago) en el backend) con los pares clave: valor cargados desde un objeto literal proporcionado por el backend. JavaScriptMVC parece interesante, pero temo que traiga demasiada complejidad para un proyecto que es bastante pequeño. Ahí es donde necesito tu consejo! Muchas gracias por adelantado.

Debería ver el video y leer los enlaces en este artículo y luego debería preguntarse nuevamente si jquery es la herramienta correcta. Tal vez usará dojo, que es mucho mejor para proyectos más grandes o echa un vistazo a la red troncal y donde puede quedarse con jquery. Después de que ambos son más "javascriptish", entonces algo como sproutcore, cappuciono o incluso GWT. Y también mucho más fácil de entender cuando vienes de jQuery.

Ok, mi intento de una respuesta:

No hay "mejor" forma de hacerlo. Ahora sabe lo que hay y creo que podría preferir lo que quiere. En ese caso, elija un marco y apréndalo de adentro hacia afuera. (perdón por explotar tu burbuja, pero cada marco tiene una curva de aprendizaje, algunas empinadas, otras muy fáciles, pero al final para usarlo bien tienes que invertir en él. Solo hazlo, no te arrepentirás).

Por supuesto, usted tiene una preferencia por el código limpio, por lo que podría tener en cuenta algunas consideraciones. También dice que tiene una preferencia por jQuery, lo cual está bien, pero hay algunas limitaciones (como también se señala en el enlace proporcionado por eskimoblood).

Hay algunas conferencias y tutoriales agradables con consejos sobre cómo estructurar su código en jQuery:

Algunas guías de estilo:

Herramientas para comprobar tu código.

Trabajos estandar (javascript)

Puede haber más ... quizás más personas puedan contribuir, pero también creo que casi has llegado al final de lo que puedes aprender antes de ensuciarte las manos. Muchas de estas guías están escritas de una manera muy genérica, pero lo interesante es que javascript se utiliza en muchas situaciones específicas. Podría ser útil simplemente publicar parte del código que considere "desordenado" y podemos ayudarlo a descubrir cómo hacerlo mejor. ¡Buena suerte!

Un marco a considerar es definitivamente ReactJS de Facebook. Este marco es bastante hábil de muchas maneras.

Lo primero que debes saber es que es un marco de vista. Se puede usar en el lado del servidor para hacer la representación previa de las páginas, pero realmente brilla en el lado del cliente. Como es un marco de vista, se puede utilizar con backbone o cualquier otro marco de "parte frontal".

Uno de los puntos principales de React es su rapidez. Mantiene un DOM virtual en la memoria y virtualiza todos los eventos de las páginas web. Por lo tanto, los eventos virtuales se utilizan para mantener los agnósticos del navegador de eventos.

El tipo de DOM virtual hace que la programación sea un sitio dinámico como si estuviera programando un sitio web estático antiguo. Puede capturar todo el HTML para representarlo en el motor de visualización (como si estuviera "representando de nuevo" toda la página) y administrará las operaciones de DOM. Hace una diferencia entre el nuevo DOM virtual y el DOM virtual actual y solo inserta nodos que necesitan ser insertados. De esta manera, reduce el número de operaciones DOM y, por lo tanto, aumenta mucho la velocidad de renderizado.

¡Un buen lugar para comenzar es este tutorial que muestra cómo usar "Flux" (el flujo web diseñado por Facebook para su sitio) para realizar una aplicación de Todo!