Ver Mensaje Individual
  #2 (permalink)  
Antiguo 26/04/2016, 09:13
Avatar de dashtrash
dashtrash
Colaborador
 
Fecha de Ingreso: abril-2007
Ubicación: Ni en Sevilla,ni en Sanlúcar..qué más da..
Mensajes: 926
Antigüedad: 12 años, 8 meses
Puntos: 269
Respuesta: Cual es la mejor forma de gestionar los scripts .js

Te cuento las líneas principales de cómo lo gestiono yo. Esto habría que adaptarlo según el backend que tengas.
Primero, una cuestión de enfoque:
- una página web es un html más un conjunto de dependencias.Estas dependencias son js, css, imágenes, etc.
Esto parece una obviedad, pero no lo es cuando se construye sobre ello:
- Una página debe *conocer* sus dependencias.Es decir, no es que simplemente se metan tags "scripts" y "link rel" en la plantilla.Eso lleva al caos en poco tiempo.
Lo que más exactamente quiere decir eso, es que la clase base "Page" tiene un método que es capaz de devolver la configuración de dependencias de la página.
- Este método es el que es usado al renderizar la plantilla, para generar el código necesario para incluir esos scripts/css.

Este código no es necesariamente tags html "<script".Puede ser una definición utilizada por require.js. Puede ser que tengas un combinado/minificado js para esa página.

Por ejemplo, supongamos que en la página index necesitas jQuery y Google Analytics.
Entonces, la clase IndexPage:
Código PHP:
Ver original
  1. function getDependencies()
  2.     {
  3.            return array("js"=>array("jQuery","GoogleAnalytics"));
  4.     }
(En realidad, esto es una versión simplificada...)
Por cada uno de esos elementos, se busca su definición, que es única para todo el site.Digamos que está en la clase HTMLDependencyManager:
Código PHP:
Ver original
  1. function getDependencyConfig()
  2.      {
  3.               return array(
  4.                     "jQuery"=>array(
  5.                                "url"=>"....",
  6.                                "minificable"=>true,
  7.                                "combinable"=>true,
  8.                                "requires"=>array()
  9.                      ),
  10.                      "GoogleAnalytics"=>array(
  11.                          "url"=>"...",
  12.                          ...
  13.                      )
  14.                                
  15.               );
  16.       }

Ahora la página "sabe" cuáles son sus dependencias.Lo importante es que esta información es independiente de cómo se introducen las dependencias en la plantilla.
Ejemplos de cosas que se pueden hacer:
- En deployment, generar distintos minificados por cada tipo de página, o un minificado común + uno por página.
- Paralelizar requests: si se especifica una dependencia como un path local, rotar distintos subdominios para paralelizar la carga.
- Estrategias de carga: si la página, por cada dependencia, indica si la carga es asíncrona o no, si el script se carga en respuesta a un evento, si se carga on-demand, etc.

Todo esto lleva al final al uso constante de Promises, y programación asíncrona.
Para que más o menos te hagas una idea, el código acaba siendo del tipo:
Código Javascript:
Ver original
  1. App.getModule("User").then(
  2.           function(user){
  3.                if(user.isLogged())
  4.                {...}
  5.           });
Donde App es un gestor central (la aplicación) y el módulo "User", es una de las dependencias js especificadas en la página, y el parámetro "user" es la instancia del módulo "User".
Si los ficheros necesarios para que funcione el módulo "User" están cargados o no, y, si no lo están, de dónde se descargan,etc, son transparentes al código.

En definitiva, es *parecido* a require.js, pero con más metadata, y pensando en su integración por el lado del servidor.