20 правил, яким варто слідувати, коли починаєте працювати з EXT JS & Sencha Touch
При вивченні нових технологій розробники часто роблять ті ж помилки, що й інші люди і дотримуються тих же поганих технік.
Сподіваюся, це допоможе вам перестрибнути кілька щаблів у вивченні Ext JS та допоможе уникнути стандартних помилок.Хоча ми говоримо тільки про Ext JS, більшість (якщо не всі) пункти можуть бути застосовані до Sencha Touch, так як структура фреймворків схожа.
Уникайте використання Ext.getCmp
Не піддавайтеся спокусі дати всім вашим компонентам ідентифікатори і використовуватиExt.getCmp, щоб знайти їх знову. Якщо структура вашої програми коректна і дотримуються принципів об'єктно-орієнтованого дизайну коду, у вас не повинно бути проблем із доступом до ваших компонентів, коли вони знадобляться.
Уникайте використання owneCt властивості
Не покладайтеся наownerCtдля отримання батьківського елемента. Якщо ви намагаєтеся отримати в коді компонента доступ до батька, то, швидше за все, цей код повинен бути в самому батькові. Це дуже схоже на використанняExt.getCmp(описано вище), тому переконайтеся, що прочитали вказані посилання.
Не робіть панелі, що обрамляють.
Будьте обережнішими зі спагетті кодом (областю видимості).
Примітка перекладача. Дуже часто з'являється бажання оголошувати компоненти вкладено, використовуючи xtype Виглядає цілком непогано. Трохи згодом ви додасте ще поле для введення по батькові. Потім випадає список із вибором громадянства. А до списку підключіть плагіни... У результаті отримаєте купу вкладеного коду. У проектах, які мені дісталися, вкладеність доходила до чотирнадцяти рівнів. У випадку, коли доводилося налагоджувати такий код, я спочаткуробив ґрунтовний рефакторинг. Важливо зловити момент, коли варто винести елементи в методinitComponent
Якщо вам не хочеться постійно розширювати базові класи, можете використовувати Фабричні Методи як альтернативу.
Переконайтеся, що використовуєте простір імен.
Знову ж таки: організація — наше все. Використання вбудованих можливостей просторів імен 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), можна визначити необхідні кнопки та елементи як члени класу і таким чином не потрібно буде робити жодних змін при додаванні до колекції.
Примітка перекладача. Щоб додати нащадка як член класу, можна легко перенести його з конфіга.
… метод initComponent
Таким чином ви отримаєте посилання на нащадка безпосередньо в об'єкті класу.
Створюйте xtypes акуратно
Вкажіть xtype так само, як ім'я вашого класу, включаючи простір імен. Так ви зможете легко відстежити фактичне визначення класу
Використовуйте код повторно
Якщо ви зловили себе на тому, що пишіть однаковий код знову і знову (наприклад, маскуючі елементи при завантаженні, відповіді, помилки і так далі) тоді оберніть код у функцію, щоб потім використовувати її. Так ви збережете собі час і зусилля — ви дякуватимете собі, коли вирішите змінити цю ділянку коду і не потрібно буде переробляти сотні його екземплярів.
Не створюйте вкладених функцій
Навчіться використовувати FireBug
Перетворіть фреймворк на Білу Ящик!
Як сказав Еван "Не бійтеся вихідного коду". Використовуйте отримані в роботі з FireBug'ом навички, щоб залізти всередину Ext JS фреймворку, а не переступаючи виклики його методів у налагоджувачі. Це неймовірно, як багато ви можете дізнатися і як легко ви можете вирішити проблему заходячи всередину методу фреймворку, не кажучи вже про звільнення від годинника стресу в спробах з'ясувати в чому саме проблема.
Завжди тримайте відкриту документацію
Документація – це ваш найкращий друг. Вона має бути вашою першою зупинкою, коли ви стикаєтеся з проблемами чи шукаєте щось нове. Вона добре продумана і проста у навігації, такщо використовуйте її!
Примітка перекладача. Дуже зручно у хромі створити додаток з документацією, оскільки її інтерфейс використовує вкладки.
Етапи налагодження
Примітка: хто як і я використовує notepad++ є чудове рішення для перевірки JS на помилки та попередження
Будуйте інтерфейс поступово.
Дуже легко заглибитись у роботу та створити півдюжини компонентів, а потім відкрити у браузері та подивитися результат. Якщо не працює, то часом буває украй важко рухатися у зворотному напрямку у спробах знайти винуватця. Ми пропонуємо створювати по одному компоненту і рухатися далі після того, як переконаєтесь, що все працює. Наприклад, якщо ви хочете створити DataGrid, додавання елементів до якого буде анімованою, то створіть спочатку додавання і потім уже розбирайтеся з анімацією. Якщо ви спробуєте зробити все й одразу, швидше за все щось піде не так.
Мінімізуйте та упаковуйте (GZip) ваш кінцевий код
Чи не модифікуйте код фреймворку!
Використовуйте плагіни та користувацькі розширення
Якщо ви хочете зробити компонент, якийвирішує розповсюджене завдання, цілком можливо хтось уже випустив його як плагін або розширення. Витратьте деякий час на пошуку на форумах та в Інтернеті, перш ніж писати компонент з нуля (хоча якщо у вас є час, то це чудовий спосіб навчання)
Визначайте спільні елементи в одному місці
Дуже зручно визначати в одному конфіг-файлі усі ваші змінні, простори імен та інші конструкції, які використовуються повсюдно у програмі. Це дозволить набагато простіше змінювати їх та заохочує повторне використання.
Розгляньте використання Ext.Direct
Тестуйте у всіх браузерах!
Хардкорна конфа за С++. Ми запрошуємо лише профі.
Читають зараз
Пропонуємо Sencha Ext JS 5
Ext JS 5: MVC, MVVM та ін
Мініфікація додатків Ext JS та Sencha Touch засобами ASP.NET
Коментарі 50
Ваші замовники/ви самі готові відкривати код програм, що розробляються? Адже там GPLv3.
Крім того, GPLv3 має багато термінів, найбільш важливим є те, що ви повинні повідомити джерело коду для вашого застосування до ваших користувачів, які можуть бути вільними, щоб змінити ваше застосування для своїх потреб.
Використовувати та підключати можна. Створювати розширення можна. Поширювати можна.
На вимогу потрібно буде показати модифіковані вихідні коди, якщо модифікований вихідник самого фреймворку.
Це для того, щоб не розмножувалися похідні платні фреймворки та інші нахлібники.
Єдиний наріжний момент – розширення класів фреймворку підпадає під модифікацію. А починаючи з 4.0 у них усі уроки та мануали пропонують Ext.extend на кожному кроці.
Втім, якщо ви не плануєте оновлюватись і пишете лише CRM, та ERP, з якими ніхто, крім ваших колег чиспівробітників замовника, працювати не будуть, а так само якщо ви готові інвестувати свій час у вивчення технологій, які для інших речей у Інтернеті підходять не дуже, то чому б і ні – працювати Ext буде і буде досить добре. Перебуваючи у межах заданих правил програмувати у ньому можна досить швидко.