Si vous ne définissez pas le plug-in JQuery, ne dites pas que vous connaissez JQuery_jquery

1. Introduction

Certains développeurs WEB citeront une bibliothèque de classes JQuery, puis écriront ("#"), ("#"), ("".") sur la page web. Après l'avoir écrite pendant quelques années, ils le diront aux autres. qu'ils le connaissent très bien. J'étais une telle personne, mais ce n'est que lors d'un échange technique au sein de l'entreprise que j'ai changé ma vision de moi-même.

2. Vulgariser les connaissances JQuery

Connaissance 1 : Lors de l'écriture de plug-ins avec JQuery, les deux méthodes principales sont les suivantes :

$.extend(object) peut être compris comme l'ajout d'une méthode statique à JQuery.

$.fn.extend(object) peut être compris comme l'ajout d'une méthode à l'instance JQuery.

Définition de base et appel :

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("执行方法一"); } });
$.fun1();
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("执行方法三"); }
$(this).fun3();

Connaissance 2 : La différence entre jQuery(function () { }); et (function ($) { })(jQuery);:

jQuery(function () { });
//相当于
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);

jQuery(function () { }); est le code dans la méthode d'exécution après le chargement d'un élément DOM.

(function ($) { })(jQuery); définit une fonction anonyme, où jQuery représente les paramètres réels de cette fonction anonyme. Habituellement utilisé dans le développement de plug-in JQuery, il joue le rôle de définir le domaine privé du plug-in.

3. Développer la structure standard du plug-in JQuery

1. Définir la portée : Pour définir un plug-in JQuery, vous devez d'abord placer le code du plug-in dans un endroit exempt d'interférences externes. Pour le dire en termes plus professionnels, vous devez définir une portée privée pour ce plug-in. Le code externe ne peut pas accéder directement au code contenu dans le plug-in. Le code à l'intérieur du plug-in ne pollue pas les variables globales. Dans une certaine mesure, cela dissocie la dépendance entre les plug-ins et l'environnement d'exécution. Cela dit, comment définir la portée privée d’un plug-in ?

//step01 定义JQuery的作用域
(function ($) {

})(jQuery);

Ne sous-estimez pas cette portée, elle est aussi importante que le mot-clé class dans la définition d'une classe en C#.

2. Étendre un plug-in pour JQuery : après avoir défini la portée de JQuery, l'étape principale et la plus urgente consiste à ajouter une méthode d'extension à cette instance JQuery. Tout d'abord, nous nommons une méthode pour ce plug-in Jqury, appelée easySlider. Lors de l'appel de ce plug-in, nous pouvons transmettre certains paramètres à ce plug-in via des options. Pour la méthode de définition spécifique, voir le code suivant :

//step01 定义JQuery的作用域
(function ($) {
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  
 }
})(jQuery);

Jusqu'à présent, l'un des plug-ins JQuery les plus simples a été réalisé. Lorsque vous appelez, vous pouvez ("#domName").easySlider({}), ou ("#domName").easySlider({}), ou ("".domName").easySlider({}) ou plusieurs façons de le faire il appelle ce plugin.

3. Définir la valeur par défaut : définissez un plug-in JQuery, tout comme définir un contrôle .net. Un plug-in parfait doit avoir des propriétés relativement flexibles. Regardons ce code : 723311781eae29eb2dc08d61f865b9065149ea95ee12bbe752151d007a26c100. Le contrôle TextBox possède des propriétés de largeur et de hauteur. Lors de l'utilisation de TextBox, l'utilisateur peut définir librement la hauteur et la largeur du contrôle, ou ne pas définir de valeur, car le contrôle lui-même a une valeur par défaut. Lors de la préparation du développement d'un plug-in JQuery, lorsque l'utilisateur ne spécifie pas d'attribut, il doit y avoir une valeur par défaut. Dans JQuery, une telle définition peut être implémentée en deux étapes, voir le code suivant step03-a, step03-b. .

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
 }
})(jQuery);

Les programmeurs aiment innover, comme changer les noms de variables, changer de lignes, etc. Quand j'ai vu var defaults = {} utilisé pour représenter un attribut par défaut, j'ai pensé à être différent lorsque j'ai écrit le plug-in JQuery, j'ai donc utilisé var default01 ={} et var default02 ={} pour représenter l'attribut par défaut. Ensuite, les noms d'attributs par défaut sont de toutes sortes et empirent. Par conséquent, il est recommandé lors de l'écriture d'un plug-in JQuery, lors de la définition des propriétés par défaut, d'utiliser la variable par défaut pour représenter les propriétés par défaut. Un tel code est plus lisible.

Quelqu'un a vu cette ligne de code : var options = $.extend(defaults, options) et a froncé les sourcils, exprimant sa confusion. Alors regardons d’abord le code suivant :

var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };

var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);

Copiez le code dans l'environnement de développement, regardez les valeurs de a, b, c et d respectivement, et vous comprendrez la signification de var options = $.extend(defaults, options). Indique que les options remplacent la valeur par défaut et attribuent la valeur aux options.
Dans l'environnement du plug-in, cela signifie que la valeur définie par l'utilisateur remplace la valeur par défaut du plug-in ; si l'utilisateur ne définit pas l'attribut avec une valeur par défaut, la valeur par défaut du plug-in est toujours conservée ; .

4. Support du sélecteur JQuery : Le sélecteur JQuery est une excellente fonctionnalité de JQuery Si notre plug-in est écrit pour ne pas supporter le sélecteur JQuery, c'est en effet un gros regret. Afin que notre plug-in JQuery prenne en charge plusieurs sélecteurs, notre code doit être défini comme ceci :

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  this.each(function () {

  });
 }
})(jQuery);

5. Prise en charge des appels de lien JQuery : le code ci-dessus semble parfait, mais en fait il n'est pas si parfait. Les appels de lien ne sont pas pris en charge jusqu'à présent. Afin d'obtenir l'effet d'appel de lien, chaque élément de la boucle doit être renvoyé

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  //step5 支持链式调用
  return this.each(function () {

  });
 }
})(jQuery);

这样的定义才能支持链接调用。比如支持这样的调用：$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });

6、插件里的方法：往往实现一个插件的功能需要大量的代码，有可能上百行，上千行，甚至上万行。我们把这代码结构化，还得借助function。在第一点已经说了，在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。现在就尝试着怎么样在插件里定义一些方法：

//step01 定义JQuery的作用域
(function ($) {
 //step03-a 插件的默认值属性
 var defaults = {
  prevId: 'prevBtn',
  prevText: 'Previous',
  nextId: 'nextBtn',
  nextText: 'Next'
  //……
 };
 //step06-a 在插件里定义方法
 var showLink = function (obj) {
  $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
 }

 //step02 插件的扩展方法名称
 $.fn.easySlider = function (options) {
  //step03-b 合并用户自定义属性，默认属性
  var options = $.extend(defaults, options);
  //step4 支持JQuery选择器
  //step5 支持链式调用
  return this.each(function () {
   //step06-b 在插件里定义方法
   showLink(this);
  });
 }
})(jQuery);

步骤step06-a：在插件里定义了一个方法叫showLink(); 这个方法在插件外是不能直接调用的，有点像C#类里的一个私有方法，只能满足插件内部的使用。步骤step06-b演示了怎样调用插件内部的方法。

四、总结

开发只要形成了标准，然后再去阅读别人的代码就没有那么吃力了。