Правильно ли я сделал плагин?

Question

[StasRomeo]

Ребят, пишу плагин на Jquery. Вопрос по грамматике и "кривости" кода. Что-то типа здравого смысла и "PSR" :)

1. Правильно ли я объявил и вызываю методы внутри плагина?
2. Правильно ли я сделал и вызвал метод init, который создал элементы управления?
3. Правильно ли я "нашел" эти кнопки (методом this + find), или из как-то проще можно создать и объявить?

<div id="block1"></div>

(function($){
$.fn.Test1 = function(options){

var thisObj = this;

var init = function(){
  thisObj.append('<input type="button" value="event1" class="btn1">');
  thisObj.append('<input type="button" value="event2" class="btn2">');
};

init();

var btn1 = thisObj.find('.btn1');
var btn2 = thisObj.find('.btn2');

var method1 = function(param){
  thisObj.css({'background-color':'red'});
};

var method2 = function(param){
  thisObj.css({'background-color':'blue'});
};

btn1.click(function(){
  method1();
});

btn2.click(function(){
  method2();
});

};
})(jQuery);

$(document).ready(function(){
  $("#block1").Test1();
});

Answer 1

[Алексей Пахомов]

У вас все повторяется 2 раза, напишите функцию и вызовите ее два раза с нужными аргументами. Во первых вы не будете писать один и тот же код 2 раза, во вторых сможете вызывать функцию сколько угодно раз.

Comments

[StasRomeo]

Да, с этим понятно, это я наглядно просто показал "типо" разные методы. Вопрос был именно про объявления и вызовы.

Answer 2

[Ihor Bratukh]

Здесь нечего сказать, просто процедурный плагин, без параметров и внешних методов.
Вот вам взрослый стартовый шаблон:

/**
 * @name PluginName
 * @version 1.0.0
 * @description jQuery Plugin
 * @since DD:MM:YYYY
 */
;(function ($) {
    'use strict';

    /**
     * @description Глобальный объект общих параметров плагина
     * @type {Object}
     */
    var plugin = {
        name: 'PluginName',
        version: '1.0.0',
        data: {
            general: 'general',
            setting: 'setting'
        }
    };

    /**
     * @description Параметры инициализации плагина по умолчанию
     * @type {Object}
     */
    var defaults = {

    };

    /**
     * @description Объект свойст для работы плагина
     * @type {Object}
     */
    var operative = {
        context: null,
        type: 'init',
        method: 'init'
    };

    /**
     * @description Объект публичных методов плагина
     * @type {Object<Function>}
     */
    var api = {};

    /**
     * @description Метод инициализации плагина
     * @type {Function}
     * @param {jQuery HTMLElement} $this jQuery DOM элемент на который инициализировали плагин
     * @param {Object} options Объект параметров инициализации
     * @param {Object} common Объект дополнительных параметров для работы плагина
     * @returns {jQuery HTMLElement} this
     */
    api.init = function ($this, options, common) {
        var setting = pluginSetting($this).set(plugin.data.setting, $.extend(true, {}, defaults, options));
        var general = pluginSetting($this).set(plugin.data.general, $.extend(true, {}, operative, common));

        //> Код плагина

        return $this;
    };

    /**
     * @description Метод получения параметров инициализации плагина
     * @type {Function}
     * @this {HTMLElement} DOM элемент на который инициализировали плагин
     * @param {String} [category = plugin.data.setting] Категория параметров, например "setting" или "general"
     * @param {String} key Ключ объекта параметров
     * @returns {Object | null} Объект параметров или null
     */
    api.get = function (category, key) {
        var params = pluginSetting($(this)).get(category || plugin.data.setting);
        return key ? params && params[key] ? params[key] : null : params || null;
    };

    /**
     * @description Метод установки новых значения и реинициализация плагина
     * @type {Function}
     * @this {HTMLElement} DOM элемент на который инициализировали плагин
     * @param {Object} params Объект новых параметров
     * @returns {HTMLElement} this
     */
    api.set = function (params) {
        var setting = pluginSetting($(this)).get(plugin.data.setting);
        return api.init($(this), $.extend(true, {}, setting, params), {
            context: this,
            type: 'update',
            method: 'set'
        });
    };

    /**
     * @description Метод получения текущей версии плагина
     * @type {Function}
     * @this {HTMLElement} DOM элемент на который инициализировали плагин
     * @returns {String} Версия плагина, например "1.0.0"
     */
    api.version = function () {
        return plugin.version;
    };

    /**
     * @description Проверить на Объект тип переданной сущности
     * @param {*} value Сущность
     * @returns {Boolean}
     */
    function isObject(value) {
        return typeof value === 'object' && !Array.isArray(value) && value !== null;
    }

    /**
     * @description Установить/получить настройки плагина
     * @type {Function}
     * @param {jQuery HTMLElement} $selector jQuery DOM элемент на который будут установленны настройки
     * @returns {Object<Function>} Объект методов
     */
    function pluginSetting($selector) {
        return {
            set: function (key, setting, filter) {
                var current = this.get(key);
                var params = $.extend(true, {}, current, setting);
                if (filter) filter(params);
                $selector.data(plugin.name, $.extend(true, {}, this.get(), createObjectWithKey(key, params)));
                return params;
            },
            get: function (key) {
                var data = $selector.data(plugin.name);
                return key ? data && data[key] ? data[key] : null : data || null;
            }
        };
    }

    /**
     * @description Получить объект с переданным ключом и значением
     * @param {String} key Ключ объекта 
     * @param {*} value Значение свойства объекта
     * @returns {Object} 
     */
    function createObjectWithKey(key, value) {
        var object = {};
        object[key] = value;
        return object;
    }

    /**
     * @description Установка методов плагина на глобальный объект jQuery
     * @type {Function}
     * @this {jQuery HTMLElement} jQuery DOM элемент на который инициализировали плагин
     * @param {Object | String} Параметры инициализации плагина или название метода
     * @returns {jQuery HTMLElement | *} this или результат вызова метода
     */
    $.fn[plugin.name] = function (setting) {
        if (isObject(setting) || !setting) {
            return $.each(this, function () {
                api.init($(this), setting, {
                    context: this,
                    type: 'init',
                    method: 'init'
                });
            });
        } else if (typeof setting === 'string') {
            var args = [].slice.call(arguments, 1);
            var method = setting.toLowerCase();
            for (var i = 0; i < this.get().length; i++) {
                if (method === 'init') break;
                var context = this.get(i);
                if (['get', 'version'].includes(method)) {
                    return api[method].apply(context, args);
                } else {
                    api[method].apply(context, args);
                }
            }
        }
        return this;
    };

})(jQuery);