retour au cours

Chaining

importance: 2

Il y a un objet ladder qui permet de monter et descendre :

let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // affiche l'étape en cours
    alert( this.step );
  }
};

Maintenant, si nous devons faire plusieurs appels en séquence, nous pouvons le faire comme ceci :

ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1
ladder.down();
ladder.showStep(); // 0

Modifiez le code de up et down pour rendre les appels chaînables, comme ceci :

ladder.up().up().down().showStep().down().showStep(); // shows 1 then 0

Cette approche est largement utilisée dans les bibliothèques JavaScript.

Open a sandbox with tests.

La solution consiste à renvoyer l’objet lui-même à partir de chaque appel.

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
};

ladder.up().up().down().showStep().down().showStep(); // shows 1 then 0

Nous pouvons également écrire un seul appel par ligne. Pour les longues chaînes, c’est plus lisible :

ladder
  .up()
  .up()
  .down()
  .showStep() // 1
  .down()
  .showStep(); // 0
let ladder = {
  step: 0,
  up: function() {
    this.step++;
    return this;
  },
  down: function() {
    this.step--;
    return this;
  },
  showStep: function() {
    alert(this.step);
    return this;
  }
};

Ouvrez la solution avec des tests dans une sandbox.