Как сделать плагин jQuery в виде объекта?
Ну, название темы, может быть, сформулировано коряво. Но ниже подробности.
Принцип в голове таков: делается объект, к примеру:
var plugin = {
name: "plugin",
__init: function(){...},
foo: function(){...}
}
Потом этот объект становится частью jQuery (не знаю, как). Гуглеж дает только начальные принципы создания плагинов. Вобщем смысл примерно таков: хочу объект сделать частью jQuery, чтобы без самого объекта его методы и свойства нельзя было вызывать.
$("...").plugin.__init(); // Нет ошибки
$("...").__init(); // Ошибка, метод не является частью jQuery.
Вот так. Если что-то не понятно (а с моим описанием, наверняка многое не понятно), спрашивайте - объясню :) |
(function($){
var name="youPlug";
$.fn[name]=function(options){
//получим ссылку на контейнер
var container=$(this);
//если в контейнере это плагина нет, тогда создадим новый экземпляр
if (!container.data(name)){
//создаём плагин
var f=function(){
//здесь вы можете разместить приватные функции и переменные
// return возвращает обьект с публичными свойствами
return {
// напишем какойнибудь демонстрационный код
msg:options.msg,
test:function(){
alert(this.msg);
}
}
}
//сохраним плагин в data
container.data(name,f());
}
//если плагин есть, то возвращаем уже созданный экземпляр
else {
return container.data(name);
}
}
})(jQuery);
//эксперемент
$(function(){
$("#test").youPlug({msg:"привет"}); //создаём плагин
$("#test").youPlug().test(); //вызываем метод плагина //alert("привет")
})
|
Цитата:
jQuery.fn.plugin = plugin; |
Цитата:
2 DjDiablo: спасибо большое, решение развернутое и понятное :) |
Цитата:
|
2 melky: нужно, чтобы в объекте хранился объект jQuery и потом передавался всем методам объекта. Как-то так...
|
Непонятно, чем вас не устраивает официальная документация по написанию плагинов для jQuery? Она довольно подробна. Если вы хотите писать плагин, то и пишите его по существующим правилам, не надо придумывать свои.
|
Цитата:
Придумывайте свои правила, делайте нестандартно, делайте оригинально, далайте быстрее других, делайте надёжнее других, делайте мощнее чем у других, не стойте на месте, работайте на опережение. |
Это можно сказать опытному человеку, т.к. он сделает хоть и по своему, но правильно и понятно для других. А вот начинающие в таком случае понаписывают такого, что захочется им оторвать жопу...
|
Цитата:
(function($){
var name="youPlug";
$.fn[name]=function(options){
return this.each(function() { // проходим по всем элементам
//получим ссылку на контейнер
var container=$(this);
// ...............
});
}
})(jQuery);
Хотя в вашем случае будет работать и так как у вас, так как вы не юзаете свойства отдельных элементов. |
Цитата:
насчёт второго :
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
jQuery.fn.init.prototype.foo = { bar: "ok" };
alert( $().foo.bar );
</script>
Цитата:
Цитата:
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<p>TEST</p>
<script>
jQuery.fn.colorchangers = {
toRed: function() {
// JQ-объект (контекст) хранится в свойстве _this
// this - это объект, который щас описываем.
return this._this.css("color", "red");
},
randomColors: ["green", "aqua", "lime"],
toRandom: function(){
// т.к. this равен объекту colorchangers, то может обратиться к его свойствам
var randomColor = this.randomColors[Math.floor(Math.random()*this.randomColors.length)];
return this._this.css("color", randomColor);
}
};
// тут вся магия
function createGetter(propName) {
// упс, нет такого объекта
if (typeof jQuery.fn[propName] != "object") {
return $.error("Указанное имя свойства "+propName+" не является объектом");
}
// наследование проходится в курсе молого бойца.
var F = function(){};
F.prototype = jQuery.fn[propName];
// делаем из объекта геттер.
jQuery.fn[propName] = function() {
// чтобы каждый раз не создавать, сохраним его.
var fresh = this.data(propName+"_getter");
// если не сохранён, создаём и сохраняем
if (!fresh) {
fresh = new F();
this.data(propName+"_getter", fresh);
}
// сохраняем\изменяем контекст - в любой момент он может измениться - добавиться элементы и т.д.
fresh._this = this;
return fresh;
};
}
// колдуем ...
createGetter("colorchangers");
// тестим
var test = $("p");
test.colorchangers().toRed();
</script>
<div>TEST_2</div>
<script>
setTimeout(function() {
// изменим объект JQ и ещё затестим
test = test.add("div");
test.colorchangers().toRandom();
}, 800);
</script>
Цитата:
PS послезавтра экзамен по философии. могу бредить :) |
Devote - спасибо, перебор хоть и нужен не всегда,
но в том случае который я имел ввиду он и вправду нужен, я забыл про него просто напросто. melky Это не утопия, это вроде бы как гипербола :) в общем стилистическая фигура явного и намеренного преувеличения, имеющего целью усиление выразительности :D Цитата:
А не лучше ли уж тогда вместо propName, сразу обьект передавать ?
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<p>TEST</p>
<script>
// тут вся магия (бывший метод createGetter)
jQuery.createPlugin=function (propName,obj) {
// наследование проходится в курсе молого бойца.
var F = function(){};
F.prototype = obj;
// делаем из объекта геттер.
jQuery.fn[propName] = function() {
// чтобы каждый раз не создавать, сохраним его.
var fresh = this.data(propName+"_getter");
// если не сохранён, создаём и сохраняем
if (!fresh) {
fresh = new F();
this.data(propName+"_getter", fresh);
}
// сохраняем\изменяем контекст - в любой момент он может измениться - добавиться элементы и т.д.
fresh._this = this;
return fresh;
};
}
// колдуем ...
jQuery.createPlugin("colorchangers",{
toRed: function() {
// JQ-объект (контекст) хранится в свойстве _this
// this - это объект, который щас описываем.
return this._this.css("color", "red");
},
randomColors: ["green", "aqua", "lime"],
toRandom: function(){
// т.к. this равен объекту colorchangers, то может обратиться к его свойствам
var randomColor = this.randomColors[Math.floor(Math.random()*this.randomColors.length)];
return this._this.css("color", randomColor);
}
});
// тестим
var test = $("p");
test.colorchangers().toRed();
</script>
<div>TEST_2</div>
<script>
setTimeout(function() {
// изменим объект JQ и ещё затестим
test = test.add("div");
test.colorchangers().toRandom();
}, 800);
</script>
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:17. |