jQuery Girl
  1. jQuery Girl
  3. jQuery fn.extend ({bla: function () {}} contre jQuery.fn.bla
Intereting Posts
Pourquoi jquery .val () ne modifie-t-il l’atsortingbut value que pour les champs d’entrée masqués? faire bouger une image à l’intérieur d’une div au hasard animer gauche ne fonctionne pas sur le défilement de page Google Chart ne s’affiche pas Télécharger l’image de la canvas à la volée Comment charger du Javascript supplémentaire dans le traitement Datatable Server? Cannot DeterminedVisibility () n’a jamais vu de connexion pour PID Imprimer tous les tabs sur une page Web Fermez le mode d’amorçage sans utiliser les fonctions «masquer» et «supprimer les données» Passer un object défini par l’utilisateur à la méthode Web ASP.NET à partir de jQuery, à l’aide de JSON Comment limiter l’utilisateur à la saisie de données à l’aide de datetimepicker et désactiver la saisie manuelle? jQuery obtient la hauteur d’une image sensible jQuery trouver le type d’entrée (mais aussi pour select) Transitions CSS3 dans jQuery .css () jQuery Raty et AngularJS

jQuery fn.extend ({bla: function () {}} contre jQuery.fn.bla

OK, je pense avoir la différence entre jQuery.extend et jQuery.fn.extend?

en ce que l’extension générale peut étendre n’importe quel object, et que fn.extend est destiné aux fonctions de plug-in pouvant être invoquées directement à partir de l’object jQuery avec un object jQuery voodoo interne.

Il semble donc qu’on pourrait les invoquer différemment. Si vous utilisez general etend pour étendre l’object obj en ajoutant la fonction y, la méthode s’attacherait à cet object, obj.y (), mais si vous utilisez fn.extend, ils sont directement attachés à l’object jQuery $ .y (). … Ai-je bien répondu oui ou non et si non, qu’est-ce que je ne comprends pas bien?

Maintenant ma question:

Le livre que je lis préconise 

jQuery.fn.extend({ a: function() { }, b: function() { } });

la syntaxe, mais dans la documentation, il est dit 

 jQuery.fn.a = function() { };

et je suppose que si vous vouliez b aussi bien ce serait 

 jQuery.fn.b = function() { };

Sont-ils équivalents sur le plan fonctionnel et en termes de performances et, si non, quelle est la différence?

Merci beaucoup. Je creuse jQuery!

Il y a une différence très subtile entre eux. Performance sage (pas que ce soit un problème), jQuery.fn.extend va être plus lent que de déclarer directement une fonction comme jQuery.fn.foo = function(){ }; . Je parle de différence complètement négligeable .

La différence est que jQuery.fn.extend() vous permet d’append plusieurs fonctions de plug-in simultanément et peut donner à votre code un aspect plus net, en fonction du type de plug-in que vous créez. 

 jQuery.fn.a = function(){}; jQuery.fn.b = function(){};

Est exactement la même chose que 

 jQuery.fn.extend({ a: function(){ }, b: function(){ } });

Les deux voies sont presque identiques. Cependant, il existe quelques petites différences dans les aspects suivants:

  1. La vitesse
  2. Style de code
  3. Nommer votre plugin ailleurs

Vitesse :

Négligeable. Vous pouvez ignorer cet aspect car il est peu probable que vous remarquiez des différences de performances entre les deux.

Style de code :

la version extend adhère au style de code littéral Object, qui peut sembler un peu plus élégant pour certains. Par exemple, si votre plug-in utilise abondamment le littéral Object, vous pouvez préférer l’encapsuler à l’aide de $ .extend ({}).

Nommer votre plugin ailleurs :

Il existe un autre avantage (significatif, à mon avis) dans l’utilisation du style $ .fn.a – vous pouvez stocker le nom de votre plugin ailleurs, n’importe où dans votre code, puis utiliser sa référence lors de l’ajout du plugin à l’espace de nommage de jQuery. Cela ne peut pas être fait lors de l’extension avec un littéral d’object. Cet avantage est quelque peu relatif à la longueur de votre code et au nombre d’occurrences du nom du plugin. On pourrait également soutenir que le codeur moyen modifie rarement le nom de son plugin, et s’il le fait, cela ne prendra pas longtemps dans la plupart des cas.

Exemple : 

 ;(function($) { // Declare your plugin's name here var PLUGIN_NS = 'myPluginName'; // ... some arbitrary code here ... // The jQuery plugin hook $.fn[ PLUGIN_NS ] = function( args ) { if ( $.type(args) !== 'object' ) var args = {}; var options = $.extend({}, $.fn[ PLUGIN_NS ].defaults, args); // iterate over each matching element return this.each({ var obj = $(this); // we can still use PLUGIN_NS inside the plugin obj.data( PLUGIN_NS+'Data' , args ); // ... rest of plugin code ... }); }; // ---------------- // PRIVATE defaults // ---------------- var defaults = { foo: 1, bar: "bar" }; // ------------------------------------------------------------ // PUBLIC defaults // returns a copy of private defaults. // public methods cannot change the private defaults var. // ------------------------------------------------------------ // we can use PLUGIN_NS outside the plugin too. $.fn[ PLUGIN_NS ].defaults = function() { return $.extend({}, defaults); }; })(jQuery);

Maintenant, nous pouvons appeler le plugin, et les valeurs par défaut, comme ceci: 

 $("div#myDiv").myPluginName({foo:2}); var originalFoo = $("div#myDiv").myPluginName.defaults().foo;

Pour changer le nom du plugin, changez la variable PLUGIN_NS . Cela peut être préférable à la modification de chaque occurrence de myPluginName dans le code du plugin.