Создание плагина на нативном JavaScript

[Decode]

В jQuery все просто — создается новый метод для объекта jQuery.

jQuery.fn.myPlugin = function() {
  // Тут пишем код
};

А как то же самое сделать на нативном JS? Т.е. допустим, вызвать у какого-нибудь элемента метод myPlugin.

document.querySelector('element').myPlugin()

Правильно ли будет создавать метод в Element.prototype?

Element.prototype.myPlugin = function {
  // ...
};

[Vlasenko Fedor]

Пример кода плагина

var myPlugin = function () {
        function myPlugin(params) {
                if (!(this instanceof myPlugin)) {
                        return new myPlugin(params);
                }
                this.initialize.apply(this, arguments);
        }
        myPlugin.prototype = {
                initialize: function (arg) {
                        this.text = arg.text;
                },
                message: function () {
                        alert(this.text);
                }
        };
        return myPlugin;
}();

myPlugin({text: 'работаем'}).message();

[Decode]

Poznakomlus, спасибо, но это я знаю.

Вот допустим есть плагин fullPage. Он вызывается у элемента так:

$('#fullpage').fullpage({options});

Сам плагин написан так:

$.fn.fullpage = function(options) {
   // ...
}

Я имею ввиду как сделать то же самое только нативным JS? Чтоб у определенного элемента вызвать метод.

document.getElementById('fullpage').fullpage({options});

[Vlasenko Fedor]

$ - это функция

<div id="fullpage">My text</div>
<script>
var $ = function () {
        function myPlugin(tag) {
                if (!(this instanceof myPlugin)) {
                        return new myPlugin(tag);
                }
                this.el = document.getElementById(tag);
        }
        myPlugin.prototype.message = function () {
                alert(this.el.innerHTML);
        };
        return myPlugin;
}();
$('fullpage').message();
</script>

Таким образом вы изменяете прототип всех html элементов, так делать не рекомендуется, потому, что это может сделать кто то другой да и есть решение выше

<div id="fullpage">My text</div>
<script>
Element.prototype.message = function () {
    alert(this.innerHTML);
};
document.getElementById('fullpage').message();
</script>

[ruslan_mart]

Лучше классом делать.

(function(window) {
   window.MyPlugin = function(element) {
      this.element = element;
   }
   myPlugin.prototype.myMethod = function() {
      //...
   }
})(window);

var elem = document.getElementById('elem');
var test = new MyPlugin(elem);
test.myMethod();

[23keks23]

Poznakomlus, твой вариант с функцией myPlugin работает отлично. Но что если я хочу передать класс элемента, а этих элементов будет несколько? Пока решение нашел вот такое, но по мне это "колхоз", собственно пример ниже:

var myPlugin = function () {
	function init(css) {
		if (!(this instanceof init)) {
			return new init(css);
		}

		if (typeof css == "object") this.els = [css];
		else this.els = document.querySelectorAll(css);
	}

	init.prototype.message = function (args) {
		[ ].forEach.call(this.els, function (el) {
			console.log(el);
		});
	}

	return init;
} ();

<button class="popup_message">A pop-up message with a warning</button>
<button class="popup_message">A pop-up message with a confirm</button>

<script>
	var res = jPlugin('.popup_message').message(args);
</script>

[Vlasenko Fedor]

Но что если я хочу передать класс элемента, а этих элементов будет несколько

<div id="test"></div>
<div id="test2"></div>
<script>
function MyTest(tag) {
    var self = this instanceof MyTest
        ? this
        : Object.create(MyTest.prototype);
    self.init.apply(self, arguments);
    return self;
}
MyTest.prototype = {
    init: function (tag) {
        if (tag && typeof tag === 'string') {
            var self = this;
            this._element = document.querySelector(tag);
            if (!this._element) {
                throw Error("MyTest: element with this tag isn't found");
            }
            this._element.addEventListener('click', function () {
                if(typeof self._callback === 'function') self._callback(self.value);
            });
        } else {
            throw Error("MyTest: tag is not string");
        }
    },
    get value() {
        return this._value;
    },
    set value(value) {
        this._value = value;
        this._element.innerHTML = value;
    },
    onclick: function (callback) {
        this._callback = callback;
    }
};
// Используем
var foo = MyTest('#test');
foo.value = 555;
foo.onclick(function (value) {
    alert(value);
});
var foo2 = MyTest('#test2');
foo2.value = 777;
foo2.onclick(function (value) {
    alert(value);
});
</script>

[23keks23]

Poznakomlus, вот эта строка (15)

this._element = document.querySelector(tag);

находит самый первый элемент с селектором tag, для того что бы найти все элементы используют querySelectorAll(tag), но тогда в this._element будет массив. Как обработать каждый из элементов? У тебя блоки с ID а я хочу понять как тоже самое сделать с одинаковым CLASS например для

<div class="test"></div> 
<div class="test"></div>

[Vlasenko Fedor]

function MyTest(element) {}

если у каждого должны быть свои свойства, то передавайте element
пройдясь по всем элементам инициализируйте их индивидуальные свойства

[Vlasenko Fedor]

Еще примеры (собственные велосипеды )
https://jsfiddle.net/vlasenkofedor/jLprM/
https://jsfiddle.net/vlasenkofedor/uRj7c/
https://jsfiddle.net/vlasenkofedor/UFmLf/