JQuery Mobile-pageinit против PageShow

Question

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

У меня есть домашняя страница, которая загружает данные, используя $.ajax() для некоторых разделов. Я загружаю данные в Pageinit. Также привязываю события click и swipe только в pageinit. И также я заметил, что pageinit не вызывается, когда вы возвращаетесь с другой страницы.

Была еще одна проблема, когда мы использовали карусель с помощью swipe.js. Он не загружается должным образом, когда я использую метод pageinit. Но работает нормально при загрузке в методе pageshow. Что может быть причиной для вызова Pageinit, когда мы используем кнопку возврата браузера.

Кроме того, играет ли роль кэширования какую-либо роль в принятии решения о том, где разместить логику загрузки данных, события привязки и т. Д. Было бы лучше, если бы кто-то мог объяснить, скажем, загрузку данных домашней страницы, а затем навигацию и возврат с другой страницы.

Answer 1

вступление

Всю информацию, найденную здесь, также можно найти в моем блоге ARTICLE, вы также найдете рабочие примеры.

Разница между Pageinit и PageShow

Давайте начнем с самого начала. Как вы уже знаете, разработчики jQuery предоставили нам события страницы, чтобы заполнить пробел, который готовый документ не может выполнить. В то время как готовый документ может сказать вам, что контент готов внутри DOM, нам нужно больше, чем это, потому что jQuery Mobile все еще нуждается в улучшении разметки контента (улучшении стиля контента).

Есть несколько страниц событий, и у каждого из них есть своя цель. Некоторые срабатывают до того, как содержимое страницы может быть улучшено (например, pagebeforecreate), чтобы можно было добавить динамическое содержимое. Некоторые из них будут срабатывать только во время изменения страницы, например pagebeforechange.

Но позвольте как вернуться к вашему вопросу. Pageinit здесь, чтобы быть jQuery Мобильная версия document ready, Хотя вы все еще можете использовать document ready все еще логично иметь такую ​​же альтернативу среди событий страницы.

Как вы уже сказали, вы используете pageinit для привязки событий (например, события щелчка или удара), и это хорошее решение. В основном потому что jQuery Mobile страдает от проблемы, называемой "связывание нескольких событий". Если, например, у вас есть событие click, привязанное к элементу, ничто не может помешать другому событию click быть привязанным к тому же элементу. И это произойдет, если вы используете pageshow событие. Если вы используете привязку событий во время pageshow Событие, при каждом посещении страницы одно и то же событие будет связываться снова и снова. Это можно легко предотвратить, но это же предупреждение потребует дополнительной вычислительной мощности процессора, той же мощности, которая может использоваться для обработки остальных веб-приложений.

Здесь у нас есть еще один вопрос (один из ваших вопросов), какова цель pageshow? Очевидный ответ - сделать что-то с доступной и показанной страницей. Хотя правильный ответ это не так важно. Pageshow это важно, потому что это ТОЛЬКО событие страницы, где высота страницы может быть правильно рассчитана, и это не 0. Теперь вы можете видеть, почему ваша карусель должна быть инициализирована в этой точке. Карусели, как и многие другие плагины (диаграммы, галереи изображений), требуют правильной высоты страницы, и если вы инициализируете их раньше pageshow они будут иметь высоту 0, поэтому они будут существовать, но вы не сможете их увидеть.

По поводу вашего последнего вопроса. Обналичивание не играет никакой роли, если ваше приложение построено правильно. Для начала вы всегда должны использовать делегированную привязку события, потому что не имеет значения, существует элемент страницы или нет. По сути, если вы привязываете свое событие к какому-либо родительскому элементу, например, документу, не имеет значения, была ли ваша страница удалена или удалена из DOM. Как только он вернется, это событие снова будет работать.

Пример:

$(document).on('click', '#some-button',function(){

});

Этот метод привязывает событие click к документу, но это же событие click будет работать только для элемента с идентификатором ' some-button', Это действительно не имеет значения, существует этот элемент или нет, потому что объект документа всегда будет существовать.

Эта же логика не так важна, если вы работаете с обычными веб-страницами, где перезагрузка / обновление страницы - обычное дело. Или даже здесь с jQuery Mobile, если ajax отключен, поэтому каждое изменение страницы - это обновление / перезагрузка страницы.

Я надеюсь, что это отвечает на все ваши вопросы. Если вам нужны пояснения, задайте их в разделе комментариев.

РЕДАКТИРОВАТЬ:

1. Где вы должны загрузить свои данные, зависит от того, что вам нужно загрузить. Если вы хотите сделать только один раз, используйте pageinit, Если вам это нужно при каждом посещении страницы, используйте pagebeforeshow (потому что если вы используете pageshow этот контент будет появляться из ниоткуда, и это может запутать пользователя). Не использовать pagebeforecreate потому что контент будет загружаться после окончания события, поэтому нет смысла его использовать.

   Если вы хотите загрузить контент через некоторый интервал, используйте pageinit с функцией setinterval. Не забывайте вручную улучшать стили содержимого страницы при каждом добавлении динамического содержимого.

2. Pageshow полезен только при инициализации плагина необходимая высота страницы. Ничего особенного. Из ответа 1 вы можете видеть, что это кровать для динамического контента, потому что он появится из ниоткуда.

   Pageinit следует использовать для привязки событий и генерации динамического контента.

3. Завтра я обновлю свой ответ с вариантами использования для каждого события страницы. Я надеюсь, что этого будет достаточно для вас.