Главная > AJAX, ExtJS Framework, Open Source, Разное > ExtJS: забудьте про Array, встречайте MixedCollection

ExtJS: забудьте про Array, встречайте MixedCollection

15 апреля 2008

ext_bld_logo.jpgПриветствую наших читателей, на этот раз мы отвлекаемся от высоких тем стартапов и инвестиций, и продолжим изучение нашего любимого (ну, моего точно) фреймворка для построения визуальных веб-интерфейсов ExtJS. На этот раз ничего визуального не будет - не формами едиными, так сказать. Мы рассмотрим один из классов из пакета утилит (utils), которые идут в пакете ExtJS, и пусть он не участвует напрямую в создании всех красивостей, но обеспечивает работоспособность всех остальных компонент, и поэтому не менее важен и интересен.

Речь идет о компоненте MixedCollection, который позволяет реализовать систему хранения и работы с данными произвольного вида. По сути, это серьезное расширение-обертка над обычной функциональностью массива, который является в языке одним из основных типов данных (хотя сам по себе это объектный тип данных и позволяет применять много функций). И вот именно из-за этих расширений, которые позволяют серьезно расширить его функциональность, предоставляет удобные для разработчика функции и методы, этот обьект может быть интересен и сам по себе, вне контекста всей библиотеки ExtJS.

Для самого начал посмотрим на создание обьекта класса MixedCollection. Здесь впервые проявляется его мощь. При создании можно указать параметр allowFunctions, который, несмотря на неподходящее название, управляет применением функции addAll(), которая предназначена для массовой вставки данных из обьекта и/или массива. Второй параметр - это функция, которая может применяться для генерации ключа, я так понял, что в том случае, когда ключ явно не определяется при вставке. Это же можно реализовать через метод getKey(). Отметьте, что каждый обьект по сути имеет два идентификатора: ключ, который может быть определен пользователем, но не является обязательным, и индекс, который всегда уникальный и является внутренним идентификатором обьекта в коллекции.

Кстати, о главном. В коллекции (далее именно так буду называть обьект класса MixedCollection) могут хранится как обьекты, так и строки, числа или массивы. Каждый элемент обладает своим индексом (и ключем) и может быть извлечен по нему или заменен/обновлен, а также удален. Для всех основных операций над данными есть свои функции, которые разделены на группы:

  • Вставка данных. Можно как отдельные элементы вставлять, через метод Add(), так и несколько через AddAll(). Для вставки можно передать уникальный ID элемента, либо он будет автоматически сгенерирован. Также можно вставить нужный элемент в определенную позицию в индексе, используя функцию insert(), при этом нужно указать индекс элемента и, опционально, его ключ.
  • Удаление данных. Можно как сразу все данные удалить, очистив коллекцию - для этого есть метод clear(). Удалить обьект по его содержимому можно функцией remove(), если же нам известен индекс обьекта в коллекции, то используем функцию removeAt(), если же мы определили ключ, то через функцию removeKey() удаляем этот элемент.
  • Обновление данных. Мы в любой момент можем обновить элемент, зная его ключ, используя для этого replace().
  • Извлечение данных. Здесь у нас самое большое разнообразие методов. Начнем с самого простого. Метод Get исходя из переданного ключа или индекса возвращает элемент коллекции. А вот выбрать несколько обьектов, цепочку, можно указав начальный и конечный индексы через метод GetRange(). Он возвращает массив, элементами которого являются элементы с коллекции. Есть и функция item(), которая выбирает элемент по его индексу или ключу, при этом ключ более приоритетен, чем индекс. itemAt() возвращает элемент по его индексу (не спутайте с ключем), а key() по ключу. Кроме этого есть обычные для стековой структуры функции last() и first().
  • Групповые операции. Сюда я отнесу функцию each(), которая позволяет применить указанную пользователем функцию (существующую или анонимную), которая будет поочередно применена к каждому элементу коллекции. При этом, в нее передается только сам обьект, а вот если вы храните значимые для обработки данные в ключе, придется его получать отдельно, через getkey(). Этот момент мне кажется неудобным, например, часто приходилось передавать на хранение не строку а обьект, который включал бы все метаданные, а ключ использовался бы только для извлечения. Есть и другая функция, eachKey(), работает так же, но передает только ключ.
  • Сортировка. Для сортировки элементов в коллекции есть несколько путей. Например, keySort(), которая принимает указание, как сортировать (по убыванию или возрастанию ключа), а также функцию сравнения ключей, если нужно реализовать какой-то особенный алгоритм сортировки или просто sort() с аналогичными параметрами, но сортирующая элементы. Кстати, я не совсем уверен на чет реализации и различий этих методов, нужно дополнительно исследовать исходный код.

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

Оказалось, что при переходе с 1.1 версии библиотеки ExtJS, на 2.0 ветку, несмотря на большие архитектурные изменения, этот класс не изменился и его API идентичное, что упрощает разработку и перенос приложений.

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

Широкие возможности откроются, если скрестить этот компонент и низкоуровневое хранилище данных, например, GoogleGears, FlashStorages и другие, реализовать прямую загрузку/выгрузку данных. Либо расширить другой проект, создающий базу данных на javascript (taffy DB, мы уже писали недавно о нем). Тогда это будет просто отличный инструмент для постоянного хранения данных на клиенте, которые сохраняются даже после перезагрузки браузера, а разработчику позволяют хранить неограниченное количество данных и удобный интерфейс для операций над ними.

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

  1. magmoro
    18 апреля 2008 в 09:00 | #1

    Солнце — это бот. Вон у него ссылка на строительный сайт. Про это было на хабре. Такие коменты надо удалять.

  2. slik
    18 апреля 2008 в 15:24 | #2

    а зачем было писать что-то новое или обвертку над array, если можно было просто увеличить его функционал, как это сделано в mootools ?

  3. 18 апреля 2008 в 16:46 | #3

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

  4. 18 апреля 2008 в 17:33 | #4

    Само по себе появление компонента MixedCollection было востребовано и ожидаемо! Не буду Вас захваливать, но написали Вы достаточно толковую статью для хорошего публицистического журнала! Если вдруг Вам будет скучно, когданибудь Вы можете отлично попытать счастье в любом специализированном компьютерном издании! Это, если чесно! Но нос не задирайте, Вам, наверняка, есть чему еще поучиться! Молодец!

  5. 18 апреля 2008 в 18:32 | #5

    Владислав — на самом деле оффлайновые журналы это уже давно пройденный этап 🙂 как-никак опыт 5 лет в этой индустрии 🙂 я бы скорее хотел стать редактором журнала, но блог это почти то же 🙂

  6. slik
    18 апреля 2008 в 21:18 | #6

    # aleks_raiden пишет:
    18.04.2008 в 16:46

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

    не знаю.. лишняя нагрузка мне не по душе…

  7. 20 апреля 2008 в 10:56 | #7

    aleks_raiden, я считаю что стиль Вашего изложения материала, вполне подтверждает Ваши способности редактора! Тоже не буду захваливать Вас, чтобы не сглазить, но сам стильи метода изложения того, о чем Вы говорите лаконична и логична! А самое главное — инфа полезная

  8. 24 апреля 2008 в 21:18 | #8

    Хорошая обзорная статья. Не помешало бы примеров, на мой взгляд. Эдаких кусочков кода. Лично мне, когда впервые заглянул к MixedCollection в гости показалось нетривиальным описание работы расширения на уровне ключ-индекс. Только понаписав несколько фрагментов и потестировав результаты удалось приравнять ожидаемый результат к фактическому в случае работы с добавлением, удалением и изменением элементов коллекции. Суммируя, хотелось бы сказать, что имхо, небольшие примеры были бы очень кстати для внесения четкой ясности в работу расширения.

  9. 24 апреля 2008 в 22:55 | #9

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

    • Asd
      1 августа 2011 в 06:46 | #10

      Без примеров статья становится ненужным мусором на просторах инета, где такого же барахла про нюансы и прочие соображения пруд пруди. =/

  10. alex
    28 сентября 2008 в 14:08 | #11

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

Комментирование отключено.