У попередній статті ми розглянули основи нашої бібліотеки ModernDOM. Тепер ми зосередимося на налаштуванні робочого процесу розробки за допомогою Gulp та розширенні функціональності нашої бібліотеки.
Налаштування проекту
Спочатку створимо структуру проекту:
moderndom/
├── src/
│ ├── core.js
│ ├── modules/
│ │ ├── classes.js
│ │ ├── attributes.js
│ │ └── events.js
│ └── index.js
├── dist/
├── gulpfile.js
└── package.json
Налаштування Gulp
- Встановіть необхідні пакети:
|
1 2 |
npm init -y npm install --save-dev gulp gulp-concat gulp-uglify gulp-rename @babel/core @babel/preset-env gulp-babel |
2. Створіть gulpfile.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
const gulp = require('gulp'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); const babel = require('gulp-babel'); gulp.task('build', () => { return gulp.src(['src/core.js', 'src/modules/*.js', 'src/index.js']) .pipe(concat('moderndom.js')) .pipe(gulp.dest('dist')) .pipe(babel({ presets: ['@babel/env'] })) .pipe(uglify()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('dist')); }); gulp.task('watch', () => { gulp.watch('src/**/*.js', gulp.series('build')); }); gulp.task('default', gulp.series('build', 'watch')); |
Розширення функціональності
Тепер додамо деякі базові функції до нашої бібліотеки.
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 |
const $ = function (selector) { return new $.prototype.init(selector); }; $.prototype.init = function (selector) { if (!selector) { return this; } if (selector.tagName) { this[0] = selector; this.length = 1; return this; } Object.assign(this, document.querySelectorAll(selector)); this.length = document.querySelectorAll(selector).length; return this; }; $.prototype.init.prototype = $.prototype; window.$ = $; |
src/modules/classes.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$.prototype.addClass = function (...classes) { this.forEach(elem => elem.classList.add(...classes)); return this; }; $.prototype.removeClass = function (...classes) { this.forEach(elem => elem.classList.remove(...classes)); return this; }; $.prototype.toggleClass = function (className) { this.forEach(elem => elem.classList.toggle(className)); return this; }; |
src/modules/attributes.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$.prototype.attr = function (name, value) { if (typeof value === 'undefined') { return this[0].getAttribute(name); } this.forEach(elem => elem.setAttribute(name, value)); return this; }; $.prototype.removeAttr = function (name) { this.forEach(elem => elem.removeAttribute(name)); return this; }; |
src/modules/events.js
|
1 2 3 4 5 6 7 8 9 |
$.prototype.on = function (event, callback) { this.forEach(elem => elem.addEventListener(event, callback)); return this; }; $.prototype.off = function (event, callback) { this.forEach(elem => elem.removeEventListener(event, callback)); return this; }; |
src/index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$.prototype.forEach = function (callback) { [].forEach.call(this, callback); return this; }; $.prototype.map = function (callback) { return $([].map.call(this, callback)); }; $.prototype.filter = function (callback) { return $([].filter.call(this, callback)); }; |
Використання бібліотеки
Після збірки ви можете використовувати бібліотеку наступним чином:
|
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>ModernDOM Demo</title> <script src="dist/moderndom.min.js"></script> </head> <body> <button id="myButton">Click me</button> <script> $(document).ready(function() { $('#myButton') .addClass('btn') .on('click', function() { $(this).toggleClass('active'); }); }); </script> </body> </html> |
Переваги нашого підходу
- Модульність: Кожна функціональність розділена на окремі файли, що полегшує підтримку та розширення.
- Автоматизація: Gulp автоматизує процес збірки, мінімізації та транспіляції коду.
- Сучасний JavaScript: Використання ES6+ синтаксису з можливістю транспіляції для підтримки старіших браузерів.
- Легковісність: Результуюча бібліотека залишається легкою та ефективною.
Висновок
У цій статті ми налаштували робочий процес розробки для нашої ModernDOM бібліотеки за допомогою Gulp та розширили її функціональність. Тепер ми маємо потужний інструмент для маніпуляцій з DOM, який поєднує в собі легковісність, модульність та сучасні практики програмування.
У наступних статтях ми розглянемо додавання більш складної функціональності, такої як AJAX-запити, анімації та роботу з формами. Ми також обговоримо стратегії оптимізації продуктивності та забезпечення сумісності з різними браузерами.