Статьи

Roadcrew.js — Переключение страниц как босс!

Август 24, 2018

Когда я начинал с разработки мобильных приложений, у меня было только ограниченное время. Приложение должно работать на телефонах Android и iOS одновременно, поэтому я посмотрел на Apache Cordova и jQuery mobile . В то время как первый позволяет вам разрабатывать мобильные приложения с использованием JavaScript и HTML5 в целом (включая доступ к аппаратному обеспечению), jQuery mobile — это более или менее фабрика виджетов и платформа для создания ваших приложений. Хотя jQuery mobile выглядела довольно неплохо, у нее был один существенный недостаток: он был чертовски медленным и сложным для разработки (для того, что он делает). Я должен добавить, что я использовал версии до 1.0, и все может быть лучше. Но назад, это было так.

На jQuery mobile мне нравились две вещи. Один был это взгляд. И другой вещью был подход «одной страницы». Это означает, что у вас есть весь HTML-код вашего приложения в основном в одном файле, показывающий только те части, которые необходимы.

При замене jQuery mobile я использовал Twitter Bootstrap . Сегодня я, наверное, посмотрю в Ratchet .

Для переключения страниц я ничего не нашел, поэтому решил сам написать код. Поскольку я слушал «We are the Roadcrew» от великой рок-н-ролльной группы Motörhead, а «Roadcrew» — отличное название для мобильных устройств, я просто назвал его так: Roadcrew.

Вы можете найти больше информации на официальном сайте Roadcrew . Или вы начинаете с клонирования Roadcrew из Github .

Как это работает?

Это довольно просто: включите файлы Roadcrew.js и создайте свой HTML-код, например:

<div class="page start" id="login">
...
</div>
<div class="page" id="content">
...
</div>

Каждый div, который является страницей, получает класс «page». Страница — это в основном div, который отображается на вашем мобильном телефоне. Вы также можете сказать «взгляд» на это. Каждая страница получает идентификатор. Это используется для навигации между вашими страницами. Например, если вы хотите показать страницу «контента», вы должны создать ссылку, например:

<a href="#content">Leads to content</a>

Чтобы эта базовая навигация работала, вам нужно всего лишь создать экземпляр Roadcrew:

$(document).ready( function() {
   var roadcrew = new Roadcrew();
}

Это код JQuery. А на самом деле Roadcrew.js использует jQuery. Я постараюсь свести к минимуму зависимости в будущем и, надеюсь, смогу заставить его работать с Zepto.js . Но сейчас вы должны жить с jQuery, который на мобильных телефонах работает медленнее, чем Zepto. Патчи приветствуются!

Перехват — показать страницу загрузки

Что-то, что действительно не очень хорошо работало с jQuery mobile, это показывать страницу загрузки. Обычно это очень просто, но пришлось потратить много времени, чтобы разобраться с этим. В Roadcrew все довольно просто. Вам просто нужно создать перехватчик — что-то, что делается перед вызовом реальной целевой страницы.

Это может выглядеть так:

roadcrew.intercept('#interceptingPage', function(dispatch) {
   roadcrew.flip('#loadingPage');
   $.post('ajax/test.html', function(data) {
      dispatch();
   });
});

В то время как метод «перевернуть» просто «переворачивает» страницы, минуя каждый потенциальный перехватчик, аргумент функции dispatch () — это то, что вы можете подумать о «показе реальной целевой страницы». С помощью приведенного выше кода вы покажете страницу загрузки, которая будет отображаться до тех пор, пока $ .post не будет готов и не вызовет функцию dispatch ().

Призыв к оружию: обработка ошибок

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

roadcrew.intercept('#troublePage', function(dispatch) {
   throw new RoadcrewError("I made trouble");
}, function(error) {
   $('#errorPage').find('.error').html(error.message);
   roadcrew.flip('#errorPage');
});

Как видите, я выкидываю ошибку в моем диспетчере. Вторая функция — мой обработчик ошибок, который будет работать с обработчиком ошибок.

Существует также возможность определить глобальный обработчик ошибок, который обрабатывает каждую ошибку.

Порт дартс доступен

Я портировал Roadcrew на Dart. Дарт — отличный новый язык для Интернета. Это все еще довольно молодой язык и еще не так широко распространен. Считайте этот порт экспериментом. Если вы хотите сравнить JavaScript с Dart Code, вам это тоже может показаться интересным.

Я создам запись в блоге на Roadcrew.dart и о своем опыте работы с портом, когда найду время.

Будущее

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

Как уже упоминалось, я хотел бы поддержать Zepto.js.

Теперь есть способ загрузить новые div с помощью AJAX. В настоящее время я не уверен, если это просто взорвать код или это действительно полезно.

И, наконец, я должен сказать, что всегда есть место для улучшения самого кода.

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

37
Share: