Сверните свой собственный фреймворк с Backbone.js

 placeAnchorHooks : function() { $('[data-href]').live('touchstart', function() { App.Router.navigate( $(this).attr('data-href'), true ); }); } 

Использование touchstart вместо click имеет огромное значение для отзывчивости приложения. В качестве упражнения замените его на click (сначала вам нужно будет клонировать репозиторий), чтобы увидеть, что произойдет. Вы заметите, что при каждом касании происходит заметная задержка, прежде чем экран реагирует на касание. Используя touchstart вместо click , мы работаем над этим.

Если вам интересно, да, мы могли бы обойтись без pushState и вместо этого полагаться на «hashbangs», чтобы все pushState . Я делаю это, чтобы показать, насколько просто иметь прозрачные pushState поддержкой pushState в вашем приложении. Это можно использовать и с не-мобильными веб-приложениями.

настройки

В этом примере мы разрешаем только одну настройку. Пользователь может указать ключевые слова, которые приложение будет использовать, чтобы сузить, какие магазины оно должно показывать. Это, однако, может быть легко расширено до ряда атрибутов. Особо следует отметить, как мы сохраняем эти предпочтения. Я переопределил метод sync для модели «Магистрали Settings , чтобы он сохранял атрибуты с помощью localStorage .

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

 var Settings = Backbone.Model.extend({ sync: function(method, model, options) { switch(method) { case 'create': case 'update': localStorage.setItem('Settings', JSON.stringify(model)); break; case 'delete': localStorage.removeItem('Settings'); break; case 'read': var settings = localStorage.getItem('Settings'); model.attributes = (settings && JSON.parse(settings) || {}); return model; } return this; } 

Представления являются подпрограммами

В этом примере используются два просмотра Backbone : один для домашней страницы и один для страницы настроек. Я не буду вдаваться в подробности о том, что такое Backbone Views, но думаю о них как о автономных суб-приложениях внутри вашего большого приложения. Класс HomeView имеет базовый элемент, и все визуальные элементы, связанные с ним, происходят в этом элементе. Он также следит за изменениями в модели Settings с помощью этой строки:

 App.Settings.bind('change', this.hideMenu, this); 

Поэтому мы перестаем приставать к этому подпрыгивающему восклицательному знаку, как только он установит несколько ключевых слов.

Класс SettingsView в свою очередь, имеет два задания. Во-первых, он берет то, что уже есть в модели Settings (скажем, вы уже установили ключевые слова), и заполняет им текстовое поле, чтобы пользователь мог видеть, что там. Во-вторых, он захватывает то, что находится в текстовом поле, и помещает это в модель Settings когда мы изменяем значение, отправляя форму.

Пользовательские страницы

Было бы интересно позволить владельцам магазинов настраивать внешний вид своего мобильного магазина. Но только до некоторой степени, потому что мы не хотим нанести еще один MySpace миру. Итак, мы позволим им выбирать темы, которые состоят из нескольких переопределений, которые добавляются через класс CSS. К счастью, это действительно легко сделать.

 body > section.coffee { background: -webkit-gradient(radial, 50% center, 200, 50% center, 40, from(#a54e03), to(#bc7940)), #a54e03; } body > section.coffee h1, body > section.coffee p { text-shadow: 1px 1px 0 #000 } 

Тема «кофе» — это просто вариант оригинальной красной темы, похожей на кофейный. В качестве бонуса я добавил тени для текста, чтобы улучшить читаемость, поскольку светло-коричневый цвет обеспечивает намного меньшую контрастность, чем оригинальный темно-красный, при рассмотрении белого текста. Остальные темы примера — все варианты этого.

Допустим, владелец магазина при настройке своего магазина выбрал тему «кофе». В этом примере у нас есть несколько жестко закодированных ссылок в HTML, пара рабочих магазинов и только одна с небольшим содержанием. мы загружали их с сервера через Ajax, мы загружали настройки магазина, определяли выбор темы и применяли соответствующий класс CSS к элементу <section> .

В двух словах, это рецепт для настройки страниц в нашей небольшой фреймворк.

обоснование

Вы можете быть удивлены, почему вы проходите через все это, когда бросаете фреймворк, это звучит намного проще и быстрее. Идея здесь двоякая: чтобы вы поняли, что создать это с нуля очень просто, и дать вам базовый шаблон, который вы можете сохранить, чтобы вы всегда могли запустить новое приложение из него.

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

Производительность

Некоторые из вас заметят, что сценарии JavaScripts несжатые, каждый разделен на собственный файл. Сохранять это в производстве — ужасная идея, особенно если мы говорим о мобильных приложениях, где задержка намного дороже. Если вы развернете это как приложение, убедитесь, что вы минимизировали и связали свои сценарии, так как это значительно ускорит процесс.

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

• Встраивается в CSS с использованием Data URI . Это немного увеличит размер изображения, но вы все равно выиграете. Чем меньше HTTP-запросов нужно сделать вашему приложению, тем быстрее оно будет.
• Конвертируется в SVG и встраивается в HTML. Это мой личный фаворит. iOS 4 и 5 и Android Honeycomb все поддерживают SVG, поэтому, чтобы оставаться в безопасности, если вы ожидаете, что вам придется поддерживать браузеры, не поддерживающие SVG, перейдите к предыдущему варианту.

Прощальные слова

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

Однако, если вы хотите, чтобы ваше приложение работало на Android или iOS, примите ограничения. Есть несколько ограничений, и они в основном ориентированы на дизайн, поэтому используйте свой собственный каркас, используя минималистский целевой подход с Backbone.js.