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包在$號(hào)中如$(this)，因?yàn)閠his已經(jīng)是一個(gè)jQuery對(duì)象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此處callback函數(shù)中this關(guān)鍵字代表一個(gè)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元素的高度
   
這是一個(gè)簡(jiǎn)單的插件，利用.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) {
//創(chuàng)建一些默認(rèn)值，拓展任何被提供的選項(xiàng)
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) {
// 方法調(diào)用
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);
//調(diào)用init方法
$('div').tooltip();
//調(diào)用init方法
$('div').tooltip({
foo: 'bar'
});
// 調(diào)用hide方法
$(‘div').tooltip(‘hide');
//調(diào)用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();
//一段時(shí)間之后… …
$(‘#fun').tooltip(‘destroy');

在這個(gè)例子中，當(dāng)tooltip通過init方法初始化時(shí)，它將reposition方法綁定到resize事件并給reposition非那方法賦予命名空間通過追加.tooltip。 稍后， 當(dāng)開發(fā)人員需要銷毀tooltip的時(shí)候，我們可以同時(shí)解除其中reposition方法和resize事件的綁定，通過傳遞reposition的命名空間給插件。 這使我們能夠安全地解除事件的綁定并不會(huì)影響到此插件之外的綁定。

九、數(shù)據(jù)

通常在插件開發(fā)的時(shí)候，你可能需要記錄或者檢查你的插件是否已經(jīng)被初始化給了一個(gè)元素。 使用jQuery的data方法是一個(gè)很好的基于元素的記錄變量的途徑。盡管如此，相對(duì)于記錄大量的不同名字的分離的data, 使用一個(gè)單獨(dú)的對(duì)象保存所有變量，并通過一個(gè)單獨(dú)的命名空間讀取這個(gè)對(duì)象不失為一個(gè)更好的方法。

. 代碼如下:

(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);

將數(shù)據(jù)通過命名空間封裝在一個(gè)對(duì)象中，可以更容易的從一個(gè)集中的位置讀取所有插件的屬性。

十、總結(jié)和最佳做法

編寫jQuery插件允許你做出庫，將最有用的功能集成到可重用的代碼，可以節(jié)省開發(fā)者的時(shí)間，使開發(fā)更高效。 開發(fā)jQuery插件時(shí)，要牢記：

1.始終包裹在一個(gè)封閉的插件：

. 代碼如下:

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

2.不要冗余包裹this關(guān)鍵字在插件的功能范圍內(nèi)

3.除非插件返回特定值，否則總是返回this關(guān)鍵字來維持chainability 。

4.傳遞一個(gè)可拓展的默認(rèn)對(duì)象參數(shù)而不是大量的參數(shù)給插件。

5.不要在一個(gè)插件中多次命名不同方法。

3.始終命名空間的方法，事件和數(shù)據(jù)。

最后加一個(gè)自己寫的放大鏡的插件`

(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)

? ?