Definieren Sie nicht das JQuery-Plug-in und sagen Sie nicht, dass Sie JQuery

1. Einleitung

Einige WEB-Entwickler verweisen auf eine JQuery-Klassenbibliothek und schreiben dann ("#"), ("#"), (".") auf die Webseite, nachdem sie einige Jahre lang geschrieben haben Sie sind damit sehr vertraut. Früher war ich so ein Mensch, aber erst ein technischer Austausch im Unternehmen hat dazu geführt, dass ich meine Sicht auf mich selbst geändert habe.

2. JQuery-Wissen bekannt machen

Wissen 1: Beim Schreiben von Plug-Ins mit JQuery sind die beiden Kernmethoden wie folgt:

$.extend(object) kann als Hinzufügen einer statischen Methode zu JQuery verstanden werden.

$.fn.extend(object) kann als Hinzufügen einer Methode zur JQuery-Instanz verstanden werden.

Grundlegende Definition und Aufruf:

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("执行方法一"); } });
$.fun1();
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("执行方法三"); }
$(this).fun3();

Nach dem Login kopieren

Wissen 2: Der Unterschied zwischen jQuery(function () { }); und (function ($) { })(jQuery);:

jQuery(function () { });
//相当于
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);

Nach dem Login kopieren

jQuery(function () { }); ist der Code in der Ausführungsmethode, nachdem ein DOM-Element geladen wurde.

(function ($) { })(jQuery); definiert eine anonyme Funktion, wobei jQuery die tatsächlichen Parameter dieser anonymen Funktion darstellt. Es wird normalerweise bei der Entwicklung von JQuery-Plug-Ins verwendet und dient dazu, die private Domäne des Plug-Ins zu definieren.

3. Entwickeln Sie die Standardstruktur des JQuery-Plugins

1. Definieren Sie den Bereich: Um ein JQuery-Plug-in zu definieren, müssen Sie zunächst den Code des Plug-ins an einem Ort platzieren, der frei von externen Störungen ist. Um es professioneller auszudrücken: Sie müssen einen privaten Bereich für dieses Plug-in definieren. Externer Code kann nicht direkt auf den Code im Plug-in zugreifen. Der Code im Plug-in verschmutzt keine globalen Variablen. Es entkoppelt gewissermaßen die Abhängigkeit zwischen Plug-Ins und der laufenden Umgebung. Abgesehen davon: Wie definieren Sie den privaten Bereich eines Plug-Ins?

//step01 定义JQuery的作用域
(function ($) {

})(jQuery);

Nach dem Login kopieren

Unterschätzen Sie diesen Umfang nicht, er ist genauso wichtig wie das Schlüsselwort „class“ bei der Definition einer Klasse in C#.

2. Erweitern Sie ein Plug-in für JQuery: Nachdem Sie den Umfang von JQuery definiert haben, besteht der wichtigste und dringendste Schritt darin, dieser JQuery-Instanz eine Erweiterungsmethode hinzuzufügen. Zuerst benennen wir eine Methode für dieses Jqury-Plug-in namens easySlider. Beim Aufruf dieses Plug-ins können wir über Optionen einige Parameter an dieses Plug-in übergeben. Informationen zur spezifischen Definitionsmethode finden Sie im folgenden Code:

//step01 定义JQuery的作用域
(function ($) {
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  
 }
})(jQuery);

Nach dem Login kopieren

Bisher wurde eines der einfachsten JQuery-Plug-Ins fertiggestellt. Beim Aufruf können Sie Folgendes tun: ("#domName").easySlider({}), oder ("#domName").easySlider({}), oder ("".domName").easySlider({}) oder mehr it Rufen Sie dieses Plugin auf.

3. Standardwert festlegen: Definieren Sie ein JQuery-Plug-in, genau wie die Definition eines .net-Steuerelements. Ein perfektes Plug-In sollte relativ flexible Eigenschaften haben. Schauen wir uns diesen Code an: . Das TextBox-Steuerelement verfügt über die Eigenschaften „Width“ und „Height“. Bei Verwendung von TextBox kann der Benutzer die Höhe und Breite des Steuerelements frei festlegen oder keinen Wert festlegen, da das Steuerelement selbst einen Standardwert hat. Wenn der Benutzer bei der Vorbereitung der Entwicklung eines JQuery-Plug-Ins kein Attribut angibt, sollte es einen Standardwert geben. In JQuery kann eine solche Definition in zwei Schritten implementiert werden, siehe den folgenden Code Schritt03-a, Schritt03-b .

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
 }
})(jQuery);

Nach dem Login kopieren

Programmierer mögen Innovationen, wie z. B. das Ändern von Variablennamen, das Ändern von Zeilen usw. Als ich sah, dass var defaults = {} zur Darstellung eines Standardattributs verwendet wurde, dachte ich beim Schreiben des JQuery-Plug-ins darüber nach, anders zu sein, also habe ich var default01 = {} und var default02 = {} verwendet, um das Standardattribut darzustellen. Dann sind die Standardattributnamen aller Art und werden immer schlimmer. Daher wird empfohlen, beim Schreiben eines JQuery-Plug-Ins beim Definieren von Standardeigenschaften die Standardvariable zu verwenden, um die Standardeigenschaften darzustellen. Ein solcher Code ist besser lesbar.

Jemand sah diese Codezeile: var options = $.extend(defaults, options) und runzelte die Stirn, um Verwirrung auszudrücken. Dann schauen wir uns zunächst den folgenden Code an:

var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };

var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);

Nach dem Login kopieren

Kopieren Sie den Code in die Entwicklungsumgebung, sehen Sie sich die Werte von a, b, c bzw. d an und Sie werden die Bedeutung von var options = $.extend(defaults, options) verstehen. Gibt an, dass Optionen den Wert der Standardwerte überschreiben und den Wert Optionen zuweisen.
In der Plug-In-Umgebung bedeutet dies, dass der vom Benutzer festgelegte Wert den Standardwert des Plug-Ins überschreibt. Wenn der Benutzer das Attribut nicht mit einem Standardwert festlegt, bleibt der Standardwert des Plug-Ins erhalten .

4. Unterstützung des JQuery-Selektors: Der JQuery-Selektor ist eine hervorragende Funktion von JQuery. Wenn unser Plug-in so geschrieben ist, dass er den JQuery-Selektor nicht unterstützt, ist das in der Tat ein großes Bedauern. Damit unser JQuery-Plug-in mehrere Selektoren unterstützt, sollte unser Code wie folgt definiert sein:

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  this.each(function () {

  });
 }
})(jQuery);

Nach dem Login kopieren

5. JQuery-Linkaufruf unterstützen: Der obige Code scheint perfekt zu sein, ist aber tatsächlich nicht so perfekt. Linkaufrufe werden bisher nicht unterstützt. Um den Effekt eines Linkaufrufs zu erzielen, muss jedes Element der Schleife zurückgegeben werden

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  //step5 支持链式调用
  return this.each(function () {

  });
 }
})(jQuery);

Nach dem Login kopieren

这样的定义才能支持链接调用。比如支持这样的调用：$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });

6、插件里的方法：往往实现一个插件的功能需要大量的代码，有可能上百行，上千行，甚至上万行。我们把这代码结构化，还得借助function。在第一点已经说了，在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。现在就尝试着怎么样在插件里定义一些方法：

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step06-a 在插件里定义方法
 var showLink = function (obj) {
  $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
 }

 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  //step5 支持链式调用
  return this.each(function () {
   //step06-b 在插件里定义方法
   showLink(this);
  });
 }
})(jQuery);

Nach dem Login kopieren

步骤step06-a：在插件里定义了一个方法叫showLink(); 这个方法在插件外是不能直接调用的，有点像C#类里的一个私有方法，只能满足插件内部的使用。步骤step06-b演示了怎样调用插件内部的方法。

四、总结

开发只要形成了标准，然后再去阅读别人的代码就没有那么吃力了。