Статьи

Система классов в Sencha Touch 2

Октябрь 23, 2018

Sencha Touch 1 использовал систему классов из Ext JS 3, которая предоставляет простую, но мощную систему наследования, которая облегчает написание больших сложных вещей, таких как приложения и фреймворки.

В Sencha Touch 2 мы взяли гораздо более продвинутую систему классов Ext JS 4 и использовали ее для создания более компактной, чистой и красивой среды. Этот пост рассказывает о том, что изменилось, и о том, как использовать его для улучшения своих приложений.

Синтаксис

Первое, что вы заметите при сравнении кода из 1.x и 2.x, это то, что синтаксис класса отличается. Назад в 1.x мы бы определили класс следующим образом:

MyApp.CustomPanel = Ext.extend(Ext.Panel, {
    html: 'Some html'
});

Это создаст подкласс Ext.Panel с именем MyApp.CustomPanel, установив для html-конфигурации значение «Some html». Каждый раз, когда мы создаем новый экземпляр нашего подкласса (вызывая новый MyApp.CustomPanel ()), мы теперь получим слегка настроенный экземпляр Ext.Panel.

Теперь давайте посмотрим, как этот же класс определяется в Sencha Touch 2:

Ext.define('MyApp.CustomPanel', {
    extend: 'Ext.Panel',

    config: {
        html: 'Some html'
    }
});

Здесь есть несколько изменений, давайте рассмотрим их одно за другим. Во-первых и наиболее очевидно, мы поменяли Ext.extend на Ext.define. Ext.define работает с использованием строк — обратите внимание, что и MyApp.CustomPanel, и Ext.Panel теперь заключены в кавычки. Это позволяет одной из самых мощных частей новой системы классов — динамическая загрузка.

Я на самом деле говорил об этом в посте о Ext JS 4 в прошлом году, поэтому, если вы не знакомы, вы должны проверить этот пост , но в двух словах Sencha Touch 2 автоматически обеспечит, что класс, который вы расширяете (Ext.Panel) загружается на странице, выбирая его с вашего сервера, если это необходимо. Это облегчает разработку и позволяет создавать пользовательские сборки, которые содержат только класс, который фактически использует ваше приложение.

Второе заметное изменение заключается в том, что мы сейчас используем блок «config». Конфигурации — это особая вещь в Sencha Touch 2 — они являются свойствами класса, которые могут быть извлечены и обновлены в любое время, и предоставляют чрезвычайно полезные функции ловушек, которые позволяют вам запускать любую пользовательскую логику, которая вам нравится, при изменении одного из них.

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

консистенция

Самое большое улучшение, которое приходит от системы конфигурации — это согласованность. Давайте возьмем наш класс MyApp.CustomPanel выше и создадим его экземпляр:

var myPanel = Ext.create('MyApp.CustomPanel');

Каждая конфигурация имеет автоматически генерируемые функции получения и установки, которые мы можем использовать так:

myPanel.setHtml('New HTML');
myPanel.getHtml(); //returns 'New HTML'

Это может показаться незначительным, но соглашение применяется к каждой конфигурации во всей структуре. Это устраняет догадки из API — если вы знаете имя конфигурации, вы знаете, как ее получить и обновить. Сравните это с Sencha Touch 1, где получение html-конфигурации означало поиск какого-либо свойства в экземпляре, а обновление — вызов myPanel.update (‘New HTML’), который далеко не так предсказуем.

инстанцировании

Вы, наверное, заметили, что мы использовали новую функцию выше — Ext.create. Это очень похоже на простой вызов «new MyApp.CustomPanel ()», за исключением того, что Ext.create использует систему динамической загрузки для автоматической загрузки класса, который вы пытаетесь создать, если его еще нет на странице. Это может значительно облегчить жизнь при разработке приложения, поскольку вам не нужно сразу управлять зависимостями — это просто работает.

В приведенном выше примере мы просто создали экземпляр MyApp.CustomPanel по умолчанию, но, конечно, мы можем настроить его во время создания экземпляра, передав конфиги в Ext.create:

var myPanel = Ext.create('MyApp.CustomPanel', {
    html: 'Some Custom HTML'
});

Мы по-прежнему можем вызывать getHtml () и setHtml () для получения и обновления нашей конфигурации html в любое время.

Подклассы и пользовательские настройки

Выше мы создали простой подкласс, который предоставил новое значение по умолчанию для html-конфигурации Ext.Panel . Тем не менее, мы также можем добавить наши собственные конфиги к нашим подклассам:

Ext.define('MyApp.CustomPanel', {
    extend: 'Ext.Panel',

    config: {
        html: 'Some html',
        anotherConfig: 'default value'
    }
});

Конфигурация anotherConfig не существует в Ext.Panel, поэтому она впервые определена в MyApp.CustomPanel. Это автоматически создает наши функции получения и установки для нас:

var myPanel = Ext.create('MyApp.CustomPanel');
myPanel.setAnotherConfig('Something else');
myPanel.getAnotherConfig(); //now returns 'Something else'

Обратите внимание, как имена получателей и сеттеров автоматически пишутся с прописной буквы, чтобы использовать camelCase, как и все другие функции в платформе. Это было сделано автоматически, но Sencha Touch 2 делает еще пару очень приятных вещей для вас — он создает функции ловушек:

Ext.define('MyApp.CustomPanel', {
    extend: 'Ext.Panel',

    config: {
        html: 'Some html',
        anotherConfig: 'default value'
    },

    applyAnotherConfig: function(value) {
        return "[TEST] " + value;
    },

    updateAnotherConfig: function(value, oldValue) {
        this.setHtml("HTML is now " + value);
    }
});

Мы добавили две новые функции в наш класс — applyAnotherConfig и updateAnotherConfig — они обе вызываются, когда мы вызываем setAnotherConfig. Первый из них называется applyAnotherConfig. Ему передается значение конфигурации (в данном случае «значение по умолчанию»), и ему предоставляется возможность изменить его. В этом случае мы добавляем «[TEST]» к любому другому параметру:

var myPanel = Ext.create('MyApp.CustomPanel');
myPanel.setAnotherConfig('Something else');
myPanel.getAnotherConfig(); //now returns '[TEST] Something else'

Вторая функция, updateAnotherConfig, вызывается после того, как applyAnotherConfig имеет шанс изменить значение и обычно используется для внесения некоторых других изменений — будь то обновление DOM, отправка запроса AJAX или установка другой конфигурации, как мы делаем здесь.

Когда мы запускаем приведенный выше код, а также добавляем ‘[TEST]’ к нашей конфигурации anotherConfig, мы вызываем this.setHtml, чтобы обновить и конфигурацию html. Нет никаких ограничений на то, что вы можете делать внутри этих функций ловушек, просто запомните правило: функции применения используются для преобразования новых значений перед их сохранением, функции обновления используются для выполнения реальных побочных эффектов изменения значения (например, обновление DOM или настройка других классов).

Как мы это используем

Приведенный выше пример немного придуман, чтобы показать суть — давайте рассмотрим реальный пример из класса Ext.Panel в Sencha Touch 2:

applyBodyPadding: function(bodyPadding) {
    if (bodyPadding === true) {
        bodyPadding = 5;
    }

    bodyPadding = Ext.dom.Element.unitizeBox(bodyPadding);

    return bodyPadding;
},

updateBodyPadding: function(newBodyPadding) {
    this.element.setStyle('padding', newBodyPadding);
}

Здесь мы видим функции apply и update для конфигурации bodyPadding . Обратите внимание, что в функции applyBodyPadding мы устанавливаем значение по умолчанию и используем функцию unitizeBox для фреймворка, чтобы анализировать строки заполнения CSS (например, «5px 5px 10px 15px») в верхний, левый, нижний и правый отступы, которые мы затем возвращаем как преобразованное значение.

Затем updateBodyPadding принимает это измененное значение и выполняет фактические обновления — в этом случае задает стиль заполнения для элемента Panel на основе новой конфигурации. Вы можете увидеть подобное использование практически в любом классе компонентов в рамках.

Узнать больше

Это всего лишь обзор самых важных аспектов новой системы классов и их влияния на вас при написании приложений в Sencha Touch 2. Чтобы узнать больше о системе классов, мы рекомендуем взглянуть на руководство по системе классов и, если Любые вопросы форумы являются отличным местом для начала.

 

Источник: http://edspencer.net/2012/01/the-class-system-in-sencha-touch-2-what-you-need-to-know.html

29
Share: