Приклад створення простого фреймворку

Наведемо тут приклад створення простого фреймворку. Почнемо з опису його можливостей. Цей фреймворк має забезпечувати виведення на вебсторінку випадкового числа. Фреймворк матиме такі опції: зміна діапазону випадкових чисел \([a,b]\), точність випадкового числа після коми має вказуватися цілим додатним числом від нуля і більше (якщо \(0\), то випадкове число має бути цілим), а також має виконуватися перевірка правильності введення параметрів - число «a» має бути менше за «b», а параметр точності нуль або більше та обов'язково мати ціле значення. Рекомендується перед початком ознайомитися з цим матеріалом про те, що таке фреймворк та як створюються фреймворки.

Для більшого розуміння спочатку покажемо роботу фреймворку що тут створюється. У нашому прикладі нехай діапазон випадкових чисел буде \([5,50]\) а точність - два знаки після коми. Ось результат генерації під час завантаження сторінки. Ви можете перезавантажити (F5) сторінку, щоб побачити нове випадкове число.

Далі наведемо код самого міні-фреймворку, який маємо зберегти під ім'ям: simple-framework.js.

class SimpleFramework { constructor() { this.rootElement = document.getElementById('app'); this.minRange = 1; // Мінімальний діапазон за замовчуванням this.maxRange = 100; // Максимальний діапазон за замовчуванням this.precision = 0; // Точність за замовчуванням (ціле випадкове число) } // Метод для генерації випадкового числа з урахуванням параметрів generateRandomNumber() { const randomValue = Math.random() * (this.maxRange - this.minRange) + this.minRange; return this.precision === 0 ? Math.floor(randomValue) : randomValue.toFixed(this.precision); } // Метод для перевірки правильності введення параметрів validateParameters() { return this.minRange < this.maxRange && Number.isInteger(this.precision) && this.precision >= 0; } // Метод для виведення на сторінку render(content) { this.rootElement.innerHTML = content; } // Метод для виведення випадкового числа на сторінку з урахуванням параметрів renderRandomNumber() { if (this.validateParameters()) { const randomNumber = this.generateRandomNumber(); const content = `<h1>Випадкове число: ${randomNumber}</h1>`; this.render(content); } else { const content = '<p style="color: red;">Помилка введення параметрів</p>'; this.render(content); } } // Метод для оновлення параметрів setOptions(min, max, precision) { this.minRange = min; this.maxRange = max; this.precision = precision; } } // Створення екземпляра фреймворку const framework = new SimpleFramework(); // Встановлення нових параметрів (мінімальний діапазон, максимальний діапазон, точність) framework.setOptions(5, 50, 2); // Виклик методу для виведення випадкового числа з новими параметрами framework.renderRandomNumber();

Наведемо деякі пояснення. Ми створили простий клас SimpleFramework, який має метод для генерації випадкового числа generateRandomNumber, метод для виведення контенту на сторінку (render), і метод для виведення випадкового числа renderRandomNumber. Також додали метод setOptions, який дозволяє встановити нові значення параметрів (мінімальний діапазон, максимальний діапазон, точність). Також ми додали метод validateParameters, який перевіряє правильність введення параметрів перед генерацією випадкового числа. Якщо параметри введено некоректно, на сторінці виводиться повідомлення про помилку.

Далі наведемо фрагмент вебсторінки на, який викликається цей фреймворк.

<!-- Кореневий елемент, де буде виводитися вміст --> <div id="app"></div> <!-- Підключення скрипту з міні-фреймворком --> <script src="simple-framework.js"></script> <!-- Скрипт для використання фреймворку --> <script> // Створення екземпляра фреймворку const framework = new SimpleFramework(); // Встановлення нових параметрів (діапазон, точність) framework.setOptions(5, 50, 2); // Виклик методу з новими параметрами framework.renderRandomNumber(); </script>

Тепер пояснення. HTML-документ містить елемент з ідентифікатором app, куди буде виводитися вміст. Також ми під'єднуємо скрипт simple-framework.js, в якому розташований наш міні-фреймворк, та викликаємо метод для виведення випадкового числа на сторінці, вказую потрібні нам параметри - діапазон і точність. Більш детально читайте коментарі до коду.

Зауважте, що для повноцінного використання цього фреймворку вам слід додати більше функцій та можливостей відповідно до ваших потреб. Той приклад який ви тут бачите скоріш за все фреймворком можна назвати умовно, але принцип вам має стати зрозумілим.

---

---

 Схожі публікації

---