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.
