Ich habe einen Testcode geschrieben und fordert.js verwendet, um mit seinem Plug-in-text.js zusammenzuarbeiten, um die einfachste einseitige Anwendung zu implementieren. Es kann leicht aufgezeichnet werden und die zukünftige Überprüfung erleichtern.
GIT -Adresse: https://github.com/lily1010/requirespa
Schauen wir uns das Verzeichnis unten an
Wie aus dem obigen Projekt hervorgeht, habe ich CSS getrennt extrahiert und die On-Demand-Belastung implementiert, dh test1.css werden geladen, wenn test1.html geladen ist, und Test2.CSS wird geladen, wenn test2.html geladen wird.
Schauen wir uns zuerst den Code für Eintrag index.html an
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> </title> <meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1, minimal-scale = 1, maximal-scale = 1, user-scalable <script data-main = "js/main" src = "js/required.js"> </script> <div> </div> </body> </html>
Das obige ist sehr einfach. Definieren Sie zunächst die Daten-Main für RequiredJS-Einträge. Um CSS auf Demand zu laden, habe ich außerdem ein CSS-Attribut der Klasse definiert.
2. Konfigurieren Sie den Pfad und führen Sie logische Verarbeitung in main.js durch
Required.config ({Pfade: {"jQuery": "lib/jQuery-1.11.0", "text": "lib/texte", "text1": "../ template/test1.html", // auf den Pfad "text2": "../ template/test2.html", "CSS1:": "CSS1:" "CSS2": "../ style/test2.css"}}) fordern (['jQuery', 'text! text1', 'text! text2', 'text! css1', 'text! $ (". CSS-Attribute"). HTML (CSS1); $ (". Seite"). HTML (Template2);Die oben genannten sind die grundlegendste Erfordernisse Konfiguration. Achten Sie einfach auf die Verwendung von Text.js, es ist sehr einfach
Drei sehen wir uns die zweiseitigen Strukturen und Stile an
①Die test1.html Code ist wie folgt:
<Div> <taste> Klicken Sie auf mich, um zur zweiten Seite des Spa </button> </div> zu springen
②Die CSS von test1.html, dh Test1.css -Code lautet wie folgt:
.Test1 {Position: absolut; Top: 0; unten: 0; links: 0; Rechts: 0; Hintergrundfarbe: rot;}. Skip {Position: absolut; Top: 50%; Links: 50%; -Webkit-Transformation: Translate (-50%,-50%); Transformation: Translate (-50%,-50%);}Der Effekt ist wie folgt:
③Die test2.html Code lautet wie folgt:
<Div> <buttons> Ich bin die zweite Seite. Klicken Sie auf mich, um zur ersten Seite zurückzukehren. </button> </div>
④Die CSS von Test2.html, dh Test2.css Code lautet wie folgt:
.Test2 {Position: absolut; Top: 0; unten: 0; links: 0; Rechts: 0; Hintergrundfarbe: Pink;}. Skip2 {Position: absolut; Top: 50%; Links: 50%; -Webkit-Transformation: Translate (-50%,-50%); Transformation: Translate (-50%,-50%);}Der Effekt ist wie folgt:
Der obige Artikel erfordert eine einfache Implementierung der Einzelseiten -Anwendung (SPA) ist der gesamte Inhalt, den ich mit Ihnen geteilt habe. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.