Escribí un código de prueba y usé requerir.js para cooperar con su complemento Text.js para implementar la aplicación de página única más simple. Se puede registrar fácilmente y facilitar la revisión futura.
Dirección de Git: https://github.com/lily1010/requirespa
Echemos un vistazo al directorio a continuación
Como se puede ver en el proyecto anterior, extraí CSS por separado e implementé la carga a pedido, es decir, test1.css se cargará cuando se cargue test1.html, y test2.css se cargará cuando se cargue test2.html.
Veamos el código de entrada index.html primero
<! Doctype html> <html> <fead> <meta charset = "utf-8"/> <title> </title> <meta name = "viewport" content = "width = dispositivo-width, inicial-escale = 1, mínimo-escale = 1, maximum-escale = 1, user-scalable = no"/> <syle type = "text/css" </style </style </style </style </styly </style <tyle <tyly </styly <tyly </styly </styly </styly </styly <tyle <tyle <tyle <tyle <style styles " <script dataMain = "js/main" src = "js/require.js"> </script> <div> </div> </body> </html>
Lo anterior es muy simple. Primero, defina el control de datos de entrada requestjs. Además, para cargar CSS a pedido, definí un atributo CSS de clase.
2. Configure la ruta y haga procesamiento lógico en main.js
require.config ({raths: {"jQuery": "lib/jQuery-1.11.0", "Text": "lib/text", "text1": "../ test1.html", // presta atención a la ruta "text2": "../ Template/test2.html", "css1": "../ style/test1.css", Template/test2.html "," css1 ":" ../ estilo/test1.css ", Template/Template," "css2": "../ style/test2.css"}}) require (['jQuery', 'Text! Text1', 'Text! Text2', 'Text! Css1', 'Text! CSS2'], function ($, Template1, Template2, CSS1, CSS2) {// Ingrese la página y establecida a la página Test1.htmltmltmlmlmltmlml $ (". CSS-Attribute"). Html (CSS1); $ (".Los anteriores son la configuración más básica que requiere, solo preste atención al uso de text.js, es muy simple
Tres, echemos un vistazo a las dos estructuras y estilos
①The test1.html El código es el siguiente:
<Div> <botón> Haga clic para saltar a la segunda página del spa </botón> </div>
②El CSS de Test1.html, es decir, el código test1.css es el siguiente:
.test1 {posición: absoluto; arriba: 0; Abajo: 0; Izquierda: 0; Derecha: 0; Color de fondo: rojo;}. Skip {Position: Absolute; arriba: 50%; Izquierda: 50%; -Webkit-transform: traducir (-50%,-50%); transformar: traducir (-50%,-50%);}El efecto es el siguiente:
③ El código test2.html es el siguiente:
<Div> <botón> Soy la segunda página, haga clic en mí para volver a la primera página </botón> </div>
④El CSS de test2.html, es decir, el código test2.css es el siguiente:
.test2 {posición: absoluto; arriba: 0; Abajo: 0; Izquierda: 0; Derecha: 0; Color de fondo: Pink;}. Skip2 {posición: Absolute; arriba: 50%; Izquierda: 50%; -Webkit-transform: traducir (-50%,-50%); transformar: traducir (-50%,-50%);}El efecto es el siguiente:
El artículo anterior requiere una implementación simple de la aplicación de una sola página (SPA) es todo el contenido que he compartido con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.