Quando a modularização do front-end, não apenas o JS precisa de gerenciamento modular, mas o HTML às vezes também precisa de gerenciamento modular. Aqui, introduzimos como implementar o desenvolvimento modular do código HTML através do requentJS.
Como carregar html usando requerjs
O Reuqirejs possui um plug-in de texto que pode ler o conteúdo de um arquivo especificado, e a leitura do conteúdo é o texto.
Como baixar o plugin de texto
O primeiro método pode ser baixado através do NPM:
NPM Instale requerjs/texto
O segundo método também pode ser baixado diretamente do Github oficial.
Basta copiar o conteúdo diretamente para text.js.
Como instalar o plugin de texto
Você pode configurar a dependência do plug-in de texto no main.js no requimjs, que é semelhante ao jQuery. Apenas verifique se ele pode ser carregado nele através de carregamento normal.
requirejs.config ({baseurl: './'.paths: {' text ': path+'/requer/text ', ...}, shim: {...}});Também pode ser colocado diretamente em Baseurl.
Como usar o texto
No módulo de destino, siga a seguinte sintaxe:
define (função (requer) {var html = requer ("text! html/test.html"); console.log (html);});ou
definir (["text! html/test.html"], function (html) {console.log (html);});Como realizar o desenvolvimento modular do HTML?
Depois de ler o acima, você já pode usar o texto, mas ainda não sabe como organizar o código front-end.
Pegue uma castanha:
A página do site do jardim do blog irá para diferentes páginas de acordo com a navegação acima. Se estiver em uma única página, é fácil pensar no método original, o botão de navegação corresponde a uma div diferente. Clicar nesse botão exibirá a div e correspondente; Outras divs estarão ocultas.
Então, o código do front-end pode ficar assim:
<html> <body> <V Nav> Botão de navegação 1, botão de navegação 2, botão de navegação 3 </nav> <div style = "display: block"> página correspondente ao botão 1 </div> <div Style = "Display: None"> Página correspondente a Button 2 </div>
Esse código será muito confuso ... e o HTML front-end será muito longo ... não propício à manutenção.
Então, com o plug -in de texto de reuqirejs, você pode fazer isso:
<html> <body> <VN> Botão de navegação 1, botão de navegação 2, botão de navegação 3 </nav> <div id = "Target"> </div> </body> </html>
Então, no módulo correspondente:
$ ('#Target'). HTML (requer ("Botão de Target de texto! correspondente à página.html"));Isso o tornará mais casual! O código front-end também pode ser efetivamente gerenciado com módulos!
No entanto, deve -se notar que esse método fará com que o evento seja inválido - portanto, você deve rebidar o evento após o método html ().
Vou apresentar muito a você sobre o uso de requisitos para desenvolvimento modular no HTML, e espero que seja útil para você!