Когда модуляризация фронта, не только JS требует модульного управления, но и HTML иногда также нуждается в модульном управлении. Здесь мы представляем, как реализовать модульную разработку HTML -кода через requirejs.
Как загрузить html с помощью requirejs
У Reuqirejs есть текстовый плагин, который может прочитать содержимое указанного файла, а чтение содержимого-это текст.
Как скачать текстовый плагин
Первый метод можно загрузить через NPM:
NPM Установка requirejs/Text
Второй метод также может быть загружен непосредственно с официального GitHub.
Просто скопируйте контент непосредственно в Text.js.
Как установить текстовый плагин
Вы можете настроить зависимость текстового плагина в main.js в requirejs, что похоже на jQuery. Просто убедитесь, что он может быть загружен в него с помощью нормальной нагрузки.
requirejs.config ({baseurl: './',paths: {' text ': path+'/require/text ', ...}, shim: {...}});Это также может быть размещено непосредственно в Baseurl.
Как использовать текст
В целевом модуле следуйте следующему синтаксису:
define (function (require) {var html = require ("text! html/test.html"); console.log (html);});или
определить (["text! html/test.html"], function (html) {console.log (html);});Как выполнить модульное развитие HTML?
После прочтения вышесказанного вы уже можете использовать текст, но все еще не знаете, как организовать фронтальный код.
Возьмите каштан:
На странице веб -сайта в блоге будет подняться на разные страницы в соответствии с навигацией выше. Если он находится на одной странице, легко подумать о исходном методе, кнопка навигации соответствует другому дивированию. Нажатие этой кнопки отобразит соответствующий Div; Другие DOV будут скрыты.
Затем код интерфейса может выглядеть так:
<html> <body> <av> Кнопка навигации 1, Кнопка навигации 2, кнопка навигации 3 </nav> <div style = "display: block"> страница, соответствующая кнопке 1 </div> <div style = "display: none"> страница, соответствующая кнопке 2 </div> <div style = "one none"> страница, соответствующая кнопке 3 </div> </body> </html>.
Такой код будет очень грязным ... и фронт-элитный HTML будет очень долгим ... не способствует обслуживанию.
Затем с текстовым плагином reuqirejs вы можете сделать это:
<html> <body> <av> Навигационная кнопка 1, Кнопка навигации 2, кнопка навигации 3 </nav> <div id = "target"> </div> </body> </html>
Затем в соответствующем модуле:
$ ('#target'). html (require ("text! Кнопка Target, соответствующая page.html"));Это сделает вас более непринужденным! Фронт-элитный код также может эффективно управляться с модулями!
Тем не менее, следует отметить, что этот метод приведет к недействительным событие, поэтому вы должны пережить событие после метода html ().
Я так много расскажу вам об использовании requirejs для модульной разработки в HTML, и я надеюсь, что это будет полезно для вас!