jQuery-Plug-in-Kapselungsmethode

Das Erweitern von jQuery-Plug-Ins und -Methoden ist sehr leistungsfähig und kann viel Entwicklungszeit sparen. In diesem Artikel werden die Grundlagen, Best Practices und häufigen Fallstricke bei der Entwicklung von jQuery-Plugins beschrieben.

1. Erste Schritte

Das Schreiben eines jQuery-Plugins beginnt mit dem Hinzufügen eines neuen Funktionsattributs zu jQuery.fn. Der Name des hier hinzugefügten Objektattributs ist der Name Ihres Plug-ins :

. Der Code lautet wie folgt:

jQuery.fn.myPlugin = function(){
//你自己的插件代码
};

Wo sind die Symbole, die den Benutzern sehr gefallen? Es existiert noch, aber um Konflikte mit anderen JavaScript-Bibliotheken zu vermeiden, ist es besser, jQuery an ein selbstausführendes geschlossenes Programm zu übergeben, in dem jQuery als Symbol abgebildet wird, um zu verhindern, dass das $-Zeichen von anderen Bibliotheken überschrieben wird .

. Der Code lautet wie folgt:

(function ($) {
$.fn.myPlugin = function () {
//你自己的插件代码
};
})(jQuery);

In diesem geschlossenen Programm können wir das $-Symbol ohne Einschränkung verwenden, um jQuery darzustellen Funktionen.

2. Umgebung

Jetzt können wir mit dem Schreiben des eigentlichen Plug-in-Codes beginnen. Zuvor müssen wir jedoch eine Vorstellung von der Umgebung haben, in der sich das Plug-in befindet. Im Geltungsbereich des Plug-ins stellt das Schlüsselwort this das jQuery-Objekt dar, das das Plug-in ausführt. Hier kann es leicht zu Missverständnissen kommen, da das Schlüsselwort this in anderen jQuery-Funktionen, die Rückrufe enthalten, das native DOM-Element darstellt . Dies führt häufig dazu, dass Entwickler das Schlüsselwort this fälschlicherweise unnötigerweise in jQuery einschließen, wie unten gezeigt.

. Der Code lautet wie folgt:

(function ($) {
$.fn.myPlugin = function () {
//此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此处callback函数中this关键字代表一个DOM元素
});
};
})(jQuery);
$('#element').myPlugin();

3. Grundkenntnisse

Jetzt verstehen wir die Grundlagen Wissen Sie, was das jQuery-Plugin betrifft? Schreiben wir ein Plugin, das etwas tut.

. Der Code lautet wie folgt:

(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
   
这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。

4. Verkettbarkeit beibehalten

Oft besteht die Absicht eines Plug-Ins nur darin, die gesammelten Elemente zu ändern auf irgendeine Weise und übergeben Sie sie an die nächste Methode in der Kette. Das ist das Schöne am jQuery-Design und einer der Gründe, warum jQuery so beliebt ist. Um die Verkettbarkeit eines Plugins aufrechtzuerhalten, müssen Sie daher sicherstellen, dass Ihr Plugin das Schlüsselwort this zurückgibt.

. Der Code lautet wie folgt:

(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == 'width') {
$this.width($this.width());
}
if (!type || type == 'height') {
$this.height($this.height());
}
});
};
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');

Da das Plugin dieses Schlüsselwort zurückgibt, behält es die Verkettbarkeit bei, sodass die von jQuery kann weiterhin durch jQuery-Methoden wie .css gesteuert werden. Wenn Ihr Plugin daher keinen intrinsischen Wert zurückgibt, sollten Sie das Schlüsselwort this immer innerhalb seines Gültigkeitsbereichs zurückgeben. Darüber hinaus können Sie daraus schließen, dass an ein Plugin übergebene Parameter innerhalb des Gültigkeitsbereichs des Plugins übergeben werden. Daher wird im vorherigen Beispiel die Zeichenfolge „width“ zu einem Typparameter des Plugins.

5. Standardwerte und Optionen

Für komplexere Plug-Ins, die viele anpassbare Optionen bieten, ist es am besten, eine Standardeinstellung zu haben, die erweitert werden kann, wenn das Plug-In verfügbar ist aufgerufen (Durch Verwendung von $.extend). Anstatt also ein Plugin mit einer Reihe von Parametern aufzurufen, können Sie es mit einem Objektparameter aufrufen, der die Einstellungen enthält, die Sie überschreiben möchten.

. Der Code lautet wie folgt:

(function ($) {
$.fn.tooltip = function (options) {
//创建一些默认值，拓展任何被提供的选项
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip插件代码
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});

In diesem Beispiel wird die Standortoption in den Standardeinstellungen beim Aufrufen überschrieben Tooltip-Plugin. Die Option „Hintergrundfarbe“ bleibt auf ihrem Standardwert, daher lautet der endgültige aufgerufene Einstellungswert:

Der Code lautet wie folgt:

{
'location': 'left',
'background-color': 'blue'
}

Dies ist eine sehr flexible Möglichkeit, ein hochgradig konfigurierbares Plugin bereitzustellen, ohne dass der Entwickler alle verfügbaren Optionen definieren muss.

6. Namespace

Die richtige Benennung Ihres Plug-Ins ist ein sehr wichtiger Teil der Plug-In-Entwicklung. Mit dem richtigen Namespace können Sie garantieren, dass die Wahrscheinlichkeit, dass Ihr Plugin von anderen Plugins oder anderem Code auf derselben Seite überschrieben wird, sehr gering ist. Namespaces erleichtern Ihnen auch das Leben als Plugin-Entwickler, da sie Ihnen dabei helfen, den Überblick über Ihre Methoden, Ereignisse und Daten zu behalten.

7. Plug-in-Methoden

In jedem Fall sollte ein einzelnes Plug-in nicht mehrere Namespaces im jQuery.fnjQuery.fn-Objekt haben.

. Der Code lautet wie folgt:

(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);

Dies wird nicht empfohlen, da .fn den .fn-Namespace überfüllt. Um dieses Problem zu lösen, sollten Sie alle Methoden des Plugins im Objekttext sammeln und sie aufrufen, indem Sie den Stringnamen der Methode an das Plugin übergeben.

. Der Code lautet wie folgt:

(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 方法调用
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.tooltip');
}
};
})(jQuery);
//调用init方法
$('div').tooltip();
//调用init方法
$('div').tooltip({
foo: 'bar'
});
// 调用hide方法
$(‘div').tooltip(‘hide');
//调用Update方法
$(‘div').tooltip(‘update', ‘This is the new tooltip content!');

Diese Art von Plug-in-Architektur ermöglicht es Ihnen, alle Methoden im übergeordneten Element zu kapseln Paket, indem Sie den Zeichenfolgennamen der Methode und die zusätzlichen Parameter übergeben, die diese Methode zum Aufrufen benötigt. Diese Art der Kapselung und Architektur ist Standard in der jQuery-Plug-in-Community und wird von unzähligen Plug-ins verwendet, einschließlich Plug-ins und Widgets in der jQuery-Benutzeroberfläche.

8. Ereignisse

Eine wenig bekannte Funktion der Bind-Methode ermöglicht das Binden von Ereignis-Namespaces. Wenn Ihr Plugin ein Ereignis bindet, empfiehlt es sich, diesem Ereignis einen Namensraum zuzuweisen. Auf diese Weise beeinträchtigen Sie beim Aufheben der Bindung keine anderen Ereignisse desselben Typs, die möglicherweise bereits gebunden sind. Sie können dies tun, indem Sie den Namespace über „.“ an das Ereignis anhängen, das Sie binden möchten.

Der Code lautet wie folgt:

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
update: function (content) {
//...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
$('#fun').tooltip();
//一段时间之后… …
$(‘#fun').tooltip(‘destroy');

在这个例子中，当tooltip通过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。 稍后， 当开发人员需要销毁tooltip的时候，我们可以同时解除其中reposition方法和resize事件的绑定，通过传递reposition的命名空间给插件。 这使我们能够安全地解除事件的绑定并不会影响到此插件之外的绑定。

九、数据

通常在插件开发的时候，你可能需要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此，相对于记录大量的不同名字的分离的data, 使用一个单独的对象保存所有变量，并通过一个单独的命名空间读取这个对象不失为一个更好的方法。

. 代码如下:

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $(&#39;<div />&#39;, {
text: $this.attr(&#39;title&#39;)
});
// If the plugin hasn&#39;t been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data(&#39;tooltip&#39;, {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data(&#39;tooltip&#39;);
// Namespacing FTW
$(window).unbind(&#39;.tooltip&#39;);
data.tooltip.remove();
$this.removeData(&#39;tooltip&#39;);
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
update: function (content) {
// ...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === &#39;object&#39; || !method) {
return methods.init.apply(this, arguments);
} else {
$.error(&#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39;);
}
};
})(jQuery);

将数据通过命名空间封装在一个对象中，可以更容易的从一个集中的位置读取所有插件的属性。

十、总结和最佳做法

编写jQuery插件允许你做出库，将最有用的功能集成到可重用的代码，可以节省开发者的时间，使开发更高效。 开发jQuery插件时，要牢记：

1.始终包裹在一个封闭的插件：

. 代码如下:

(function($) {
/* plugin goes here */
})(jQuery);

2.不要冗余包裹this关键字在插件的功能范围内

3.除非插件返回特定值，否则总是返回this关键字来维持chainability 。

4.传递一个可拓展的默认对象参数而不是大量的参数给插件。

5.不要在一个插件中多次命名不同方法。

3.始终命名空间的方法，事件和数据。

最后加一个自己写的放大镜的插件`

(function($){$.fn.Fdj=function(){
$('#smallImg').on('mouseover', function() {
$('#slider').show();
})
$('#smallImg').on('mouseout', function() {
$('#slider').hide();
})
$('#smallImg').on('mousemove', function(e) {
var x = e.clientX - $('#slider').width() / 2;
var y = e.clientY - $('#slider').height() / 2;
if(x <= 0) {
x = 0
}
if(x > $(&#39;#smallImg&#39;).width() - $(&#39;#slider&#39;).width()) {
x = $(&#39;#smallImg&#39;).width() - $(&#39;#slider&#39;).width();
}
if(y <= 0) {
y = 0
}
if(y > $(&#39;#smallImg&#39;).height() - $(&#39;#slider&#39;).height()) {
y = $(&#39;#smallImg&#39;).height() - $(&#39;#slider&#39;).height();
}
$(&#39;#slider&#39;).css({
&#39;left&#39;: x,
&#39;top&#39;: y
})
var X=x/$(&#39;#smallImg&#39;).width()*800
var Y=y/$(&#39;#smallImg&#39;).height()*800
$(&#39;#img&#39;).css({
left:-X,
top:-Y
})
})
}
})(jQuery)