Primero, permítanme describir la red de nuestra generación.
Esta es una era de HTML5, esta es una era en la que javascript es único, y esta es una era en la que el front-end y el back-end están divididos.
Hablando de javascript en el front-end, mucha gente dirá inmediatamente, MVVM, angular, backbone, avalon, react, ...
Sí, estos son excelentes frameworks de JavaScript y todos pueden hacer excelentes trabajos por sí mismos. Pero imagina un escenario en el que el desarrollo está dividido, el artista proporciona el prototipo de interfaz web y nuestros programadores agregan contenido dinámico a la página estática para sintetizar el contenido web final. Parece normal en la superficie, pero es el comienzo de un interminable dolor de huevos. Cuando terminamos una versión, los requisitos cambiaron, agregando un banner, agregando un marco de viñeta y así sucesivamente. El arte ha hecho cambios a la versión original, y seguimos los cambios. Esto es bastante doloroso. Es necesario entender qué ha cambiado el arte y cómo cada etiqueta, css, js afecta los elementos y el comportamiento de la página. Si entendiera todo, el artista estaría preocupado ...
De lo que quiero hablar aquí es de una solución para este escenario. El front-end estático es responsabilidad del artista y el back-end de datos es responsabilidad del programador. Para cada página, el programador solo escribe unos pocos js para aplicar los datos a la página, y puede volver fácilmente a la versión original para que el artista la modifique. El programa de back-end solo proporciona datos en formato json. Ajax se usa para la misma fuente y jsonp se usa para dominios cruzados. Después de que la página recibe los datos, se actualiza el contenido correspondiente. Durante la implementación, las páginas estáticas se colocan en apache y los programas dinámicos se colocan en tomcat o weblogic, lo que también puede equilibrar la carga y reducir la presión sobre el servidor de aplicaciones.
Este tipo de pensamiento es bueno, pero tienes que pasar algunos niveles si quieres jugar bien. Vamos a discutirlos uno por uno:
1. Inicialice los datos
Imagine que se envía una solicitud de product.html? Id = 123 a Apache y se devuelve el archivo estático product.html al navegador. Al renderizar este html, se envía automáticamente una solicitud product.do a tomcat para obtener los datos. Cómo saber id = 123 en este momento, solo mire el referente en el encabezado de la solicitud, por supuesto, debe analizarlo y extraerlo usted mismo. Si desea mantener el tiempo de espera lo más breve posible, puede tomar los datos mientras renderiza el html y luego realizar un proceso de sincronización más tarde. P.ej:
<head> ... // carga jquery <script> var prdData = null; var synFlag = false; $. post ('product.do', {}, function (data) {prdData = data; initData ();} , 'json'); </script> </head> <body> ... <script> synFlag = true; initData (); function initData () {
if (synFlag && prdData! = null) {...} } </script> </body>
2. Internacionalización I18N
Dividir el mensaje en dos categorías, información mostrada de forma anormal, este tipo de práctica es manejada por el programa del servidor como antes. La información que se muestra normalmente (como la etiqueta) se realiza con js. Escriba un archivo js, como i18n.js
var i18n = {
en: {título: "título", nombre: "nombre", ...},
zh: {título: "标题" ， nombre: "名称", ...}}
Escribe una función para cargar i18n
function loadI18N (locale) {
var msgs = i18n [locale];
$ ('# título'). text (msgs.title);
$ ('# nombre'). text (msgs.name);}
Para cambiar la configuración regional, no es necesario que solicite datos, pero debe indicarle al servidor el idioma actual
function switchLocale () {
locale = locale == 'en'? 'zh': 'en';
$ .post ('locale.do', {locale: locale});
loadI18N (configuración regional);}
3. Anidación de páginas
Al usar jsp o freemaker antes, fue muy conveniente usar include, import, etc. ¿Cómo afrontar esta situación ahora? Hay dos maneras
Método 1: jquery.load ()
Después de cargar los datos iniciales, obtenga la configuración regional, luego $ ('# target'). Load ('target _' + locale + '. Html')
Método 2: CSS
El método uno requiere dos solicitudes, a veces se siente lento. Si desea ser más rápido, puede escribir las versiones en chino e inglés en el primer html, establezca style = "display: none", cuando se carguen los datos iniciales, use $ ('# target _' + locale) .show () Enséñalo.
4. Envío de formularios
Los datos del formulario deben enviarse de forma asincrónica y el programa del servidor devuelve una señal de éxito o un mensaje de error. Si es un mensaje de error, se mostrará en la posición correspondiente. Si es un signo de éxito, use js para pasar a la página siguiente.