Rango de uso:
Para proyectos de gestión de información como OA, MIS, ERP, etc., el sitio web no se considera por el momento.
Problemas encontrados:
Para completar un proyecto, a menudo necesita hacer referencia a muchos archivos JS, como jQuery.js, easyui, etc. También hay algunas columnas de archivos JS que escribí, entonces, ¿cómo se pueden cargar estos archivos convenientemente? Si cambia el archivo, ¿cómo puede el cliente actualizar el caché a tiempo? Sería aún mejor si la eficiencia de operación puntual pudiera mejorarse.
Objetivo:
1. Puede hacer referencia fácilmente a los archivos JS.
2. Intente usar varios cachés para evitar la lectura frecuente de archivos del servidor.
3. Si el archivo JS se actualiza o se agrega o reduce, el cliente debe poder actualizar automáticamente e de inmediato.
4. Reutilización de archivos JS.
Estructura de la página:
En general, proyectos como OA y MIS se implementan principalmente utilizando Frameset o iframe, lo que trae los conceptos de página principal y página infantil. Podemos usar esto para hacer un escándalo.
Las páginas web se pueden dividir en tres partes: shell, página de inicio, etiqueta, lista de datos, formulario (agregar, modificar). Porque el método de cargar JS aquí debe usar esta estructura de página, y es precisamente por esta razón que el sitio web no es compatible con el momento.
Parece familiar ver esta imagen. Sí, esa es la estructura.
texto
Hoy en día, cuando se trata de aplicaciones de versión web, confía cada vez más en varios JS, como JQuery de terceros, EasyUi, My97, etc., así como varios JS escritos por mí mismo. Se deben implementar más y más funciones, cada vez más JS debe usarse, y se modifican con frecuencia más archivos JS. Surgen muchos problemas, como escribir muchos <script src = ""> para cada página. Esto es demasiado problemático. ¿Cuántas páginas necesita cambiar para agregar un nuevo archivo JS? ¿Cómo actualizar el archivo JS inmediatamente? Cómo hacer que el cliente cargue JS más rápido. Algunos archivos JS también tienen dependencias. ¿Cómo asegurar el orden de carga? Este artículo trata sobre compartir mi solución.
Carga dinámica
Obviamente, es problemático usar <script> para cargar JS en la página, entonces, ¿qué debo hacer? Después de pensarlo, todavía uso la carga dinámica para resolverla. También busqué en línea y descubrí que existen muchos métodos, incluidos los escritos por ellos mismos y los organizados en marcos (como SEEJS). A veces todavía siento que soy más hábil al hacer uno, así que planeo escribir uno solo.
¿Cómo cargar dinámicamente? ¿Usando el método proporcionado por jQuery? Esto está bien, pero la página debe referirse a jQuery y al JS que escribí para cargar el archivo JS. En otras palabras, si tiene que escribir dos <script> s en una página, será problemático. Si puede escribir uno, no debe escribir dos. Aunque es solo uno más, es realmente problemático tener uno más. Así que decidí escrito a mano un pequeño método de carga dinámica por mí mismo.
¿Qué debo hacer si no puedo escribir? La tía Baidu viene y ayuda. Después de buscar todo tipo de cosas, finalmente encontré un método relativamente ideal, por lo que usaré esto.
La copia del código es la siguiente:
/* Las funciones que implementan la carga dinámica de JS provienen de Internet. Después de un poco de modificación, puede ser compatible con IE10 */
var LoadScript =
{
$$: function (id) {return document.getElementById (id); },
etiqueta: function (elemento) {return document.getElementsBytagName (elemento); },
ce: function (elemento) {return document.createElement (elemento); },
js: function (url, devolución de llamada) {
var s = loadScript.ce ('script');
s.type = "text/javaScript";
S.Src = url;
if (document.documentMode == 10 || document.documentMode == 9) {
s.onerror = s.onload = loaded;
} demás {
S.OnreadyStateChange = Ready;
s.onerror = s.onload = loaded;
}
loadScript.tag ('Head') [0] .AppendChild (s);
función lista () {/*ie7.0/ie10.0*/
if (s.readyState == 'cargado' || s.readyState == 'completa') {
llamar de vuelta();
}
}
función cargada () {/*chrome/ie10.0*/
llamar de vuelta();
}
}
};
Orden de carga
El nuevo código se ha completado. Lo siguiente es cómo cargar otros archivos JS. Dado que hay muchos archivos y hay ciertas dependencias, lo pensaré y haré un diccionario de archivos JS, y luego haré un orden de carga y lo cargaré en este orden.
Para ser más estable, decidí usar el método de cargar uno por uno, es decir, cargar uno JS y luego cargar otro JS. Esto asegura las dependencias. Por supuesto, la desventaja es que la velocidad de carga será más lenta. En general, las páginas web se pueden cargar con múltiples archivos JS, que serán más rápidos.
Usar caché
En general, los navegadores tendrán un caché para varios recursos (como páginas web, imágenes, JS, CSS, etc.), y ya no los descargarán al servidor si ya los tiene. Parece bueno, pero hay dos problemas:
A. ¿Cómo determina el navegador si el archivo JS en caché es el último?
B. El archivo JS se ha actualizado. ¿Cómo obligar al navegador a actualizar?
¿Cómo juzga el navegador? No sé mucho sobre los pasos específicos, pero sé que hay un paso que ir al servidor para preguntar si el archivo JS I es el último, y luego puedo determinar si el caché local es el último. Si es lo último, no me molestaré. Si no es así, descargaré el último. Es decir, incluso si el cliente ya tiene un caché de archivos JS, el navegador debe confirmar si es lo último y aún irá al servidor para preguntar. Esta es una lucha. Por supuesto, en general, este proceso será muy rápido, pero a veces este proceso será muy lento.
Por lo tanto, es mejor tratar de evitar la carga de JS. Entonces se introduce la "Reutilización de los archivos JS".
Actualizar el archivo JS
El archivo JS se ha actualizado, pero el navegador todavía está utilizando el archivo JS anterior porque ha almacenado en caché, y es terco de que el archivo JS en caché es el último. ¿Qué tengo que hacer?
La forma más fácil es cargar JS con un número de versión seguido de él. Si hay una actualización, el número de versión será +1. Por ejemplo, xxx.js? V = 1. Después de actualizar el archivo JS, es xxx.js? V = 2. De esta manera, JS definitivamente se actualizará.
Parece simple, pero ¿cómo agregar este número de versión? ¿Cómo actualizar el número de versión en sí?
Reutilizar
Necesitamos mirar primero la imagen de arriba, que es la estructura de la página, con una página de shell (o página de inicio), que llamamos la página principal. Hay varias páginas cargadas por iframes, y las agregamos a las subpáginas.
El enfoque general es cargar jQuery.js en la página principal, y luego jQuery.js en la página del niño. Por supuesto, cuando la subpaga está cargando jQuery.js, se extrae directamente del caché y, en general, ya no molesta al servidor.
Sin embargo, dado que la página principal se ha cargado, ¿por qué la página del niño debe cargarse nuevamente? ¿Está bien cargarlo directamente en la página principal? Busqué en línea y nadie parecía hacer eso. Tal vez soy demasiado alternativa, solo quiero implementar este método. La ventaja es que todos los archivos JS están cargados en la página principal, y la página infantil usa directamente el JS cargado en la página principal, de modo que la página del niño no necesita jugar con los archivos JS. Esto también puede ser más eficiente. Después de todo, incluso si usa el caché para cargar, debe juzgar. Luego, al hacer una acción de carga, todavía habrá una pequeña pérdida. Cuantos más archivos JS, más obvio será.
Entonces, cómo implementarlo parece simple pensarlo.
Use jQuery en la página principal
Var aa = $ ('div'); // Encuentra todos los divs en la página principal
¿Es esto posible en la subpaga?
Var bb = top. $ ('Div'); // se puede encontrar el div, pero no es el div de la página del niño sino el div en la página principal.
¿Qué está sucediendo? La razón es el rango de búsqueda. JQuery tiene tres parámetros. Por lo general, solo usamos el primero, y el último se ignora. Entonces, ¿cuál es el segundo parámetro? Ese es el rango de búsqueda. ¿Dónde buscará jQuery cuando no se especifique? Busque en la página que carga jQuery, en lugar de buscar en la página que llama $.
La solución también es muy simple, solo agregue un parámetro
Var bb = top. $ ('Div', documento); // especificar el rango de búsqueda: documento de la subpage
Espera, esto parece muy molesto. Al escribir un script, también debemos considerar si este script se ejecuta en la página principal o en la página del niño.
Ok, haga un paquete simple para evitar este problema. Escribir una función en la subpage
La copia del código es la siguiente:
función $ (p1) {
devolver top. $ (P1, documento);
}
Ok, ¿está hecho el trabajo? ¡Por supuesto que no! Para predecir lo que sucede después, escuche el próximo desglose.
PD: Vista previa del próximo episodio. Es el código de implementación específico, y hay algunas ideas e ideas. No sé si tienes algo más que saber. Si es así, responda a continuación. Gracias primero.