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

jQuery bietet zwei Methoden zum Entwickeln von Plug-Ins

零下一度
零下一度Original
2017-07-23 14:59:561329Durchsuche

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

jQuery.fn.extend();

jQuery.extend();

jQuery.fn

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

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])
  • 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);

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后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

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

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

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!

Stellungnahme:
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