Одностраничное приложение

Кокосовая пальма в океане

Кокосовая пальма в океане

Одностраничное приложение или SPA — single page application  — сайт или веб-приложение, в основе которого находится единственный HTML-документ. Обычно в подобном приложении на HTML-странице подключается JavaScript-фреймворки («каркасы» для разработки) тип AngularJS, BackboneJS, Ember.js и др. Эти фреймворки позволяют отображать на странице разное содержимое, в зависимости от действий пользователей и/или состояния URL страницы. Изменение состояния может происходить при нажатии на ссылки, href которых состоит из фрагмента URL начинающегося с символа «#». Иногда с пары символов «#!», в случае поискового продвижения это сайта (в Яндексе).

Содержимое подобного сайта подгружается с сервера при помощи AJAX — асинхронного JavaScript и XML. Для реализации работы через AJAX нужна также реализация части приложения на серверной стороне. Обычно используются скриптовые языки. Для удобства работы и масштабирования системы выбирают REST (архитектура взаимодействия частей приложения).

Одностраничное приложение и JavaScript-фреймворки

Для построения одностраничных приложений используют различные фреймворки:

  • backbone.js (рус.)- легкий библиотека, написана автором CoffeeScript и используемая для разработки SPA-страниц с поддержкой REST архитектуры
  • ember.js (рус.)- тоже бесплатный JavaScript-фреймворк основанный на модули Модели-Представления-Контроллера (шаблон разработки — MVC)
  • angular.js (рус.) — фреймворк, MVC. Один из авторов продолжается заниматься фреймворком, работая в Google.

Одностраничный сайт html

Можно построить используя работу с селекторами по идентификатору и целевому селектору :target, CSS-свойства для управлением видимостью содержимого (display, visibility и margin). Шаблоны одностраничного сайта включает все необходимое содержимое для работы посетителя. В этом простейшем случае подключать JS-фреймворки обходимости нет.

Псевдокласс :target позволяет выбрать такие HTML-элементы на странице, атрибут id у которых совпадает со значением хеша из адресной строки. Например, если в адресной строке присутствует URI: http://htmllab.ru/test-po-html#result, то на HTML-странице будет найден элемент с идентификатором #result и к нему применятся CSS-стили.

Каркас такой страницы может выглядеть так (внимание! Для упрощения используется одинаковая высота у всех страниц. На практике объем содержимого буде разным)


.container{
font: 1em sans-serif;
width:600px;
min-height:500px;
margin:auto;
border:1px solid #000;
position: relative;
}
h1,h2,h3,h4,h5,h6 {margin: 0;}
.page{
width:600px;
height:430px;
position: absolute;
top:60px;
display: none;
background-color: #fff;
}
div:first-of-type{
display:block;
z-index: 1;
}
div:target{
display:block;
z-index: 2;
}

Верстка

<div class="container">
<h1>Одностраничный статичный сайт</h1>
<nav>
<a href="#">ссылка1</a>
<a href="#page2">ссылка2</a>
<a href="#page3">ссылка3</a>
<a href="#page4">ссылка4</a>
</nav>
<div class="page" id="page1" >страница 1 одностраничного сайта</div>
<div class="page" id="page2">страница 2 одностраничного сайта</div>
<div class="page" id="page3">страница 3 одностраничного сайта</div>
<div class="page" id="page4">страница 4 одностраничного сайта</div>
</div>

Посмотреть пример работы. Со страницами, использующими JS-фреймворки работа строится другим способом.

Добавить комментарий