Eu escrevi um código de teste e usei o requer.js para trabalhar com um plug-in text.js para implementar o aplicativo de página única mais simples. Pode ser registrado com facilidade e facilitar a revisão futura.
Endereço Git: https://github.com/lily1010/requirespa
Vamos dar uma olhada no diretório abaixo
Como pode ser visto no projeto acima, extraí CSS separadamente e implementei o carregamento sob demanda, ou seja, o teste1.css será carregado quando o teste1.html for carregado e o teste.CSS será carregado quando o teste.html for carregado.
1. Vejamos o código de entrada Index.html primeiro
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> </style> </head> <body> <script data-main = "js/main" src = "js/requer.js"> </script> <div> </div> </body> </html>
O acima é muito simples. Primeiro, defina os dados de entrada do requentJS. Além disso, para carregar o CSS sob demanda, defini um CSS-ATRIBUTO CLASS.
2. Configure o caminho e faça processamento lógico em main.js
requim.config ({Caminhos: {"jQuery": "lib/jQuery-1.11.0", "text": "lib/text", "text1": "../ model/test1.html", // preste atenção ao caminho "text2": "/mplate/modply2.html "," css1 ":" ": "/mplate/testml", "" css1 ":" ". "css2": "../ style/test2.css"}}) requer (['jQuery', 'text! text1', 'text! text2', 'text! css1', 'text! css2'], function ($, modelo 1, modelo 2, cs1, css2) {// $ (". CSS-ATRIBUTO"). $ (". Página"). HTML (template2);O exposto acima é o mais básico requer configuração, basta preste atenção ao uso de text.js, é muito simples
3. Vamos dar uma olhada nas estruturas e estilos de duas páginas
①O código test1.html é o seguinte:
<div> <button> Clique em mim para pular para a segunda página do spa </butut> </div>
②Os CSs de Test1.html, ou seja, o código Test1.css é o seguinte:
.test1 {posição: absoluto; topo: 0; Inferior: 0; Esquerda: 0; Direita: 0; Background-Color: Red;}. Pule {Posição: Absolute; TOP: 50%; Esquerda: 50%; -Webkit-transform: traduzir (-50%,-50%); Transformar: traduzir (-50%,-50%);}O efeito é o seguinte:
③ O código Test2.html é o seguinte:
<div> <butto> Eu sou a segunda página, clique em mim para voltar para a primeira página </botão> </div>
④Os CSs de Test2.html, ou seja, o código Test2.CSS é o seguinte:
.test2 {posição: absoluto; topo: 0; Inferior: 0; Esquerda: 0; Direita: 0; Background-Color: Pink;}. Skip2 {Posição: Absolute; TOP: 50%; Esquerda: 50%; -Webkit-transform: traduzir (-50%,-50%); Transformar: traduzir (-50%,-50%);}O efeito é o seguinte:
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.