JavaScript Cascades를 구현하는 방법 ..?

Question

나는 "자바 스크립트 좋은 부품"읽고 있어요 그리고 자바 스크립트에서 메소드 체인을 할 수있는 방법으로 폭포를 언급하지만이 방법을 구현하는 방법을 설명합니다 코드를 찾을 수 없습니다.

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

트릭은 메서드 자체가 this을 반환해야한다는 것입니다. 그런 식으로, 당신이이 방법들을 함께 묶을 때마다 객체 자체가 호출의 기초가됩니다.

SomeObj.width (40) 다음 그렇게 작동 할 호출 .height의 (50)를 추가, 단지 someObj에 반환과 함께 계속.

Answer 2

이것은 기본적으로 JQuery가 작동하는 방식입니다. 그 생각은 각각의 함수가 그 함수를 포함하는 객체를 반환하도록 만드는 것입니다. 다시입니다.

편집 : 당신은 JQuery와 다운로드이 정확히 그 도서관에서 진행되고 있기 때문에, 그것의 소스 코드를 볼 수 있습니다.

Answer 3

이 방법은 항상 우리는 하나의 명령문에서 순차적으로 동일한 개체에 많은 메서드를 호출 할 수 있습니다, 캐스케이드에서 그들이 this에 속하는 개체, 예컨대 :

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

을 반환합니다. 다음은이 예제를 시도

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

을 할 수있는 데모 콜백 캐스케이드를 결합하고, 사용이 도움이되기를 바랍니다.

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