J'ai écrit un code de test et utilisé require.js pour travailler avec un 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é.
1. Examinons d'abord l'index de l'entrée.html
<! 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
3. 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:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.