Heim > Web-Frontend > js-Tutorial > jQuery bietet zwei Methoden zum Entwickeln von Plug-Ins

jQuery bietet zwei Methoden zum Entwickeln von Plug-Ins

零下一度
Freigeben: 2017-07-23 14:59:56
Original
1326 Leute haben es durchsucht

jQuery bietet zwei Methoden zum Entwickeln von Plug-Ins, nämlich:

jQuery.fn.extend();

jQuery.extend();
Nach dem Login kopieren

jQuery.fn

jQuery.fn = jQuery.prototype = {init: function( selector, context ) {//….//……};
Nach dem Login kopieren

Es stellt sich heraus, dass jQuery.fn = jQuery.prototype ist Prototyp Es wird nicht unbekannt sein.
Obwohl JavaScript kein klares Klassenkonzept hat, ist es bequemer, Klassen zu verwenden, um es zu verstehen.
jQuery ist eine sehr gut gekapselte Klasse. Wenn wir beispielsweise die Anweisung $(“#btn1″) verwenden, wird eine Instanz der jQuery-Klasse generiert.

jQuery.extend(object)

  • Fügen Sie der jQuery-Klasse eine Klassenmethode hinzu, was als Hinzufügen einer statischen Methode verstanden werden kann. Zum Beispiel:

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5
Objectj Query.extend( target, object1, [objectN])
Nach dem Login kopieren
  • Erweitern Sie ein Objekt mit einem oder mehreren anderen Objekten und geben Sie das erweiterte Objekt zurück

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options); //结果:settings == { validate: true, limit: 5, name: "bar" }
jQuery.fn.extend(object);
Nach dem Login kopieren

Die Erweiterung von jQuery.prototype besteht darin, der jQuery-Klasse „Mitgliedsfunktionen“ hinzuzufügen. Instanzen der jQuery-Klasse können diese „Member-Funktion“ verwenden.
Zum Beispiel möchten wir ein Plug-in entwickeln, um ein spezielles Bearbeitungsfeld zu erstellen. Wenn darauf geklickt wird, wird der Inhalt des aktuellen Bearbeitungsfelds benachrichtigt. Sie können dies tun:

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 页面上为:    
$("#input1") //为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
Nach dem Login kopieren

Der Aufruf von jQuery.extend() erweitert die Methode nicht auf die Instanz des Objekts. Die Methode, um darauf zu verweisen, muss auch über die jQuery-Klasse implementiert werden, z B. jQuery.init(), und der Aufruf von jQuery.fn.extend() erweitert die Methode auf den Prototyp des Objekts. Wenn ein jQuery-Objekt instanziiert wird, ist dies sehr wichtig in jQuery.js Eine Sache

jQuery.fn.extend = jQuery.prototype.extend
Nach dem Login kopieren

Sie können ein Objekt in den jQuery-Prototyp erweitern, bei dem es sich um einen Plug-In-Mechanismus handelt.

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonjQuery bietet zwei Methoden zum Entwickeln von Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage