Jak zaimplementować kaskadę JavaScript ..?

Question

Czytam "JavaScript dobre części" i wspomina kaskady jako sposób na łańcuchowe metody w JavaScript, ale nie mogę znaleźć żadnego kodu, który wyjaśnia, w jaki sposób te metody powinny zostać zaimplementowane.

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

Sztuką jest to, że sama metoda powinna zwracać tylko this. W ten sposób za każdym razem, gdy łączysz te metody ze sobą, sam obiekt jest podstawą połączenia.

SomeObj.width (40) następnie zwraca tylko SomeObj, więc dodanie wywołania .height (50) będzie działać i kontynuować.

Answer 2

Jest to zasadniczo sposób działania JQuery. Chodzi o to, aby każda z tych funkcji zwróciła obiekty, które zawierają te funkcje, by tak rzec.

EDYCJA: Możesz pobrać JQuery i spojrzeć na kod źródłowy, ponieważ jest to dokładnie to, co dzieje się w tej bibliotece.

Answer 3

Te metody zawsze zwraca obiekt do której należą this, np .:

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

w kaskadzie, możemy wywołać wiele metod na tym samym obiekcie w sekwencji w pojedynczym sprawozdaniu. Spróbujmy ten przykład,

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

Oto demo łączyć kaskadowo z zwrotnego, a wykorzystanie nadzieję, że to pomoże.

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