Un bref guide de développement des plugins de la bibliothèque jQuery pour JavaScript_jquery

Les plug-ins jQuery sont généralement divisés en deux catégories.

1. Plug-in basé sur un sélecteur (prend en charge les opérations en chaîne)
2. Plug-in non basé sur un sélecteur (ne prend pas en charge le fonctionnement en chaîne)

J'ai brièvement appris le développement de plug-ins jQuery il y a quelque temps et j'ai développé deux plug-ins simples. Voici un bref résumé des modèles de développement des deux plug-ins.
Plugin basé sur un sélecteur

Le modèle de développement habituel est le suivant :

(function($, window, undefined) {
 $.fn.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 return this.each(function() { // 让插件支持链式操作
  // 在这里编写插件功能代码
 });
 };
})(jQuery, window);

Tout d'abord, créez une fonction anonyme auto-exécutable avec les paramètres formels $ , window et les paramètres non définis et réels jQuery et window.

Hein ? Pourquoi n’y a-t-il aucun paramètre réel correspondant transmis pour undefined ? C'est une petite astuce étant donné que le nom de variable non défini peut avoir reçu une valeur dans le code JavaScript ailleurs et avoir perdu sa vraie signification, nous ne transmettons donc tout simplement pas ce paramètre ici pour garantir qu'il se trouve dans la fonction auto-exécutable anonyme. . Vraiment indéfini.

Une fois jQuery transmis, il correspond à $. Cela garantit que le $ appelé dans le plug-in doit être jQuery et non une bibliothèque telle que Prototype.

La méthode d'appel de ce type de plug-in se présente généralement sous la forme $(selector).PluginName();.

Des exemples spécifiques peuvent être trouvés sur https://github.com/libuchao/KTwitter
Plugins non basés sur un sélecteur

Comme ce type de plug-in ne repose pas sur des sélecteurs, il n'y a pas de fonctionnement en chaîne. Le modèle général de développement est le suivant :

(function($, window, undefined) {
 $.PluginName = function(opts) {
 var defaults = {
  // 插件自定义选项的默认值
 };

 // 以用户的自定义选项覆盖默认选项
 var options = $.extend(defaults, opts || {});

 // 在这里编写插件功能代码
 };
})(jQuery, window);

La forme d'appel de ce type de plug-in est généralement $(selector).PluginName();.