Розширення ModernDOM: системою плагінів

Навіщо потрібна система плагінів?

Модульність: Дозволяє розділити функціональність на окремі, незалежні модулі.
Гнучкість: Користувачі можуть обирати та використовувати лише ті функції, які їм потрібні.
Розширюваність: Спрощує додавання нової функціональності без зміни основного коду бібліотеки.
Спільнота: Сприяє створенню екосистеми, де розробники можуть ділитися своїми плагінами.
Оптимізація: Дозволяє зменшити розмір основної бібліотеки, включаючи додаткові функції лише за потреби.

Про систему плагінів ModernDOM

Простота використання: Плагіни легко додаються до проекту та активуються.
Ланцюжок методів: Підтримка ланцюжка викликів для зручного використання.
Налаштування: Можливість передачі параметрів для кастомізації поведінки плагінів.
Сумісність: Плагіни працюють з основними методами бібліотеки та між собою.
Розширення прототипу: Використання $.fn.extend() для додавання нових методів.

Варіанти реалізації плагінів

Функціональні плагіни: Додають нові методи до об’єкта $.
UI-компоненти: Створюють інтерактивні елементи інтерфейсу (наприклад, слайдери, модальні вікна).
Утиліти: Додають допоміжні функції для роботи з даними або DOM.
Інтеграційні плагіни: Забезпечують взаємодію з іншими бібліотеками або API.
Анімаційні плагіни: Розширюють можливості анімації елементів.

Давайте реалізуємо базову систему плагінів.

Ось як ми можемо це зробити:

1. Спочатку оновимо наш основний файл src/core.js, додавши підтримку плагінів:

const $ = function(selector) {
  if (typeof selector === 'function') {
    document.addEventListener('DOMContentLoaded', selector);
    return;
  }
  return new $.prototype.init(selector);
};

$.prototype.init = function(selector) {
  // ... (існуючий код)
};

$.prototype.init.prototype = $.prototype;

// Додаємо систему плагінів
$.fn = $.prototype;

$.extend = $.fn.extend = function(obj) {
  for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
      this[prop] = obj[prop];
    }
  }
  return this;
};

window.$ = $;

export default $;

const $ = function(selector) {

if (typeof selector === 'function') {

document.addEventListener('DOMContentLoaded', selector);

return;

}

return new $.prototype.init(selector);

};

$.prototype.init = function(selector) {

// ... (існуючий код)

};

$.prototype.init.prototype = $.prototype;

// Додаємо систему плагінів

$.fn = $.prototype;

$.extend = $.fn.extend = function(obj) {

for (let prop in obj) {

if (obj.hasOwnProperty(prop)) {

this[prop] = obj[prop];

}

return this;

};

window.$ = $;

export default $;

2. Тепер створимо новий файл src/plugins.js для зберігання наших плагінів:

import $ from './core';

// Плагін для створення випадаючого меню
$.fn.extend({
  dropdown: function(options) {
    const defaults = {
      trigger: 'click',
      toggleClass: 'active'
    };
    const settings = $.extend({}, defaults, options);

    return this.each(function() {
      const $this = $(this);
      const $toggle = $this.find('.dropdown-toggle');
      const $menu = $this.find('.dropdown-menu');

      $toggle.on(settings.trigger, function(e) {
        e.preventDefault();
        $this.toggleClass(settings.toggleClass);
        $menu.toggleClass(settings.toggleClass);
      });

      $(document).on('click', function(e) {
        if (!$this.is(e.target) && $this.has(e.target).length === 0) {
          $this.removeClass(settings.toggleClass);
          $menu.removeClass(settings.toggleClass);
        }
      });
    });
  }
});

// Плагін для створення табів
$.fn.extend({
  tabs: function() {
    return this.each(function() {
      const $tabContainer = $(this);
      const $tabs = $tabContainer.find('.tab');
      const $contents = $tabContainer.find('.tab-content');

      $tabs.on('click', function() {
        const tabId = $(this).attr('data-tab');
        
        $tabs.removeClass('active');
        $(this).addClass('active');
        
        $contents.removeClass('active');
        $tabContainer.find(`#${tabId}`).addClass('active');
      });
    });
  }
});

// Додайте інші плагіни за необхідності

import $ from './core';

// Плагін для створення випадаючого меню

$.fn.extend({

dropdown: function(options) {

const defaults = {

trigger: 'click',

toggleClass: 'active'

};

const settings = $.extend({}, defaults, options);

return this.each(function() {

const $this = $(this);

const $toggle = $this.find('.dropdown-toggle');

const $menu = $this.find('.dropdown-menu');

$toggle.on(settings.trigger, function(e) {

e.preventDefault();

$this.toggleClass(settings.toggleClass);

$menu.toggleClass(settings.toggleClass);

});

$(document).on('click', function(e) {

if (!$this.is(e.target) && $this.has(e.target).length === 0) {

$this.removeClass(settings.toggleClass);

$menu.removeClass(settings.toggleClass);

}

});

}

});

// Плагін для створення табів

$.fn.extend({

tabs: function() {

return this.each(function() {

const $tabContainer = $(this);

const $tabs = $tabContainer.find('.tab');

const $contents = $tabContainer.find('.tab-content');

$tabs.on('click', function() {

const tabId = $(this).attr('data-tab');

$tabs.removeClass('active');

$(this).addClass('active');

$contents.removeClass('active');

$tabContainer.find(`#${tabId}`).addClass('active');

});

}

});

// Додайте інші плагіни за необхідності

3. Оновимо файл src/index.js, щоб включити плагіни:

import $ from './core';
import './modules/classes';
import './modules/attributes';
import './modules/events';
import './modules/ajax';
import './modules/animations';
import './plugins';

export default $;

import $ from './core';

import './modules/classes';

import './modules/attributes';

import './modules/events';

import './modules/ajax';

import './modules/animations';

import './plugins';

export default $;

4. Оновимо gulpfile.js, щоб включити файл плагінів у збірку:

gulp.task('build-js', () => {
  return gulp.src(['src/polyfills.js', 'src/core.js', 'src/modules/*.js', 'src/plugins.js', 'src/index.js'])
    // ... (інший код збірки)
});

gulp.task('build-js', () => {

return gulp.src(['src/polyfills.js', 'src/core.js', 'src/modules/*.js', 'src/plugins.js', 'src/index.js'])

// ... (інший код збірки)

});

Тепер ми можемо використовувати ці плагіни у своєму HTML наступним чином:

<div class="dropdown">
  <button class="dropdown-toggle">Dropdown</button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<div class="tab-container">
  <div class="tabs">
    <button class="tab active" data-tab="tab1">Tab 1</button>
    <button class="tab" data-tab="tab2">Tab 2</button>
  </div>
  <div class="tab-contents">
    <div id="tab1" class="tab-content active">Content 1</div>
    <div id="tab2" class="tab-content">Content 2</div>
  </div>
</div>

<script>
  $(document).ready(function() {
    $('.dropdown').dropdown();
    $('.tab-container').tabs();
  });
</script>

<button class="dropdown-toggle">Dropdown</button>

</ul>

</div>

</div>

<div id="tab1" class="tab-content active">Content 1</div>

<div id="tab2" class="tab-content">Content 2</div>

</div>

$(document).ready(function() {

$('.dropdown').dropdown();

$('.tab-container').tabs();

});

</script>

Давайте розглянемо, що ми зробили для впровадження системи плагінів у нашу бібліотеку ModernDOM.

Розширення core.js:
- Ми додали $.fn як псевдонім для $.prototype. Це стандартна практика, яка дозволяє легко розширювати прототип.
- Ми створили метод $.extend і $.fn.extend. Ці методи дозволяють легко додавати нові властивості та методи до $ або його прототипу.
Створення plugins.js:
- Ми створили окремий файл для зберігання плагінів, що покращує організацію коду.
- Використовуючи $.fn.extend, ми додали два приклади плагінів: dropdown і tabs.
Структура плагінів:
- Кожен плагін оформлений як метод, який можна викликати на jQuery-подібному об’єкті.
- Плагіни підтримують ланцюжок методів, повертаючи this.
- Ми використовували $.extend для об’єднання налаштувань за замовчуванням з користувацькими опціями.
Інтеграція з основною бібліотекою:
- Ми оновили index.js, щоб включити файл plugins.js.
- Це забезпечує автоматичне завантаження плагінів разом з основною бібліотекою.
Оновлення процесу збірки:
- Ми модифікували gulpfile.js, щоб включити plugins.js у процес збірки.
Використання плагінів:
- Ми показали, як використовувати створені плагіни в HTML та JavaScript.

Ця реалізація дозволяє:

Легко додавати нову функціональність без зміни основного коду.
Користувачам вибирати, які плагіни використовувати.
Створювати складні UI-компоненти за допомогою простого API.
Розробникам створювати та ділитися власними плагінами.

Таким чином, ми створили гнучку та розширювану систему, яка значно збільшує можливості нашої бібліотеки ModernDOM, роблячи її більш потужним інструментом для веб-розробки.

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

Існує кілька способів додати плагіни до вже зібраної бібліотеки ModernDOM. Розглянемо основні підходи:

1. Окремі файли плагінів

Створіть окремі JavaScript файли для кожного плагіна.
Підключіть ці файли після основного файлу бібліотеки.

<script src="moderndom.min.js"></script>
<script src="moderndom-plugin-dropdown.js"></script>
<script src="moderndom-plugin-tabs.js"></script>

2. Динамічне завантаження

- Використовуйте динамічне завантаження скриптів для додавання плагінів за потребою.

function loadPlugin(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// Використання
loadPlugin('moderndom-plugin-dropdown.js')
  .then(() => {
    $('.dropdown').dropdown();
  });

function loadPlugin(url) {

return new Promise((resolve, reject) => {

const script = document.createElement('script');

script.src = url;

script.onload = resolve;

script.onerror = reject;

document.head.appendChild(script);

});

}

// Використання

loadPlugin('moderndom-plugin-dropdown.js')

.then(() => {

$('.dropdown').dropdown();

});

3. AMD (Asynchronous Module Definition)

Використовуйте систему модулів AMD для завантаження плагінів.
Потрібно, щоб бібліотека та плагіни підтримували AMD.

require(['moderndom', 'moderndom-plugin-dropdown'], function($) {
  $('.dropdown').dropdown();
});

require(['moderndom', 'moderndom-plugin-dropdown'], function($) {

$('.dropdown').dropdown();

});

4. Реєстрація плагінів

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

// У core.js
$.registerPlugin = function(name, plugin) {
  $.fn[name] = plugin;
};

// У окремому файлі плагіна
$.registerPlugin('dropdown', function(options) {
  // Код плагіна
});

// У core.js

$.registerPlugin = function(name, plugin) {

$.fn[name] = plugin;

};

// У окремому файлі плагіна

$.registerPlugin('dropdown', function(options) {

// Код плагіна

});

5. Використання CDN

Розмістіть плагіни на CDN і завантажуйте їх звідти.

<script src="https://cdn.example.com/moderndom/moderndom.min.js"></script>
<script src="https://cdn.example.com/moderndom/plugins/dropdown.js"></script>

1 2	<script src="https://cdn.example.com/moderndom/moderndom.min.js"></script> <script src="https://cdn.example.com/moderndom/plugins/dropdown.js"></script>

6. Розширення через прототип

Якщо бібліотека експортує глобальний об’єкт, можна розширити його прототип.

// У окремому файлі плагіна
(function($) {
  $.fn.dropdown = function(options) {
    // Код плагіна
  };
})(ModernDOM);

// У окремому файлі плагіна

(function($) {

$.fn.dropdown = function(options) {

// Код плагіна

};

})(ModernDOM);

Для реалізації цих підходів у нашій бібліотеці, ми можемо:

Модифікувати gulpfile.js, щоб створювати окремі файли для кожного плагіна.
Додати метод $.registerPlugin в core.js.
Реалізувати систему залежностей для плагінів.

Ось приклад модифікації gulpfile.js для створення окремих файлів плагінів:

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

// ... інші імпорти та завдання

gulp.task('build-plugins', () => {
  return gulp.src('src/plugins/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('dist/plugins'))
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('dist/plugins'));
});

gulp.task('build', gulp.series('clean', 'lint', 'build-js', 'build-plugins', 'docs'));

const gulp = require('gulp');

const babel = require('gulp-babel');

const uglify = require('gulp-uglify');

const rename = require('gulp-rename');

// ... інші імпорти та завдання

gulp.task('build-plugins', () => {

return gulp.src('src/plugins/*.js')

.pipe(babel({

presets: ['@babel/env']

}))

.pipe(gulp.dest('dist/plugins'))

.pipe(uglify())

.pipe(rename({ suffix: '.min' }))

.pipe(gulp.dest('dist/plugins'));

});

gulp.task('build', gulp.series('clean', 'lint', 'build-js', 'build-plugins', 'docs'));

Цей підхід дозволить користувачам нашої бібліотеки легко додавати потрібні їм плагіни після того, як основна бібліотека вже зібрана та розгорнута.

Навіщо потрібна система плагінів?

Про систему плагінів ModernDOM

Варіанти реалізації плагінів

Давайте реалізуємо базову систему плагінів.

Залишити відповідь Скасувати коментар