jQuery 체인이 작동하는 방식을 이해할 수 없습니다.

Question

jQuery 체인이 작동하는 방식을 이해할 수 없습니다.

jQuery("div").attr("id", "_id") 
    .hide() 
    .show(); 

나는 체인과 비슷한 것을 만들었지 만, jQuery가 사용하는 것과 동일한 논리인지는 확실치 않습니다.

var fun = (function (parma) { 
return function() { 
    return { 
     start: function() { 
      console.log("start"); 
      return this; 
     }, 

     mid: function() { 
      console.log("mid"); 
      return this; 
     }, 

     last: function() { 
      console.log("last"); 
      return this; 
     } 
    } 
} 

})();

// Working 
fun().start() 
    .mid() 
    .last(); 

Answer 1

을 작성할 수 있습니다, 당신은 바로 그 메소드를 호출 할 수 있습니다. 그처럼 간단합니다.

this을 반환하기 때문에 이전 메서드가 호출 된 것과 동일한 개체가 반환됩니다. 즉, 같은 방법으로 객체를 반환한다는 의미입니다. 그것의

---

생각해이 방법 : 여기

var f = { 
    foo: function() { 
      console.log("foo"); 
      return b; 
     } 
}; 

var b = { 
    bar: function() { 
      console.log("bar"); 
      return f; 
     } 
}; 

우리는 두 개체가 있습니다.

• f 객체는 b 객체를 반환 foo라는 메소드가 있습니다.
• b 개체에는 f 개체를 반환하는 bar이라는 메서드가 있습니다.

foo을 호출 한 후 bar을 호출 할 수 있으며 그 반대의 경우도 마찬가지입니다.

f.foo().bar().foo().bar(); // etc 

그러나 f 때문에

우리가 두 번 같은 메소드를 호출 할 수 없다, foo이없는 bar 및 b이 없습니다.

---

그러나 우리는 두 가지 방법을 가지고 하나 개의 객체를 가지고 있었고, 두 가지 방법이 항상 동일한 원본 객체를 반환하는 경우?

var fb = { 
    foo: function() { 
      console.log("foo"); 
      return fb; 
     }, 
    bar: function() { 
      console.log("bar"); 
      return fb; 
     } 
}; 

이제 우리는 항상 모두 foo 및 bar 방법을 가진 개체를 반환하고, 그래서 우리는 전화 두 방법 중 하나 있습니다.

fb.foo().bar().bar().bar().foo().foo().bar(); 

그래서 이제 유일한 차이는 우리가 대신 this의 fb를 반환되지만,이 같은 객체에 있기 때문에이 문제가되지 않는다는 것입니다. 위의 코드는 return this; 일 수 있으며 동일한 동작을 보입니다. 당신이 개체의 여러 인스턴스를 생성하기를 원한다면 그것은 중요 할

하지만 체인 객체 지향 기술의 문제가 아니라 방법의 . 이 같은 그것의

Answer 2

거의 모든 jQuery 함수는 jQuery 객체도 반환합니다. 결과적으로 각각의 반환 된 객체에 대해 jQuery 함수를 실행할 수 있습니다.

체인 코드를 작성하면 시간을 절약 할 수있을뿐만 아니라 성능이 향상됩니다. 컴퓨터가 특정 노드를 찾아 사용하도록 강요하지 않으면 반환 된 객체에서 작업하는 것이 다른 인스턴스를 시작하는 것보다 훨씬 효율적입니다.

Answer 3

모든 함수의 return은 jQuery 객체입니다. 각각의 jQuery 객체의 모든 기능과 같은 show/hide에 대한 참조를하고 함수의 반환 값이 메서드가 객체 인 경우 그래서 당신은 단순히

jQuery("#myDiv")   //returns a jQuery object 
    .attr("id", "_id") //sets the ID and returns the jQuery object 
    .hide()    //Hides the element with ID myDiv and returns jQuery object 
    .show();    //show the element with ID myDiv and returns jQuery object 

Answer 4

생각한다

var myLib = { 
    foo: function() { 
     alert("FOO!"); 
     return this; 
    }, 
    bar: function() { 
     alert("BAR!"); 
     return this; 
    } 
} 

myLib.foo().bar(); 

jQuery를 정확히 이런 식으로하지 않습니다, 그러나 이것은 체인 기능을 얻을 수있는 하나의 방법입니다. 이 특정 객체는 현재 객체에 대한 정보를 저장하지 않습니다.

jQuery 객체에는 수정 된 jquery 객체를 반환하는 메소드가 있으므로 더 많은 메소드를 호출 할 수 있습니다.

Answer 5

정확하게 기억하면 jQuery는 하나의 예외를 제외하고 프로토 타입 내에서 체인 연결에 대한 고전적인 접근법을 사용합니다. enhanced 생성자가 init 프로토 타입입니다. 다음은 간단한 패턴은 다음과 같습니다 각 인스턴스에 대한 프로토 타입 방법을 재사용 할 수 있기 때문에

function myQuery(elem){ 
    return new myQuery.prototype.init(elem); 
}; 

myQuery.prototype.init = function(elem) { // the constructor "enhanced" 
    this.elem = elem; 
}; 

// now copy the myQuery prototypes into init.prototype 
myQuery.prototype.init.prototype = myQuery.prototype; 

// here comes the chainable prototypes: 

myQuery.prototype.start = function() { 
    this.elem.className = 'start'; 
    return this; // returning the instance allows further chaining 
}; 

myQuery.prototype.finish = function() { 
    this.elem.className = 'finish'; 
    return this; 
}; 

// now use it 
myQuery(document.body).start().finish(); 

체인화 프로토 타입이 더 효과적입니다. jQuery는 문서에서 여러 번 초기화되는 경우가 많으며, 매번 체인 가능한 메소드가있는 새 객체를 만들면 매번 불필요한 오버 헤드와 누수가 추가됩니다.