одна страница дизайн

Question

Что делать, если использовать только один HTML страницу с блоками внутри, как следующий

<div id="page1" style="display:block">...</div> 

<div id="page2" style="display:none">...</div> 

<div id="page3" style="display:none">...</div> 

Активный блок не имеет стиль = «дисплей: блок» другое «дисплей: нет», , когда блок становится активным " display: block "previous goes" display: none ".

AJAX сервер связи, например

$.post("json", { "name": $("#name").val(), "sex": $("#sex").val() }, 
function(data) { console.log("server responded", data); }); 

Каковы недостатки этого подхода?

Answer 1

Нет никаких недостатков в использовании чистого AJAX. Фактически, во многих отношениях это выгодно.

Если вы не планируете его правильно, у вас могут возникнуть проблемы. Например, вы привыкли иметь CSS-эффект 1 страницу за раз, но с чистым AJAX CSS будет влиять на каждую страницу.

Кроме того, все становится немного сложнее. Связывание с другой страницей становится сложнее, так как вы должны использовать JavaScript.

И, наконец, ваш APP теперь будет ТРЕБУЕТСЯ JavaScript, поэтому у меня будет достойный запас.

Answer 2

Это быстрый и динамичный, но при таком подходе отсутствует механизм закладок, пользователь не может сохранить определенную ссылку, потому что данные динамичны, также это не дружественная поисковая система, другой недостаток - кнопка истории назад и вперед не будет Работа.

Answer 3

Этот подход используется в некоторых мобильных веб-фреймворках, таких как jQuery Mobile, и предназначен для того, чтобы сделать веб-приложение более естественным. Это больше Web 2.0, чем традиционные веб-сайты или веб-приложения, где каждый переход на страницу предполагает поездку на сервер.

Я уверен, что вы уже знаете преимущества, поэтому давайте перейдем к недостаткам.

немного больше Initial Задержка:

Основной недостаток этого подхода заключается в том, что он займет немного больше времени, чтобы загрузить содержимое страницы из-за того, что вы получаете все HTML с сервера в одна поездка. Таким образом, начальное время загрузки может быть связано с большей задержкой, чем в традиционном приложении Web 1.0. Тем не менее, с помощью всего лишь нескольких страниц, по моему опыту, латентность недостаточно значительна, чтобы быть проблемой.

Потеря Кнопка Назад - Больше Сложность в сохранении истории:

Другим потенциальным недостатком является то, что, как разработчик, вы должны подойти к разработке вашего сайта по-разному. Поскольку вы переходите к страницам, скрывая один блок DIV и открывая другой, вы потеряете функциональность на задней панели. Это можно смягчить, используя хеш в URL-адресе для записи истории переходов страниц. Затем вам необходимо зарегистрировать событие, чтобы просмотреть хэш и перезагрузить старый контент, когда пользователь перейдет назад. Вам также необходимо изменить состояние объектов и переменных JavaScript, чтобы отредактировать старое состояние, что может добавить сложность для вашего приложения. Конечно, есть API и библиотеки, которые упрощают реализацию и помогают обеспечить хороший код, поддерживающий код.

Подробнее Stateful Области Предполагает Переосмысление подхода и возможное Learning Curve:

Наконец, вы должны помнить, что объем каждой страницы не сбрасывается после каждого перехода. Хотя на самом деле это может быть преимуществом в том, что ваше приложение более сдержанно, вам нужно укорениться в том, как думать, что каждая загруженная страница приведет к очистке всех переменных и данных JavaScript, которые вы установили.

Резюме:

Мое предложение, если вы собираетесь идти по этому пути, чтобы использовать библиотеку. Не изобретайте велосипед, если у вас нет веских оснований. Библиотеки, такие как jQuery mobile, помогают обеспечить хороший откат для старых браузеров, а некоторые даже убедитесь, что ваш сайт будет загружаться с использованием технологий Web 1.0 для случаев, когда JavaScript отключен.