Я написал тестовый код и использовал require.js для работы с плагином Text.js для реализации самых простых одностраничных приложений. Это может быть записано легко и облегчить будущий обзор.
Адрес GIT: https://github.com/lily1010/requirespa
Давайте посмотрим на каталог ниже
Как видно из вышеуказанного проекта, я извлекал CSS отдельно и реализовал загрузку по требованию, то есть test1.cs будет загружен при загрузке Test1.html, а тест2.cs будет загружен при загрузке Test2.html.
1. Давайте сначала посмотрим на код index.html
<! Doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <meta name = "viewport" content = "width = width device, начальная шкала = 1, минимальный шкал = 1, максимальный шкал = 1, user-scalbal = no"/> <style = " data-main = "js/main" src = "js/require.js"> </script> <div> </div> </body> </html>
Выше очень просто. Сначала определите данные о вводе requirejs. Кроме того, для загрузки CSS по требованию я определил класс CSS-атрибут.
2. Настройте путь и выполняйте логическую обработку в main.js
require.config ({paths: {"jQuery": "lib/jquery-1.11.0", "text": "lib/text", "text1": "../ template/test1.html", // Обратите внимание на путь "Text2": "../ Testm.html", "css1": "../Stle/test1. "CSS2": "../ Style/test2.css"}}) требуется (['jquery', 'text1', 'text! text2', 'text! css1', 'text! css2'], функция ($, шаблон1, template2, css1, css2) {//weent the Page test1. $ (". CSS-Attribute"). HTML (CSS1); $ (". Page"). Html (Template2);Выше всего является самой основной конфигурацией, просто обратите внимание на использование Text.js, это очень просто
3. Давайте посмотрим на структуры и стили с двумя страницами
① Код test1.html выглядит следующим образом:
<div> <buton> Нажмите меня, чтобы перейти на вторую страницу спа -салона </button> </div>
② CSS test1.html, то есть код test1.css выглядит следующим образом:
.test1 {позиция: абсолют; Верх: 0; Внизу: 0; слева: 0; Справа: 0; фоновый цвет: red;}. Skip {position: Absolute; Верх: 50%; Слева: 50%; -Вебкит-трансформ: перевод (-50%,-50%); Преобразование: перевод (-50%,-50%);}Эффект заключается в следующем:
③ Код test2.html выглядит следующим образом:
<div> <tutry> Я вторая страница, нажмите меня, чтобы вернуться на первую страницу </button> </div>
④ CSS test2.html, то есть код test2.css выглядит следующим образом:
.test2 {позиция: абсолют; Верх: 0; Внизу: 0; слева: 0; Справа: 0; фоновый цвет: pink;}. Skip2 {position: Absolute; Верх: 50%; Слева: 50%; -Вебкит-трансформ: перевод (-50%,-50%); Преобразование: перевод (-50%,-50%);}Эффект заключается в следующем:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.