Maison  >  Article  >  interface Web  >  jQuery propose deux méthodes pour développer des plug-ins

jQuery propose deux méthodes pour développer des plug-ins

零下一度
零下一度original
2017-07-23 14:59:561264parcourir

jQuery propose deux méthodes pour développer des plug-ins, à savoir :

jQuery.fn.extend();

jQuery.extend();

jQuery.fn

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

Il s'avère que jQuery.fn = jQuery.prototype Oui à. prototype Ce ne sera pas inconnu.
Bien que JavaScript n'ait pas de concept clair de classes, il est plus pratique d'utiliser des classes pour le comprendre.
jQuery est une classe très bien encapsulée. Par exemple, si nous utilisons l'instruction $("#btn1″), une instance de la classe jQuery sera générée.

jQuery.extend(object)

  • Ajoutez une méthode de classe à la classe jQuery, ce qui peut être compris comme l'ajout d'une méthode statique. Par exemple :

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])
  • Étendre un objet avec un ou plusieurs autres objets et renvoyer l'objet étendu

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

L'extension de jQuery.prototype consiste à ajouter des "fonctions membres" à la classe jQuery. Les instances de la classe jQuery peuvent utiliser cette « fonction membre ».
Par exemple, nous souhaitons développer un plug-in pour créer une zone d'édition spéciale. Lorsqu'on clique dessus, le contenu de la zone d'édition actuelle sera alerté. Vous pouvez faire ceci :

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

L'appel à jQuery.extend() n'étendra pas la méthode à l'instance de l'objet. La méthode pour le référencer doit également être implémentée via la classe jQuery, par exemple. comme jQuery.init() , et l'appel de jQuery.fn.extend() étend la méthode au prototype de l'objet, donc lorsqu'un objet jQuery est instancié, il dispose de ces méthodes. Cela se reflète partout. dans jQuery.js Une chose

jQuery.fn.extend = jQuery.prototype.extend

Vous pouvez étendre un objet dans le prototype jQuery, qui est un mécanisme de plug-in.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn