Skip to main content

Типи даних у Techno4 Framework 2 (Data Types / Types)

Techno4 Framework 2 спроєктовано для швидкої розробки сучасних високопродуктивних портативних вебзастосунків на JavaScript та TypeScript. Усі методи, параметри конфігурації компонентів, властивості екземплярів та події базуються на строгих типах даних. Ця сторінка є центральним довідником типів: тут наведено їхній опис, способи застосування у фреймворку, посилання на авторитетну англомовну документацію MDN Web Docs, а також тонкощі та практичні нюанси використання.

Примітивні типи JavaScript

Базові атомарні типи даних, які використовуються для передачі значень «за значенням» (by value) та не мають власних методів мутації.

Примітив string — Текстовий рядок

Текстовий рядок символів у кодуванні UTF-16. У Techno4 Framework 2 рядки застосовуються майже скрізь: для заголовків вікон (title), текстового вмісту (text, content), назв CSS-класів (cssClass), кольорових тем (color), селекторів елементів (el: '.my-dialog') та ідентифікаторів подій.

MDN Documentation: String

// Рядкові параметри в ініціалізації діалогу
app.dialog.alert('Операцію успішно виконано!', 'Повідомлення системи', () => {
  console.log('Діалог закрито');
});

Примітив number — Числове значення

Число подвійної точності у форматі IEEE 754 (як цілі числа, так і з рухомою комою). У фреймворку використовується для часових інтервалів та затримок у мілісекундах (duration, delay), значень індикаторів перебігу (progress: 0..100), кодів клавіш клавіатури (keyCodes: [13, 27]) та індексів кнопок (index).

MDN Documentation: Number

// Встановлення прогресу 75% із плавною зміною за 300 мс
const dialog = app.dialog.progress('Завантаження ресурсів...', 0);
dialog.setProgress(75, 300);

Примітив boolean — Логічний тип (true / false)

Логічне значення, яке може приймати лише true або false. У Techno4 Framework 2 логічні типи керують поведінкою та відображенням віджетів: увімкнення анімації (animate: true), автоматичне знищення після закриття (destroyOnClose: true), закриття кліком по фону (closeByBackdropClick: false), акцентні кнопки (strong: true) або статус відкритості (dialog.opened).

MDN Documentation: Boolean

// Перевірка стану та виклик із вимкненою анімацією
if (!myDialog.opened) {
  myDialog.open(false); // анімацію вимкнено
}

Складні типи та вбудовані об’єкти JavaScript

Об’єкт object — Словник / Конфігураційний об’єкт

Структурована колекція пар ключ-значення. У фреймворку передається як основний аргумент під час створення екземплярів (app.dialog.create({ ... }), app.sheet.create({ ... })), а також використовується для збереження параметрів екземпляра (dialog.params) та словників обробників подій (on: { open() {}, close() {} }).

MDN Documentation: Object

// Конфігураційний об'єкт створення модального вікна
const dialog = app.dialog.create({
  title: 'Підтвердження платежу',
  text: 'Ви впевнені, що бажаєте надіслати кошти?',
  buttons: [
    { text: 'Скасувати' },
    { text: 'Оплатити', strong: true }
  ],
  on: {
    opened(d) { console.log('Діалог відкрито'); }
  }
});

Колекція Array — Упорядкований масив

Список елементів із числовими індексами. Застосовується для списків кнопок у модальних вікнах (buttons: [...]), списку маршрутів маршрутизатора (routes: [...]), кодів клавіш швидкого доступу (keyCodes: [13, 27]) та пакетної обробки елементів.

MDN Documentation: Array

Функція Function / Callback — Функція зворотного виклику

Виконуваний фрагмент коду, що викликається фреймворком під час виникнення певної події. У Techno4 Framework 2 функції виступають як колбеки натискання кнопок (onClick(dialog, index)), швидких методів підтвердження (callbackOk(value), callbackCancel()), або обробники подій життєвого циклу (dialog.on('open', (dialog) => { ... })).

MDN Documentation: Function

// Колбеки у швидкому діалозі Prompt
app.dialog.prompt('Введіть ваше ім’я:', (name) => {
  app.dialog.alert(`Привіт, ${name}!`);
}, () => {
  console.log('Введення скасовано користувачем');
});

Асинхронність Promise — Асинхронний результат

Об'єкт, що представляє результат успішного або неуспішного завершення асинхронної операції. Використовується для ледачого (lazy) завантаження модулів компонентів роутером, мережевих запитів до бекенда techno4-total та асинхронних діалогових підтверджень.

MDN Documentation: Promise

Типи DOM та Web API браузера

DOM API HTMLElement — Елемент HTML у DOM

Базовий інтерфейс для будь-якого елемента розмітки сторінки (наприклад, <div>, <button>, <input>). У Techno4 Framework 2 нативний DOM-елемент доступний через властивість dialog.el, sheet.el, підкладку dialog.backdropEl, або передається в параметрі containerEl для вибору точки монтування віджета в DOM (за замовчуванням монтується до app.el).

MDN Documentation: HTMLElement

// Передача нативного HTML-елемента у фреймворк
const customContainer = document.getElementById('modal-mount-point');
const dialog = app.dialog.create({
  containerEl: customContainer,
  text: 'Вікно змонтоване в окремий DOM-контейнер'
});

DOM API Element / Node — Вузол DOM-дерева

Узагальнені базові інтерфейси W3C DOM для всіх вузлів і елементів документа (включаючи SVG, тексти та фрагменти документа).

MDN Documentation: Element

DOM API Event / CustomEvent — Об’єкт події

Стандартний об'єкт події браузера або кастомна подія компонента. DOM-події ініціюються на кореневих елементах віджетів (наприклад, dialog:open, dialog:closed на <div class="dialog">) та перехоплюються стандартними слухачами addEventListener або методами $el.on().

MDN Documentation: Event

Специфічні класи та типи Techno4 Framework 2

Techno4 Type CSSSelector — Рядковий селектор CSS

Рядок, що представляє валідний селектор CSS (наприклад, '.my-dialog', '#main-modal', 'div.dialog[data-role="auth"]'). У Techno4 Framework 2 більшість методів, які очікують посилання на DOM-елемент, є поліморфними і приймають як нативний HTMLElement, так і CSSSelector, автоматично проводячи пошук у DOM через вбудований рушій вибірки.

Techno4 Class Techno4 (app) — Головний екземпляр застосунку

Кореневий об'єкт усього додатку, створений конструктором new Techno4({...}). Він надає централізований доступ до всіх підсистем: модальних вікон (app.dialog, app.sheet), маршрутизації (app.views, app.router), сховища стану (app.store), апаратної взаємодії та системних налаштувань. Усі компоненти та створені віджети містять посилання на цей об'єкт через властивість .app (наприклад, dialog.app).

Techno4 Utility Dom64 / Dom64Array — Обгортка маніпуляції DOM ($)

Вбудована ультрашвидка бібліотека для роботи з DOM у стилі ланцюжкових викликів (chaining), оптимізована для сучасних мобільних браузерів та WebView. Будь-який екземпляр віджета Techno4 надає обгорнуті в Dom64 елементи: dialog.$el (кореневий елемент) та dialog.$backdropEl (підкладка). Це дозволяє викликати зручні методи маніпуляції: .find(), .addClass(), .removeClass(), .on(), .trigger().

// Робота з елементом через Dom64 ($el)
const dialog = app.dialog.create({ ... });
dialog.$el.find('.dialog-button').addClass('button-round');
console.log('Нативний елемент:', dialog.$el[0]); // прямий доступ до HTMLElement

Techno4 Class Dialog — Екземпляр модального діалогового вікна

Об'єкт діалогу, повернений методами app.dialog.create(), app.dialog.get() або шорткатами (alert, confirm, prompt, login, password, preloader, progress). Містить публічні методи (.open(), .close(), .destroy(), .setProgress(), .setTitle()), властивості (opened, el, $el, params) та підтримує реєстрацію власних подій (.on(), .once(), .off(), .emit()).

Цікавинки, тонкощі та практичні поради щодо роботи з типами

  • Поліморфізм аргументів (Duck Typing): У шорткатах на зразок app.dialog.alert(text, [title], [callback]) фреймворк автоматично інспектує тип другого аргументу через typeof args[1] === 'function'. Якщо ви передали функцію замість заголовка-рядка, вона коректно призначається колбеком, а заголовок автоматично береться зі стандартних параметрів app.params.dialog.title.
  • HTMLElement vs Dom64 ($el): Усі компоненти зберігають як нативний DOM-вузол (dialog.el), так і обгортку Dom64 (dialog.$el). Якщо вам потрібна швидка робота зі стандартними Web API браузера або сторонніми бібліотеками (Chart.js, Leaflet, Canvas), використовуйте el або $el[0].
  • Управління пам’яттю (Memory Leaks): Якщо діалог створюється динамічно без опції destroyOnClose: true, його екземпляр та DOM-елемент залишаються в пам’яті навіть після виклику close(). Для одноразових діалогів завжди вказуйте destroyOnClose: true або явно викликайте dialog.destroy() у слухачі події closed.
  • Контекст у Callback-функціях: У функціях зворотного виклику (onClick, обробники подій) як перший аргумент завжди передається сам екземпляр компонента (наприклад, dialog). Це дозволяє безпечно використовувати стрілкові функції ((dialog) => { dialog.close(); }), не втрачаючи доступ до екземпляра через лексичний this.