Эта статья — перевод статьи из блога www.swarmonline.com с небольшими моими дополнениями
При изучении новых технологий разработчики часто делают те же ошибки, что и другие люди и следуют тем же плохим техникам.
В этой статье мы собрали список некоторых из вещей, которые рекомендуем вам делать, когда вы начинаете работать с Ext JS (даже, если вы ветеран разработки, всё равно можете узнать что то новое!). Эти вещи прошли через наш опыт, через просмотр и ответы на одни и те же вопросы на форумах. Это наиболее общие из лучших техник программирования.
Надеюсь, это поможет вам перепрыгнуть несколько ступеней в изучении Ext JS и поможет избежать стандартных ошибок.
Хотя явно мы говорим только о Ext JS, большинство (если не все) пункты могут быть применены к Sencha Touch, так как структура фреймворков похожа.
Избегайте использования Ext.getCmp
Не поддавайтесь соблазну дать всем вашим компонентам идентификаторы и использовать Ext.getCmp, чтобы находить их снова. Если структура вашего приложения корректна и соблюдены принципы объектно-ориентированного дизайна кода, у вас не должно быть проблем с доступом к вашим компонентам, когда они понадобятся.
Полезные ссылки:
Writing a Big Application by Saki
Component Communication Example by Saki
Избегайте использования owneCt свойства
Не полагайтесь на свойство ownerCt для получения родительского элемента. Если вы пытаетесь получить в коде компонента доступ к родителю, то скорее всего этот код должен быть в самом родителе. Это очень похоже на использование Ext.getCmp (описано выше), так что убедитесь, что прочитали указанные ссылки.
Не делайте обрамляющие панели.
Очень распространённая ошибка у новичков — это создание обрамляющих панелей. Думайте о структуре интерфейса и помните, что такие компоненты как FormPanel, GridPanel и TabPanel наследуются от класса Panel, и потому нет нужды оборачивать их ещё одной панелью. Они могут быть размещены там же где их общий предок и сконфигурированы такими же свойствами.
Будьте аккуратнее со спагетти кодом (областью видимости).
Не объявляйте все ваши компоненты в одном файле или вложено (inline) — это станет кошмаром при отладке и ваша область видимости будет повсюду. Сделайте всё проще, разнеся объявления компонентов по разным файлам, а так же расширяйте базовые классы для добавления собственной конфигурации, методов и моделей поведения. Таким образом вы можете просто инстанцировать ваши компоненты где угодно, они получатся красивыми и слабо связанными
Примечание переводчика.
Очень часто появляется желание объявлять компоненты вложено, используя xtype
Выглядит вполне сносно. Чуть позже вы добавите ещё поле для ввода отчества. Потом выпадающий список с выбором гражданства. А к списку подключите плагины… В итоге получите кучу вложенного кода. В проектах которые мне достались, вложенность доходила до четырнадцати уровней. В случае, когда приходилось отлаживать такой код, я сначала делал основательный рефакторинг.Ext.define('App.window.CreateMan', { extend : 'Ext.panel.Panel', require : ['App.models.Man'], items : [{ xtype : 'textfield', label : 'Имя' }, { xtype : 'textfield', label : 'Фамилия' }, { xtype : 'button', text : 'сохранить', handler : this.saveData } ], saveData() { //... } });
Важно поймать момент, когда стоит вынести элементы в метод initComponent
Ext.define('App.window.CreateMan', { extend : 'Ext.panel.Panel', require : ['App.models.Man'], initComponent : function () { this.callParent(arguments); var superPanel = Ext.create('App.util.SuperPanel', // конфиги сложной панели ); var saveButton = { xtype : 'button', text : 'сохранить', handler : this.saveData, // ещё конфиги кнопки }; items = [{ xtype : 'textfield', label : 'Имя' }, { xtype : 'textfield', label : 'Фамилия' }, superPanel, saveButton ]; }, saveData() { //... } });
Если вам не хочется расширять базовые класы всё время, можете использовать Фабричные Методы как альтернативу.
Убедитесь, что используете пространства имён.
Опять же: организация — наше всё. Использование встроенных возможностей пространств имён Ext JS позволит организовать компоненты и классы, так что в будущем будет легко ориентироваться в них. Скорее всего вы захотите разделить пространства имён по функциональным модулям, например пространство имён MyApp.Users для всего кода, работающего с пользователями. Я так же люблю создавать структуру каталогов, соответствующую пространствам имён. Тогда всегда легко искать нужный модуль.
Примечание переводчика.
В Ext JS 4 так же реализована автоматическая подгрузка, которая требует соответствия пространств имён и каталогов. Это позволяет вызывать метод Ext.create(‘App.modules.User’) даже если класс App.modules.User ещё не подгружен. Ext сам позаботится о загрузке.
Подробнее тут
Правильно использование Get/Set методов и статических переменных
Не поддавайтесь соблазну углубиться в коллекцию элементов компонента для получния ссылки на кнопку или панель, используя синтаксис подобный ‘comp.get(0)’ или ‘comp.getTopToolbar().get(1)’. Если вы когда нибудь добавите новый элемент в такую коллекцию, ссылки на такие элементы будут некорректны. В больших приложениях это станет огромной задачей по отлову багов.
Спасти себя от ненужных проблем, вы можете создав Get метод для необходимых компонентов, который будет копаться в коллекции. Когда вы добавите новые компоненты, вы будете обновлять только этот метод. Если вы не ратуете за ленивое инстанцирование ( lazy instantiation), можно определить необходимые кнопки и элементы как члены класса и таким образом не нужно будет делать никаких изменений при добавлении в коллекцию.
Примечание переводчика.
Что бы добавить потомка как член класса, можно просто перенести его из конфига...
Ext.define('App.window.CreateMan', { extend : 'Ext.panel.Panel', items : [{ xtype : 'panel', // другие свойства панели } ] // ... });
… в метод initComponent
Ext.define('App.window.CreateMan', { extend : 'Ext.panel.Panel', initComponent : function () { this.childPanel = Ext.create(/* ... */ ) } // ... });
Таким образом вы получите ссылку на потомка непосредственно в объекте класса.
Создавайте xtypes аккуратно
Указывайте xtype такой же как имя вашего класса, включая пространство имён. Так вы сможете легко отследить фактическое определение класса
Используйте код повторно
Если вы поймали себя на том, что пишите одинаковый код снова и снова (например маскирующие элементы при загрузке, ответы, ошибки и так далее) тогда оберните код в функцию, что бы потом использовать её. Так вы сохраните себе время и усилия — вы будете благодарить себя, когда решите изменить этот участок кода и не нужно будет переделывать сотни его экземпляров.
Не создавайте вложенных функций
Не объявляйте функцию внутри функции (внутри функции… внутри функции...). Вы можете подумать, что создаёте удобный для повторного использования код, но вы только создаёте кошмарные области видимости и организацию. Сопровождать такой код — спорное удовольствие, так что задумайтесь о ваших коллегах, которым придётся это отлаживать.
Научитесь использовать FireBug
… или инструменты разработчика WebKit. Убедитесь, что вы используете все браузерные инструменты, такие как FireBug для отладки JavaScript и для понимания того, какой код HTML и CSS генерирует фреймворк. На начальном этапе изучения очень легко забыть, что весь Ext генерирует разметку страницы, но инструменты позволят вам понять, что происходит внутри чёрного ящика. Если вы научитесь использовать эти инструменты и как проводить отладку JS эффективно, вы сохраните себе огромную кучу времени.
Превратите фреймворк в Белый Ящик!
Как сказал Эван «Не бойтесь исходного кода». Используйте полученные в работе с FireBug'ом навыки, чтобы залезть внутрь Ext JS фреймворка, а не перешагивая вызовы его методов в отладчике. Это невероятно, как много вы можете узнать и как легко вы можете решить проблему заходя внутрь метода фреймворка, не говоря уже о избавлении от часов стресса в попытках выяснить в чём именно проблема.
Всегда держите открытой документацию
Документация — это ваш лучший друг. Она должна быть вашей первой остановкой, когда вы сталкиваетесь с проблемами или ищете что-то новое. Она хорошо продумана и проста в навигации, так что используйте её!
Примечание переводчика.
Очень удобно в хроме создать приложение с документацией, так как её интерфейс использует вкладки.
Этапы отладки
Какие должны быть действия при решении проблемы:
- Проверьте ваш код (очень легко допустить орфографические ошибки в настройках, пропустить команды и так далее).
Примечание: кто как и я использует notepad++ есть замечательное решение для проверки JS на ошибки и предупреждения
- Обратитесь к документации (возможно вы пропустили некоторые опции в конфигурации)
- Загляните в исходный код во время отладки (сделайте точку останова перед местом, где происходит ошибка и посмотрите, что идёт не так. Вы наверняка найдёте пропущенный конфиг или вызов чего-то, что ещё не инстанцировано)
- Ищите на форуме (скорее всего кто-то уже сталкивался с подобной проблемой и спрашивал о ней)
- Ищите по всему вебу (если форум не смог помочь, возможно ответ есть в Сети)
- Создайте топик на форуме (если вы так и не нашли решения, то максимально полно опишите проблему на форуме, что бы людям было проще помочь)
Стройте интерфейс постепенно.
Очень легко углубиться в работу и создать полдюжины компонентов, а потом открыть в браузере и посмотреть результат. Если не работает, то порой бывает крайне трудно двигаться в обратном направлении в попытках найти виновника. Мы предлагает создавать по одному компоненту и двигаться дальше после того, как убедитесь, что всё работает. Например, если вы хотите создать DataGrid, добавление элементов в который будет анимированой, то создайте сначала добавление и потом уже разбирайтесь с анимацией. Если вы попытаетесь сделать всё и сразу, скорее всего что-то пойдёт не так.
Минимизируйте и упаковывайте (GZip) ваш конечный код
Мы рекомендуем размещать все компоненты в отдельных файлах. Это значит, что вы получите кучу запросов, потому убедитесь, что все скрипты сшиты в один файл. Тогда вы минимизируете количество запросов и сожмёте размер кода.
После этого убедитесь, что ваш сервер поддерживает GZip для ваших скриптов. Это позволит уменьшить размер загружаемого кода на 70%!
Не модифицируйте код фреймворка!
Копайтесь в нём, читайте его, тестируйте его, изучайте его, но НИКОГДА не модифицируйте его. Если вы начнёте делать правки в ядре библиотеки, неважно в JS или CSS, вы заложите бомбу замедленного действия в ваше приложение. Когда вы обновите фреймворк до новой версии и ивсе изменения будут потеряны, вы будете долго выяснять как всё работает.
Если вы хотите изменить поведение или вид фреймворка делайте это через переопределение классов (это могут быть JS или CSS классы) или методов, помещённых в отдельные файлы. Впоследствии вы сможете легко удалить эти классы и методы и легко отследить их, когда дело дойдёт до обновления фреймворка.
Используйте плагины и пользовательские расширения
Если вы хотите сделать компонент, который решает распостранённую задачу, вполне возможно ктото уже выпустил его в качестве плагина или расширения. Потратьте некоторое время на поиска на форумах и в вебе, прежде чем писать компонент с нуля (хотя если у вас есть время, то это отличный способ обучения)
Определяйте общие элементы в одном месте
Очень удобно определять в одном конфиг-файле все ваши переменные, пространства имён и другие конструкции, которые используются повсеместно в программе. Это позволит намного проще изменять их и поощеряет повторное использование.
Рассмотрите использование Ext.Direct
Ext.Direct — это потрясающая особенность Ext JS, которую мы очень рекомендуем использовать с самого начала. Она даёт такие преимущества как прирост скорости, уменьшение кода и упрощение взаимодействия с сервером. Если вы подумываете использовать его в будущем, не надо! Начните использовать его прямо сейчас. Это гораздо легче реализовать с самого начала, нежели внести в работающие приложения. Вы будете благодарить нас в долгосрочной преспективе.
Тестируйте во всех браузерах!
Хотя Ext JS позаботился о практически полной кроссбраузерности, всегда тестируйте все браузеры, особенно IE. Как и всегда в IE некорректно работают некоторые CSS правила, а лишние запятые будут ломать ваше приложение.
