JavaScript
방법 체이닝

방법 체이닝

메서드 체이닝은 코드를 단순화하고 그것을 아름답게 만드는 프로그래밍 전략입니다. 메서드 체이닝은 객체의 각 요소가 객체의 단일 요소를 반환하는 대신 전체 객체를 반환하도록하여 수행됩니다. 예 :

function Door() {
    this.height = '';
    this.width = '';
    this.status = 'closed';
}

Door.prototype.open = function() {
    this.status = 'opened';
    return this;
}

Door.prototype.close = function() {
    this.status = 'closed';
    return this;
}
Door.prototype.setParams = function(width,height) {
    this.width = width;
    this.height = height;
    return this;
}

Door.prototype.doorStatus = function() {
    console.log('The',this.width,'x',this.height,'Door is',this.status);
    return this;
}

var smallDoor = new Door();
smallDoor.setParams(20,100).open().doorStatus().close().doorStatus();

각 메소드 유의 Door.prototype 반환 this 그 전체를 예를 지칭하는 Door 오브젝트.

연결 가능한 객체 디자인 및 연결

Chaining과 Chainable은 객체 비헤이비어를 설계하는 데 사용되는 설계 방법으로, 객체 함수에 대한 호출이 자체 또는 다른 객체에 대한 참조를 반환함으로써 추가 함수 호출에 대한 액세스를 제공함으로써 호출 문이 변수 보유를 참조하지 않고도 많은 호출을 연결할 수 있습니다 객체 / s.

연결될 수있는 객체는 연결 가능하다고합니다. chainable 객체를 호출하면 리턴 된 모든 객체 / 프리미티브가 올바른 유형인지 확인해야합니다. 연결 가능한 객체가 올바른 참조를 반환하지 못하게하는 데는 한 번만 걸립니다 ( return this 을 추가하는 것을 잊어 버리기 쉽습니다). API를 사용하는 사람은 신뢰를 잃고 연결을 방지합니다. 체인이 가능한 오브젝트는 모두 또는 아무것도 없어야합니다 (파트가 있더라도 체인 가능한 오브젝트가 아님). 객체의 일부 기능 만이 chainable이라면 안됩니다.

연결 가능한 객체

function Vec(x = 0, y = 0){
    this.x = x;
    this.y = y;
    // the new keyword implicitly implies the return type 
    // as this and thus is chainable by default.
}
Vec.prototype = {
    add : function(vec){
        this.x += vec.x;
        this.y += vec.y;
        return this; // return reference to self to allow chaining of function calls
    },
    scale : function(val){
        this.x *= val;
        this.y *= val;
        return this; //  return reference to self to allow chaining of function calls
    },
    log :function(val){
        console.log(this.x + ' : ' + this.y);
        return this;
    },
    clone : function(){
        return new Vec(this.x,this.y);
    }
}

연결 예

var vec = new Vec();
vec.add({x:10,y:10})
    .add({x:10,y:10})
    .log()             // console output "20 : 20"
    .add({x:10,y:10})
    .scale(1/30)
    .log()             // console output "1 : 1"
    .clone()           // returns a new instance of the object
    .scale(2)          // from which you can continue chaining
    .log()

반환 유형에 모호성을 만들지 않습니다.

모든 함수 호출이 유용한 연쇄 형을 리턴하는 것은 아니며 항상 자체에 대한 참조를 반환하지는 않습니다. 이것은 상식적인 이름 사용이 중요한 곳입니다. 위의 예제에서 .clone() 함수 호출은 모호하지 않습니다. 다른 예는 .toString() 은 문자열이 반환됨을 의미합니다.

체인 가능한 객체의 모호한 함수 이름의 예입니다.

 // line object represents a line
 line.rotate(1)
    .vec();  // ambiguous you don't need to be looking up docs while writing.

 line.rotate(1)
    .asVec()    // unambiguous implies the return type is the line as a vec (vector)
    .add({x:10,y:10)
 // toVec is just as good as long as the programmer can use the naming 
 // to infer the return type

구문 규칙

연결하는 경우 공식적인 구문 구문이 없습니다. 컨벤션은 짧거나 새 줄의 체인에 대해 호출이 한 줄로 묶인 경우 참조 된 개체의 한 탭을 새 줄의 점으로 들여 쓰게됩니다. 세미콜론은 선택 사항이지만 체인의 끝을 명확하게 나타내는 데 도움이됩니다.

  vec.scale(2).add({x:2,y:2}).log();  // for short chains

  vec.scale(2)     // or alternate syntax
      .add({x:2,y:2})
      .log();  // semicolon makes it clear the chain ends here

  // and sometimes though not necessary
  vec.scale(2)     
      .add({x:2,y:2})
      .clone()    // clone adds a new reference to the chain
           .log(); // indenting to signify the new reference

  // for chains in chains
  vec.scale(2)     
      .add({x:2,y:2})
      .add(vec1.add({x:2,y:2})  // a chain as an argument 
           .add({x:2,y:2})      // is indented
           .scale(2))
      .log();

  // or sometimes 
  vec.scale(2)     
      .add({x:2,y:2})
      .add(vec1.add({x:2,y:2})  // a chain as an argument 
           .add({x:2,y:2})      // is indented
           .scale(2)
      ).log();   // the argument list is closed on the new line

잘못된 구문

   vec          // new line before the first function call
      .scale()  // can make it unclear what the intention is
      .log();

   vec.          // the dot on the end of the line
      scale(2).  // is very difficult to see in a mass of code
      scale(1/2); // and will likely frustrate as can easily be missed
                  // when trying to locate bugs

과제의 왼쪽 편

체인의 결과를 지정하면 마지막으로 반환되는 호출 또는 개체 참조가 할당됩니다.

 var vec2 = vec.scale(2)
                .add(x:1,y:10)
                .clone();   // the last returned result is assigned
                                // vec2 is a clone of vec after the scale and add

위의 예제에서 vec2 에는 체인의 마지막 호출에서 반환 된 값이 할당됩니다. 이 경우 저울의 뒤에 vec 의 복사본이 추가됩니다.

개요

변경의 이점은보다 관리하기 쉬운 코드입니다. 어떤 사람들은 그것을 선호하고 API를 선택할 때 chainable을 요구할 것입니다. 또한 중간 결과를 저장하기 위해 변수를 작성하지 않아도되므로 성능 이점이 있습니다. 마지막으로 chainable 객체가 일반적인 방식으로 사용될 수 있으므로 chainable을 객체로 만들어 체이닝을 적용하지 않아도됩니다.