Создание плагина на нативном JavaScript
В jQuery все просто — создается новый метод для объекта jQuery.
jQuery.fn.myPlugin = function() {
// Тут пишем код
};
А как то же самое сделать на нативном JS? Т.е. допустим, вызвать у какого-нибудь элемента метод myPlugin.
document.querySelector('element').myPlugin()
Правильно ли будет создавать метод в Element.prototype?
Element.prototype.myPlugin = function {
// ...
};
|
Пример кода плагина
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();
|
Poznakomlus, спасибо, но это я знаю.
Вот допустим есть плагин fullPage. Он вызывается у элемента так:
$('#fullpage').fullpage({options});
Сам плагин написан так:
$.fn.fullpage = function(options) {
// ...
}
Я имею ввиду как сделать то же самое только нативным JS? Чтоб у определенного элемента вызвать метод.
document.getElementById('fullpage').fullpage({options});
|
$ - это функция
<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>
|
Лучше классом делать.
(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();
|
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>
|
23keks23, здесь не колхоз
|
Цитата:
<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>
|
Poznakomlus, вот эта строка (15)
this._element = document.querySelector(tag); находит самый первый элемент с селектором tag, для того что бы найти все элементы используют querySelectorAll(tag), но тогда в this._element будет массив. Как обработать каждый из элементов? У тебя блоки с ID а я хочу понять как тоже самое сделать с одинаковым CLASS например для <div class="test"></div> <div class="test"></div> |
function MyTest(element) {}
если у каждого должны быть свои свойства, то передавайте element пройдясь по всем элементам инициализируйте их индивидуальные свойства |
| Часовой пояс GMT +3, время: 00:10. |