IT TIP

jQuery 플러그인에서 this.each (function ())을 반환하는 이유는 무엇입니까?

itqueen 2020. 10. 29. 20:19
반응형

jQuery 플러그인에서 this.each (function ())을 반환하는 이유는 무엇입니까?


jQuery 플러그인 개발에 대해 본 튜토리얼과 예제 중 일부는

this.each(function () {
    //Plugin code here
});

플러그인을 인스턴스화하는 함수의 끝에서 아직 그 뒤에 어떤 추론도 보지 못했지만 모든 사람이 따르는 표준 인 것 같습니다. 누구든지이 관행의이면에있는 추론에 대해 나를 깨달을 수 있습니까?

편집 : 설명을 위해 내 질문은 왜 이것을 반환 해야하는지가 아니라 플러그인이 this.each를 반환 해야하는 이유에 관한 것이 었습니다.


선택기 ( $('.myclass'))를 사용하여 요소를 필터링하면 둘 이상의 요소와 일치 할 수 있습니다.
를 사용하면 일치하는 모든 요소each 를 반복하고 코드가 모든 요소 에 적용됩니다.


jQuery는 "체인 가능한 메소드"를 지원하므로 대부분의 jQuery 함수는 this. .each()를 반환하고 this, $('selector').yourPlugin().css(...)일하고 싶다면 return this.


질문을 명확히 할 수있는 두 개의 "동등한"코드를 보여 드리겠습니다.

jQuery "각"기능 :

(function($) {
    $.fn.mangle = function(options) {
        return this.each(function() {
            $(this).append(' - ' + $(this).data('x'));
        });
    };
})(jQuery);

jQuery "각"기능없이 :

(function($) {
    $.fn.mangle = function(options) {
        var objs = this;
        for (var i=0; i<objs.length; i++) {
            var obj = objs[i];
            $(obj).append(' - ' + $(obj).data('x'));
        };
        return this;
    };
})(jQuery);

그래서, 기본적으로, each함수는 모든 요소에 일부 코드에 포함 된 적용하는 데 사용됩니다 this(객체 this일반적으로 jQuery를 선택에 의해 반환 된 요소의 그룹을 의미 )과에 대한 참조를 반환 this( 같은 each기능이 항상 calls- 체인 수있는 아키텍처에 많은 투자를 그 참조를 반환 )

보조 노트로 (두 번째 방법 : - for루프 인 ) 빠른 (특히 오래된 브라우저에서)는 이전보다 ( - each기능 - ).


플러그인을 작성할 때 jQuery 객체를 확장하고 jQuery 객체는 시퀀스 this.each(function () { });이므로 시퀀스의 각 항목에 대해 플러그인이 실행되도록 반환 합니다.


간단히 말해서 지금까지 수행 된 모든 것을 반환하므로 다음 항목 .anyMethod()이 변경 / 수정 된 요소에 대해 작동 할 수 있으므로 체인을 활용할 수 있습니다.



또한이 링크를 살펴보면 jQuery 플러그인 개발에 대한 많은 정보를 얻을 수 있습니다.

http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-started/
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
http : / /snook.ca/archives/javascript/jquery_plugin

여기에 jQuery 플러그인을 바로 시작할 수있는 멋진 웹 기반 앱이 있습니다. http://starter.pixelgraphics.us/

참고 URL : https://stackoverflow.com/questions/2678185/why-return-this-eachfunction-in-jquery-plugins

반응형