J'ai écrit un code de test et utilisé require.js pour coopérer avec son plug-in text.js pour implémenter l'application à une seule page la plus simple. Il peut être enregistré facilement et faciliter l'examen futur.
Adresse git: https://github.com/lily1010/requirerespa
Jetons un coup d'œil au répertoire ci-dessous
Comme on peut le voir dans le projet ci-dessus, j'ai extrait CSS séparément et implémenté le chargement à la demande, c'est-à-dire que le test1.css sera chargé lorsque Test1.html est chargé et Test2.css sera chargé lorsque Test2.html est chargé.
Regardons d'abord le code index.html de l'entrée
<! Doctype html> <html> <ead> <meta charset = "utf-8" /> <title> </ title> <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no" /> <style type = "text / css"> user> </ body> <style type = "Text / CSSS"> </ </ body>> <style type = "Text / CSSS "> <script data-main = "js / main" src = "js / require.js"> </ script> <div> </div> </ body> </html>
Ce qui précède est très simple. Définissez d'abord les données d'entrée requi-traits. De plus, afin de charger CSS à la demande, j'ai défini un attribution CSS de classe.
2. Configurez le chemin et effectuez un traitement logique dans Main.js
require.config ({paths: {"jQuery": "lib / jQuery-1.11.0", "text": "lib / text", "text1": "../ template / test1.html", // prêter attention au chemin "text2": ".. style / test1.html", "css1": "../ le style / test1.cs", "CSS2": "../ style / test2.css"}}) require (['jQuery', 'Text! Text1', 'Text! Text2', 'Text! CSS1', 'Text! CSS2'], Fonction ($, Template1, Template2, CSS1, CSS2) {// Entrez la page et le fait sur PAGE TEST1.HTML $ (". CSS-Attribute"). Html (CSS1); $ (". Page"). $ (". Page"). Html (template2);Ce qui précède est la configuration des besoins les plus élémentaires, faites simplement attention à l'utilisation de text.js, c'est très simple
Trois, jetons un coup d'œil aux structures et styles de deux pages
①Le code test1.html est le suivant:
<div> <fontificateur> Cliquez sur moi pour sauter à la deuxième page du spa </ftones> </div>
②Le CSS de test1.html, c'est-à-dire que le code Test1.css est le suivant:
.test1 {position: absolue; en haut: 0; en bas: 0; à gauche: 0; à droite: 0; Color de fond: rouge;}. Skip {position: absolue; en haut: 50%; Gauche: 50%; -Webkit-transform: traduire (-50%, - 50%); Transformer: traduire (-50%, - 50%);}L'effet est le suivant:
③Le code test2.html est le suivant:
<div> <fontissage> Je suis la deuxième page, cliquez sur moi pour revenir à la première page </fut-bouton> </div>
④Le CSS de test2.html, c'est-à-dire que le code Test2.css est le suivant:
.test2 {position: absolue; en haut: 0; en bas: 0; à gauche: 0; à droite: 0; fond-couleur: rose;}. skip2 {position: absolue; en haut: 50%; Gauche: 50%; -Webkit-transform: traduire (-50%, - 50%); Transformer: traduire (-50%, - 50%);}L'effet est le suivant:
L'article ci-dessus nécessite une implémentation simple de l'application de page unique (SPA) est tout le contenu que j'ai partagé avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.