Как лучше организовать мобильное приложение jQuery? - PullRequest
6 голосов
/ 20 февраля 2012

Я нашел статью , которая просматривает это.Но мой главный вопрос: мне нужен отдельный файл .html для каждого экрана?Я думаю, что да, но я хотел бы единогласного голосования.Кроме того, это относится и к отдельным файлам JS?

Редактировать: Приложение JQM в основном предназначено для администрирования пользователей и ролей.

Ответы [ 4 ]

10 голосов
/ 21 февраля 2012

У нас есть производственный jQM-сайт. Вот как мы это делаем. Да, другие могут не согласиться, но мы обнаружили, что это работает для очень большого сайта.

  1. Использование нескольких отдельных HTML-страниц,Большой многостраничный шаблон лишает преимущества загрузки jjM в ajax, так как вы загружаете весь свой HTML в начале (если ваш сайт не маленький)

  2. Вы определенно хотите использовать загрузку ajax,jQM извлекает только код из вашего <div data-role="page"> НО это усложняет ваш JS, см. ниже

  3. Вам не нужно несколько файлов JS, НО вам нужно загрузить все свои JS наДля начала мы выполняем это, выполняя две вещи: 1. , помещаем прослушиватель on в корень документа и прослушиваем события pageinit / pageshow.Каждый раз, когда страница загружается, они запускаются, у вас также есть удобная ссылка на текущую страницу, и вы можете использовать attr на странице, чтобы определить, какая это была страница. 2. Имейте все JS во включении какого-либо типа (надеюсь, вы используете PHP, CF или что-то еще) и размещайте это на каждой странице, таким образом, независимо от того, какую точку входа пользователь просматривает на вашем мобильном сайтес, они получают весь загруженный код

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

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){

    var pageType = $(this).data('pagetype');

    //handle pageinit/pageshow (oEvent.type) for each pageType
1 голос
/ 20 февраля 2012

Я думаю, что лучше иметь разные HTML-файлы для каждого экрана.Это не только поможет правильно поддерживать код приложения и отслеживать изменения, но также предотвратит громоздкость dom, поскольку страницы будут добавляться по мере необходимости.
Что касается js, вы можете иметь отдельные js-файлы во время разработки и отладки, но я бы посоветовал вам связать их и свернуть до развертывания и выпуска приложения.

0 голосов
/ 11 октября 2015

Используйте несколько отдельных HTML-страниц. Вам не нужно несколько файлов JS. Каждая страница должна быть полностью автономной и способной стоять отдельно. Сократить, объединить и сжать. Всегда используйте скрипт глобальной конфигурации на каждой странице. Телефоны, карты и электронные письма

href="tel:+1[your telephone number here (numbers only)]"
href="[standard link to google maps here]"
href=mailto:[your email address]

Проверка с использованием jQuery Validate Используйте ThemeRoller. Используйте группы переключателей вместо выбора меню. Добавить Google Analytics Определите, какой стиль навигации использовать. Не начинайте с кода.

0 голосов
/ 20 февраля 2012

Это очень субъективная тема, но она также приобретает все большую тенденцию. Некоторые предпочитают одностраничные веб-сайты (мобильные приложения). Статья в вики отлично справляется с проблемой, которую решают одностраничные приложения.

В частности, в JQM переходы с одной страницы на следующую намного плавнее, когда данные находятся на одной странице. Этого также можно добиться, если предварительно выбрать наиболее часто используемые страницы, добавив в ссылку атрибут data-prefetch.

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

...