Comment implémenter JavaScript Cascades ..?

Question

Je lis "JavaScript the Good Parts" et mentionne les cascades comme un moyen de chaînage de méthodes en JavaScript mais je ne trouve pas de code expliquant comment ces méthodes devraient être implémentées.

getElement('myBoxDiv'). 
move(350, 150). 
width(100). 
height(100). 
color('red'). 
border('10px outset'). 
padding('4px'). 
appendText("Please stand by"). 
on('mousedown', function (m) { 
    this.startDrag(m, this.getNinth(m)); 
}). 
on('mousemove', 'drag'). 
on('mouseup', 'stopDrag'). 
later(2000, function () { 
    this. 
     color('yellow'). 
     setHTML("What hath God wraught?"). 
     slide(400, 40, 200, 200); 
}). 
tip('This box is resizeable'); 

Answer 1

L'astuce est que la méthode elle-même ne doit renvoyer que this. De cette façon, chaque fois que vous enchaînez ces méthodes, l'objet lui-même est la base de l'appel. SomeObj.width (40) retournera alors seulement SomeObj, donc l'ajout de l'appel .height (50) fonctionnerait, et continuerait.

Answer 2

C'est essentiellement ainsi que fonctionne JQuery. L'idée est de faire en sorte que chacune de ces fonctions retourne des objets qui contiennent ces fonctions à nouveau pour ainsi dire.

EDIT: Vous pouvez télécharger JQuery et voir son code source, car c'est exactement ce qui se passe dans cette bibliothèque.

Answer 3

Ces méthodes renvoient toujours l'objet qu'ils appartiennent à this, .: par exemple

var txtProcesor = { 
    txt: '', 

    removeWhite: function() { 
     this.txt = this.txt.replace(/\s+/g, ''); 
     return this; 
    }, 

    evenToUp: function() { 
     var res = ""; 
     for (var i = 0; i < this.txt.length; i++) { 
      if (i % 2 == 0) res += this.txt[i].toUpperCase(); 
      else res += this.txt[i]; 
     } 
     this.txt = res; 
     return this; 
    } 
} 

txtProcesor.txt = " abc def  "; 
alert(txtProcesor.removeWhite().evenToUp().txt); 

Answer 4

Dans une cascade, on peut appeler plusieurs méthodes sur le même objet dans l'ordre dans une seule instruction. cet exemple permet d'essayer,

var Calc = function(){  
    this.result=0; 

    this.add = function(){  
    for(var x=0; x<arguments.length; x++){ 
     this.result += arguments[x]; 
    }  
    return this; 
    }; 

    this.sub = function(){ 
    for(var x=0; x<arguments.length; x++){ 
     this.result -= arguments[x]; 
    }   
    return this; 
    }; 

    this.mult = function(){ 
    if(this.result==0)this.result = 1; 
    for(var x=0; x<arguments.length; x++){ 
     this.result *= arguments[x]; 
    }   
    return this; 
    }; 

    this.div = function(){ 
    if(this.result==0) return this; 
    for(var x=0; x<arguments.length; x++){ 
     this.result /= arguments[x]; 
    }   
    return this; 
    }; 

    this.eq = function(){ 
    return this.result 
    }; 

} 

var cal1 = new Calc(); 

cal1.add(3).sub(1).add(2) // Here result = 4; 

Answer 5

Voici une démonstration combiner cascade avec rappel et l'utilisation, espérons que cela aidera.

let calNum = function(num) { 
     this.num = num; 
     this.add = function(dif, callback) { 
      this.num = this.num + dif; 
      callback(this.num); 
      return this; 
     } 
     this.sub = function(dif, callback) { 
      this.num = this.num - dif; 
      callback(this.num); 
      return this; 
     } 
     this.multi = function(m, callback) { 
      this.num = this.num * m; 
      callback(this.num); 
      return this; 
     } 

     return this; 
    }; 

calNum(3).add(3,function(result) { 
    console.log(result); 
}).multi(2, function(result) { 
    console.log(result); 
}).sub(1, function(result) { 
    console.log(result); 
}); // The final result is 11