Как создать простой плагин c JavaScript

В этой записи, я покажу вам как написать простой плагин с помощью JavaScript. Я не стал писать сложный вариант, потому что он лишь запутает многих из вас, а мне нужно, чтобы вы всё поняли.

Демо

Как работает плагин? Вы пишите число и плагин до этого числа выводит все числа через запятую. Например, вы написали 10, то в итоге вы увидите «1, 2, 3, … 9, 10». Логика достаточно простая, ниже можете посмотреть рабочий пример.

21516

Запуск плагина

Для начала, сделаем так, чтобы плагин сразу загрузился на странице.

(function() {
    // Вы не сможете вызвать это значение через консоль
    var privateVar = 'Меня нельзя вызвать из консоли';
}());

Имя плагина и конструктор

Далее нужно создать конструктор, который будет началом нашего плагина. В моем случае плагин называться Count2number.

(function() {
    // Обозначаем конструктор для плагина
    this.Count2number = function() {
      // У плагина будут настройки
      // - куда будут записываться цифры — container 
      // - до какого числа будут отображаться числа 
      // эти значения мы потом сможем настраивать как нам захочется. 
      var defaults = {
          container: '#cont1',
          number: 5
      }
      
      // Проверяем наличие аргументов и если они есть, перезаписываем все выше перечисленные на новые значения используя функцию extend(), которая написана ниже 
      if (arguments[0] && typeof arguments[0] === "object") {
          this.options = extend(defaults, arguments[0]);
      }
    }

    function extend(defaults, options ) {
        var extended = {};
        var prop;
        for (prop in defaults) {
            if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
                extended[prop] = defaults[prop];
            }
        }
        for (prop in options) {
            if (Object.prototype.hasOwnProperty.call(options, prop)) {
                extended[prop] = options[prop];
            }
        }
        return extended;
    };  
}());

Все значения, которые указываются с this.название_переменной — это публичные, начинающиеся с var название_переменной — это приватные, они обычно создаются только для внутреннего использования в классе.

Функция вывода числе от 1-го до n

Теперь нужно создать функцию, которая будет ввести счет от 1-го до n. В итоге, у меня получился следующий код (смотреть ниже). Я не стал писать много про эту функцию, посчитал, что комментариев в коде будет достаточно. Если вам этого не достаточно, то пожалуйста задайте мне вопрос(-ы) ниже к этому посту.

(function() {
    // Обозначаем конструктор для плагина
    this.Count2number = function() {
        // У плагина будут настройки
        // - куда будут записываться цифры — container 
        // - до какого числа будут отображаться числа 
        // эти значения мы потом сможем настраивать как нам захочется. 
        var defaults = {
            container: '#cont1',
            number: 5
        }
        
        // Проверяем наличие аргументов и если они есть, перезаписываем все выше перечисленные на новые значения используя функцию extend(), которая написана ниже 
        if (arguments[0] && typeof arguments[0] === "object") {
            this.options = extend(defaults, arguments[0]);
        }
      
        // Вызываем count() функцию, подробнее смотреть ниже 
        this.count();
    }
  
    /**
     * Подсчет числе от 1 до n. Где n равно this.options.number 
     * 
    */
    Count2number.prototype.count = function() {
      // Начнем подсчет от 1 до this.options.number и по одному 
      for(var i = 1; i <= this.options.number; i++) {
        // Определим элемент, в котороый добавим все числа 
        var container = document.querySelector(this.options.container);
        
        // Обязательно проверим, существует ли элемент на странице.
        // Если нет, то пишет ошибку. Можете попробовать добавить контейнер, которого
        // не существует и в консоли вы должны увидеть ошибку, которая написана ниже. 
        if( !container ) {
          throw Error('Элемента с ID/CLASS: ' + this.options.container + ' не было найдено.');
        }
        
        // Вписываем i значение в containe, а также запятую после числа.
        // Если i меньше числа до которого нужно двигаться, то нужно писать запятую в конце,
        // а если нет, то не нужно, тем самым это последнее число в списке.
        container.append(i + (i < this.options.number ? ', ' : ''));
      }
    };

    function extend(defaults, options ) {
        var extended = {};
        var prop;
        for (prop in defaults) {
            if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
                extended[prop] = defaults[prop];
            }
        }
        for (prop in options) {
            if (Object.prototype.hasOwnProperty.call(options, prop)) {
                extended[prop] = options[prop];
            }
        }
        return extended;
    };
}());

Тестируем плагин

И теперь нужно вызвать плагин, чтобы проверить его работу.

new Count2number({
  container: '#cont2',
  number: 51
});

В итоге получается так, что я перезаписал #cont1 в defaults на #cont1 с помощью конструктора, которые теперь является контейнером, куда будут записываться все числа.

И числа, со стандартных 5-ти, были перезаписаны на 51, и тем самым теперь будет выводиться с 1 по 51.