Los componentes JS generalmente vienen con una imagen CSS, pero puede ser un poco problemático usarlo de esta manera. Para que el componente esté lo suficientemente solo, se me ocurrió la idea de empaquetar la imagen CSS en js y luego. reduciendo el número de solicitudes por cierto. Esto parece ser más importante, jeje.
Entonces, ¿cómo empaquetar? Aunque existen soluciones como paquetes de recursos , ¡nuestros usuarios principales todavía usan navegadores de moda como ie6!
Mi solución:
- CSS : CSS puede almacenarse en js como una cadena y js agregarlo dinámicamente a la página. Es posible que la página no sea adecuada para su uso, pero el componente generalmente no se verá afectado.
- Imagen : Las imágenes utilizadas en CSS se compilan en js usando dataURI ( RFC 2397 ) y MHTML ( RFC 2557 ). ( dataURI y MHTML escritos por Qin Ge todavía se recomiendan a los estudiantes que no saben qué son). Si desea una ruta absoluta en CSS, también puede guardar js. Si se usa js directamente, es teóricamente posible, pero generalmente es mejor simplemente cambiar el nombre de clase de js.
- flash : También se pueden empaquetar algunos flashes relativamente pequeños, como almacenamiento, copia, etc. Sin embargo, ahora podemos resolver el problema de los que no son IE, utilizando enlaces externos.
A continuación se muestra un ejemplo de prueba de embalaje .
Algunos detalles y enredos
- No es necesariamente razonable empaquetar todas las imágenes en js. Lo que se empaqueta deben ser las imágenes que se deben utilizar.
Entonces, ¿es mejor empaquetar las imágenes excluidas en otro paquete o usar las imágenes directamente? - Las imágenes se pueden comprimir primero y luego editar. La herramienta de compresión de imágenes que elijo es pngout y normalmente uso
-s5 .
¿Alguien ha realizado algunas pruebas con datos sin comprimir en base64? Probablemente no , cada uno puede hacer su propio juicio. - Las referencias de imágenes repetidas serán muy grandes si usa dataURI directamente, y gzip es tan estúpido como un cerdo y no lo comprimirá.
Elijo guardarlo como una variable js, mientras que mis compañeros de clase en Taobao usan el método de clase. - MHTML no se puede mostrar en ie7+/vista debido a la falta de delimitador final. Win03sp2 carece
Content-Type y provocará mensajes de seguridad. La razón es que MIME no es estándar y no se puede omitir todo. - ¿Debo elegir empaquetar todo en un archivo o empaquetarlo en dos archivos según los tipos MHTML y dataURI y enviar el archivo según ua en el servidor o leerlo inteligentemente a través de la biblioteca de clases? Parece que esto último es más armonioso.
- Hay un problema con el uso de dataURI para compilar swf. Se dice que no hay problema con fp8, pero ahora es fp10.
Otra solución individual es empaquetar js en swf, pero no parece armonioso.
ejemplo multiparte/relacionado
No es estándar pero se pueden ejecutar saltos de línea también son muy importantes.
Tipo de contenido: multiparte/relacionado; límite="_BAIDU_YOUA_BB_YEP"
--_BAIDU_YOUA_BB_YEP
Tipo de contenido:image/png
Ubicación del contenido: logo.png
Codificación de transferencia de contenido: base64
...base64...
--_BAIDU_YOUA_BB_YEP
Tipo de contenido:image/png
Ubicación del contenido:nono.png
Codificación de transferencia de contenido: base64
...base64...
--_BAIDU_YOUA_BB_YEP--
