jQuery definiert die Plug-in-Methode_jquery

Einige WEB-Entwickler verweisen auf eine JQuery-Klassenbibliothek und schreiben dann $("#"), $(".") auf die Webseite. Nach einigen Jahren des Schreibens werden sie anderen mitteilen, dass sie sehr vertraut sind mit JQuery. 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.

Beim Erweitern von jquery. Die Kernmethoden sind die folgenden zwei:

$.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

$.extend(object)

Beispiel:

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

Definieren Sie die Grundstruktur des JQuery-Plug-Ins

1． Geltungsbereich definieren:

Definieren Sie einen privaten Bereich für das Plugin. Externer Code kann nicht direkt auf das Innere des Plug-Ins zugreifen. Der interne Code des Plug-Ins unterliegt keinen externen Eingriffen und verschmutzt auch keine globalen Variablen.

  //step 定义JQuery的作用域
(function ($) {
})(jQuery);

2. Erweiterungsmethoden zum Plug-in hinzufügen:

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

3. Standardwert festlegen:

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

Unter ihnen: var options = $.extend(defaults, options) bedeutet. 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ützen Sie den JQuery-Selektor:

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

5. Unterstützen Sie den JQuery-Linkaufruf:

Um den Effekt eines Linkaufrufs zu erzielen, muss jedes Element der Schleife zurückgegeben werden

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

6. Methoden im Plug-in:

Die im Plug-in definierten Methoden können nicht direkt von der Außenwelt aufgerufen werden. Die von mir im Plug-in definierten Methoden belasten die externe Umgebung nicht.

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

Der obige Inhalt führt Sie in die Methode zum Definieren von Plug-Ins mit jQuery ein. Ich hoffe, es gefällt Ihnen.