Detaillierte Erläuterung der Entwicklungsmethoden für jQuery-Plug-Ins

jQuery-Plug-in-Entwicklung

Im Allgemeinen ist die Entwicklung von jQuery-Plug-ins in zwei Typen unterteilt: Der eine ist eine globale Funktion, die im jQuery-Namespace hängt und auch als statische Methode bezeichnet werden kann. Das andere sind jQuery-Methoden auf Objektebene, also Methoden, die unter dem jQuery-Prototyp hängen, sodass über den Selektor erhaltene jQuery-Objektinstanzen diese Methode ebenfalls gemeinsam nutzen können.

1. jQuery-Erweiterung

1. $.extend(object)

Ähnlich der .Net-Erweiterungsmethode, die zum Erweitern von jQuery verwendet wird. Dann können Sie es mit $ aufrufen.

$(function(){
$.extend({ fun1: function () { alert("为jQuery扩展一个fun1函数!"); } });
$.fun1();
})

2. $.fn.extend(object)

jQuery-Objekt erweitern.

$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$("#id1").fun2();

Sie können Google verwenden, um zu sehen:

Die obige Schreibweise entspricht:

$.fn.fun2 = function () { alert("执行方法2"); }
$(this).fun2();

2. Private Domain

Sie ist wie folgt definiert:

(function ($) { })(jQuery);
//相当于
var fn = function (xxoo) { };
fn(jQuery);

Der folgende Code erscheint 123.

$(function(){
var fn = function (xxoo) { };
fn(alert(123));
})

3. Grundlegende Schritte zum Definieren eines Plug-Ins

1. Definieren Sie den Umfang

Entwickeln Sie ein jQuery-Plug-in: Zunächst muss der Plug-in-Code von der Außenwelt isoliert werden. Externer Code darf nicht direkt auf den Code im Plug-in zugreifen, und der Code im Plug-in hat keinen Einfluss auf den Code Außenwelt.

//Schritt 1 Definieren Sie den privaten Bereich des Plug-Ins

(function ($) {
 
})(jQuery);

Dadurch wird sichergestellt, dass der Code im Plug-In vorhanden ist isoliert von der Außenwelt.

2. jQuery erweitern

Nachdem Sie den Bereich definiert haben, müssen Sie das Plug-in auf jQuery erweitern, um externe Aufrufe zu ermöglichen.

//步骤1 定义私有作用域
 (function ($) {
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
   
 }
 })(jQuery);

3. Standardwert

Wenn Sie nach der Definition des jQuery-Plug-Ins möchten, dass einige Parameter Standardwerte haben, können Sie Folgendes tun kann auf diese Weise angegeben werden.

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
  Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
  //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults)
  var options = $.extend(defaults, options);
 }
 })(jQuery);

4. Unterstützen Sie den jQuery-Selektor

//步骤1 定义私有作用域
(function ($) {
//步骤3 插件的默认值属性
var defaults = {
 Id: '#id1',
};
//步骤2 插件的扩展方法名称
$.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults)
 var options = $.extend(defaults, options);
}
//步骤4 支持jQuery选择器
this.each(function () {
 
});
})(jQuery);

5. Unterstützen Sie den Kettenaufruf von jQuery

//步骤1 定义私有作用域
 (function ($) {
 //步骤3 插件的默认值属性
 var defaults = {
  Id: '#id1',
 };
 //步骤2 插件的扩展方法名称
 $.fn.MyFrame = function (options) {
  //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults)
  var options = $.extend(defaults, options);
 }
 //步骤4 支持jQuery选择器
 //步骤5 支持链式调用(将步骤4返回)
 return this.each(function () {
 
 });
 })(jQuery);

6. Plug-in-interne Methoden

//步骤1 定义私有作用域
(function ($) {
//步骤3 插件的默认值属性
var defaults = {
 Id: '#id1',
};
 
//步骤6 在插件里定义函数
var MyFun = function (obj) {
 alert(obj);
}
 
//步骤2 插件的扩展方法名称
$.fn.MyFrame = function (options) {
 //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults)
 var options = $.extend(defaults, options);
}
//步骤4 支持jQuery选择器
//步骤5 支持链式调用(将步骤4返回)
return this.each(function () {
 //步骤6 在插件里定义函数
 MyFun(this);
});
})(jQuery);

Aufgrund der Bereichsbeziehung ist die private Funktion in Schritt 6 darf derzeit vom Plug-in intern verwendet werden.