¿Cómo implementar JavaScript Cascades ..?

Question

Leo "JavaScript the Good Parts" y menciona las cascadas como una forma de encadenar el método en JavaScript, pero no encuentro ningún código que explique cómo deben implementarse estos métodos.

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

El truco es que el propio método sólo debe volver this. De esta forma, cada vez que encadena estos métodos, el objeto en sí es la base de la llamada.

SomeObj.width (40) devolvería solo SomeObj, por lo que agregar la llamada .height (50) funcionaría y continuaría.

Answer 2

Esta es básicamente la forma en que funciona JQuery. La idea es hacer que cada una de esas funciones devuelva objetos que contienen esas funciones nuevamente por así decirlo.

EDITAR: Puede descargar JQuery y ver el código fuente para ello, porque esto es exactamente lo que está sucediendo en esa biblioteca.

Answer 3

Estos métodos devuelven siempre el objeto al que pertenecen this, por ejemplo .:

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

En una cascada, podemos llamar a muchos métodos en el mismo objeto en secuencia en una sola sentencia. Vamos a tratar este ejemplo,

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

Aquí es una demostración combinan cascada con devolución de llamada y el uso, espero que esto ayude.

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