Appel de chaîne JS (avec code)

Cette fois, je vous présente l'appel en chaîne JS (avec code). Quelles sont les précautions lors de l'utilisation de l'appel en chaîne JS Voici un cas pratique, jetons un coup d'œil.

Quiconque a écrit jquery sait peut-être que le code suivant peut être facilement utilisé dans jquery :

// 不使用链式调用
const element = $(ele);
element.addClass('red');
element.removeClass('green');
element.show();
// 链式调用
$(ele)
 .addClass('red')
 .removeClass('green')
 .show();

La méthode d'appel de jquery est un appel en chaîne. Nous pouvons voir à partir du code ci-dessus que si nous n'utilisons pas d'appels en chaîne, nous ajouterons beaucoup de code répété, ce qui est particulièrement redondant. En enchaînant les appels, nous pouvons économiser beaucoup de code et le code semble plus élégant et plus soigné. Voyons ensuite comment implémenter une bibliothèque prenant en charge les appels en chaîne.

Tous ceux qui connaissent la chaîne de prototypes savent que l'instance générée par le constructeur peut accéder aux propriétés et méthodes de son objet prototype. Par conséquent, nous laissons la définition dans l'objet prototype. La méthode renvoie finalement ceci (l'instance dans laquelle la méthode est appelée) et la méthode prototype peut être appelée dans une chaîne.

// 通过立即执行函数，声明了一个_$函数，并且将一个$函数挂载到window上，并且每次调用$()的时候，返回的其实是个_$实例，由于原型对象方法里，执行最后都会返回一个this,因此就可以执行链式调用。
(function () {
 // 构造函数
 function _$(selector) {
  // ...
 }
 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  removeClass: function (className) {
   // ...
   return this;
  },
  show: function () {
   // ...
   return this;
  }
 };
 _$.prototype.constructor = _$;
 // 每次调用$()的时候，返回的其实是个_$实例
 window.$ = function () {
  return new _$(arguments);
 }
})();
// 通过这种方式，我们就可以直接使用$的链式调用
$(ele)
 .addClass('red')
 .removeClass('green')
 .show();

Bien sûr, le code ci-dessus peut en fait être optimisé, car en supposant que quelqu'un ait déjà défini la fonction $ dans la bibliothèque que vous avez introduite, vous serez alors confronté au problème des conflits de noms. Nous pouvons donc ajouter un installateur pour cela

(function () {
 // 构造函数
 function _$(selector) {
  // ...
 }
 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  removeClass: function (className) {
   // ...
   return this;
  },
  show: function () {
   // ...
   return this;
  }
 };
 _$.prototype.constructor = _$;
 // 增加一个安装器
 window.installHelper = function (scope, interface) {
  scope[interface] = function () {
   return new _$(arguments);
  }
 }
})();
// 而用户就可以这样使用它来自定义挂载对象以及其命名
installHelper(window, '$');
$(ele).show();

Bien sûr, parfois enchaîner les appels n'est pas une bonne idée. Les appels chaînés conviennent aux méthodes assignatrices, mais ne sont pas très conviviaux pour les méthodes getter. Parce que parfois, nous voulons que la méthode renvoie certaines données au lieu de les renvoyer. Pour cette situation, il existe deux solutions principales. La première consiste à ne pas renvoyer ceci pour la méthode de lecture de valeur, mais à renvoyer directement les données. L'autre méthode consiste à traiter les données via des méthodes de rappel :

// 第一种方法，当遇到取值器，则直接返回数据
(function () {
 // 构造函数
 function _$(selector) {
  this.ele = document.querySelector(selector);
  // ...
 }
 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  // 取值器
  getClass: function () {
   // ...
   return this.ele.className;
  }
 };
 _$.prototype.constructor = _$;
})();
// 第二种方式，通过回调的方式来处理数据
(function () {
 // 构造函数
 function _$(selector) {
  this.ele = document.querySelector(selector);
  // ...
 }
 _$.prototype = {
  addClass: function (className) {
   // ...
   return this;
  },
  getClass: function (cb) {
   // ...
   cb.call(this, this.ele.className);
   return this;
  }
 };
 _$.prototype.constructor = _$;
})();

Grâce à des appels en chaîne, nous pouvons simplifier notre code et le rendre plus concis et plus facile à lire. Et il nous suffit de faire en sorte que toutes les méthodes de la classe renvoient cette valeur, afin que la classe puisse être transformée en une classe prenant en charge les appels de chaîne de méthodes. Et si vous souhaitez que la méthode valuer prenne également en charge les appels chaînés, vous pouvez utiliser des rappels dans le valuer pour résoudre ce problème.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment résoudre l'erreur de configuration du chemin du fichier d'emballage

Comment lier les touches de direction pour contrôler le mouvement des div

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!