У цьому керівництві ми розглянемо процес створення JavaScript бібліотеки, що використовує концепцію гіперскрипта. Гіперскрипт – це підхід, який дозволяє визначати поведінку елементів HTML безпосередньо через атрибути, роблячи код більш декларативним та інтуїтивно зрозумілим.
Крок 1: Налаштування проекту
- Створіть нову директорію для проекту:
mkdir hyperscript-lib
cd hyperscript-lib - Ініціалізуйте npm проект:
npm init -y - Встановіть необхідні залежності для розробки:
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
Крок 2: Налаштування Webpack
Створіть файл webpack.config.js в кореневій директорії:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'hyperscript-lib.js', path: path.resolve(__dirname, 'dist'), library: 'H$', libraryTarget: 'umd', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, mode: 'production', }; |
Крок 3: Створення структури бібліотеки
Створіть директорію src і файли всередині неї:
src/
├── core.js
├── actions/
│ ├── classes.js
│ ├── attributes.js
│ └── events.js
└── index.js
├── core.js
├── actions/
│ ├── classes.js
│ ├── attributes.js
│ └── events.js
└── index.js
Крок 4: Реалізація ядра бібліотеки
У файлі src/core.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
const H$ = function (selector) { return new H$.prototype.init(selector); }; H$.prototype.init = function (selector) { if (!selector) { return this; } Object.assign(this, document.querySelectorAll(selector)); this.length = document.querySelectorAll(selector).length; return this; }; H$.prototype.init.prototype = H$.prototype; H$.actions = {}; H$.addAction = function(name, action) { H$.actions[name] = action; }; H$.prototype.hyper = function() { for (let i = 0; i < this.length; i++) { const element = this[i]; const hyperAttrs = Array.from(element.attributes).filter(attr => attr.name.startsWith('h-')); hyperAttrs.forEach(attr => { const actionName = attr.name.slice(2); const actionValue = attr.value; if (H$.actions[actionName]) { H$.actions[actionName](element, actionValue); } }); } return this; }; export default H$; |
Крок 5: Реалізація дій
У файлі src/actions/classes.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import H$ from '../core'; H$.addAction('class', (element, value) => { const [action, ...classNames] = value.split(':'); switch (action) { case 'add': element.classList.add(...classNames); break; case 'remove': element.classList.remove(...classNames); break; case 'toggle': classNames.forEach(className => element.classList.toggle(className)); break; } }); |
У файлі src/actions/attributes.js:
|
1 2 3 4 5 6 |
import H$ from '../core'; H$.addAction('attr', (element, value) => { const [attrName, attrValue] = value.split(':'); element.setAttribute(attrName, attrValue); }); |
У файлі
src/actions/events.js:|
1 2 3 4 5 6 7 8 9 10 |
import H$ from '../core'; H$.addAction('on', (element, value) => { const [eventName, handlerName] = value.split(':'); element.addEventListener(eventName, (event) => { if (window[handlerName]) { window[handlerName](event, element); } }); }); |
Крок 6: Створення точки входу
У файлі src/index.js:
|
1 2 3 4 5 6 7 8 9 10 |
import H$ from './core'; import './actions/classes'; import './actions/attributes'; import './actions/events'; document.addEventListener('DOMContentLoaded', () => { H$('[h-class], [h-attr], [h-on]').hyper(); }); export default H$; |
Крок 7: Збірка проекту
Додайте скрипт збірки до package.json:
|
1 2 3 |
"scripts": { "build": "webpack" } |
Запустіть збірку:
npm run buildКрок 8: Використання бібліотеки
Створіть файл index.html для тестування:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hyperscript Lib Test</title> <script src="./dist/hyperscript-lib.js"></script> </head> <body> <button h-class="add:btn btn-primary" h-attr="disabled:false" h-on="click:handleClick"> Click me </button> <script> function handleClick(event, element) { console.log('Button clicked!'); H$(element).hyper(); } </script> </body> </html> |
Особливості та переваги підходу
- Декларативність: Поведінка елементів визначається безпосередньо в HTML, що робить код більш читабельним.
- Модульність: Кожна дія (класи, атрибути, події) реалізована окремо, що полегшує підтримку та розширення.
- Розширюваність: Нові дії можна легко додавати за допомогою
H$.addAction(). - Легкість використання: Бібліотека автоматично ініціалізується після завантаження DOM.
- Сумісність: Бібліотека компілюється в UMD формат, що робить її сумісною з різними системами модулів.
Висновок
Створення бібліотеки з концепцією гіперскрипта дозволяє розробникам швидко та інтуїтивно додавати інтерактивність до веб-сторінок. Цей підхід особливо корисний для невеликих проектів або для швидкого прототипування.
Для подальшого розвитку бібліотеки можна розглянути додавання більшої кількості дій, оптимізацію продуктивності та розширення функціональності для роботи з асинхронними операціями.