"$ (). ready (handler)"가 권장되지 않는 이유는 무엇입니까?


88

로부터 jQuery를 API 문서 사이트 에 대한ready

다음 세 가지 구문은 모두 동일합니다.

  • $ (문서) .ready (핸들러)
  • $ (). ready (handler) (권장되지 않음)
  • $ (핸들러)

숙제를 마치고 소스 코드를 읽고 놀았는데 왜 그런지 모르겠습니다.

$().ready(handler) 

권장하지 않습니다. 첫 번째와 세 번째 방법은 정확히 동일하며 세 번째 옵션은 다음을 사용하여 캐시 된 jQuery 객체에서 ready 함수를 호출합니다 document.

rootjQuery = jQuery(document);
...
...

// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

그러나 ready 함수는 선택한 노드 요소의 선택기와 상호 작용하지 않습니다. ready소스 코드 :

ready: function( fn ) {
    // Attach the listeners
    jQuery.bindReady();
        // Add the callback
    readyList.add( fn );
        return this;
},

보시다시피 내부 queue ( readyList)에 콜백을 추가 하고 집합의 요소를 변경하거나 사용하지 않습니다. 이를 통해 ready모든 jQuery 객체 에서 함수 를 호출 할 수 있습니다 .

처럼:

  • 일반 선택기 : $('a').ready(handler) DEMO
  • 넌센스 선택기 : $('fdhjhjkdafdsjkjriohfjdnfj').ready(handler) DEMO
  • 정의되지 않은 선택기 : $().ready(handler) DEMO

마지막으로 ... 내 질문에 : $().ready(handler)권장되지 않습니까?


60
@ChaosPandion : 그가 사용하는 도구를 손등처럼 이해하려고 애쓰는 것 같습니다. 나는 그 낭비되는 노력을 정확하게 부르지 않을 것입니다.
Jon

5
좋은 질문. 관심이있는 사람이 있다면 여기에 성능 비교 가 있습니다. "권장되지 않은"버전이 실제로 가장 빠르다는 것을 (적어도 Chrome에서) 보여주는 성능 비교 입니다.
James Allardice

5
더 좋은 질문은 왜 이것이 전혀 존재하지 않는지 $.ready입니다. 예를 들어 정적 메소드 여야하며 처음에 jQuery 객체를 구성 할 필요가 없습니다.
Esailija

2
@Esailija는 모든 것의 최고의 포인트를 만듭니다. jQuery .ready()가 개별 요소에 대해 일종의 기능 을 제공 할 계획이 아니라면 jQuery 객체를 구성 할 이유가 없어야합니다.

2
@ChaosPandion. 사용할 수 없습니다 ... $.ready이미 내부 jQuery 함수에 의해 사용 되었습니다 ready:. 소스 코드에서 .
gdoron은 Monica를 지원하고 있습니다.

답변:


88

jQuery 개발자 중 한 명으로부터 공식적인 답변을 받았습니다.

$().ready(fn)(jQuery <1.4)에$() 대한 바로 가기로 사용 되었기 때문에 작동 합니다. 그래서 읽기 쉬운 코드였습니다.$(document)
$().ready(fn)

하지만 사람들 $().mouseover()은 다른 모든 종류의 광기 같은 일을했습니다 .
사람들은 $([])빈 jQuery 객체를 가져와야했습니다.

그래서 1.4에서 우리는 그것을 변경 $()하여 빈 jQuery를 제공 $().ready(fn)하고 많은 코드를 깨지 않도록 작업을했습니다.

$().ready(fn) 말 그대로 레거시 케이스에서 제대로 작동하도록 코어에 패치되었습니다.

ready함수를 위한 가장 좋은 장소 는 $.ready(fn)이지만, 이것은 정말 오래된 디자인 결정이며 지금 우리가 가지고있는 것입니다.


그에게 물어 보았다:

$ (fn)이 $ (). ready (fn)보다 더 읽기 쉽다고 생각하십니까?!

그의 대답은 다음과 같습니다.

나는 항상 실제 앱에서 $ (document) .ready (fn)을 수행하며 일반적으로 앱에는 문서 준비 블록이 하나 뿐이며 유지 관리와 정확히 같지 않습니다.

나는 $ (fn)도 꽤 읽을 수 없다고 생각한다 . 그것은 단지 당신이 알아야 할 일이다. Works ™ ...


1
말이
돼요

@Esailija : 그들은 그 심각한 있다면, 그들은의 동작을 전환하지 않았을 $()처음에 (그 행동이되었을 수도로 바보 같이) . 반면에 당신 말이 맞습니다. 그들은 변화를 시도했을 때 보여준 것처럼 항상 획기적인 변화를하는 경향이있는 것은 아닙니다 .attr(). 그리고 며칠 후 빠르게 되돌 렸습니다 . 이로 인해 불행한 초기 (및 중년) 디자인 결정 중 일부가 결정되었습니다.

3
@gdoron +1은 말의 입에서 바로 가져옵니다.

2
@gdoron +1은 실제 답을 얻었습니다. 그리고 예, 우리는 우리의 인식에 아주 가깝습니다.
VisioN

" 이 일이 당신 것으로 알고 작품 그건 그냥 뭐 그렇게있다 ™ ..." $(selector[, context])$(html[, ownerDocument]). 사실, 작동을 알아야하는 것이 문제인 경우 jQuery()대신 사용하는 것이 좋습니다 $(). 아니면 왜 jQuery를 전혀 사용하지 않습니까?
JAB 2013 년

11

다른 옵션이 지적한 것과 거의 같은 일을하기 때문에 도서관 작가 모자를 쓰고 추측을 할 때입니다.

  1. 아마도 jQuery 사람들은 $()나중에 사용할 수 $().ready있기를 원할 것입니다 (권장되지 않더라도 작동하도록 문서화 되었기 때문에 의심스럽고 $특수한 경우 의 의미를 오염시킬 수도 있습니다 ).

  2. 훨씬 더 실용적인 이유 : 두 번째 버전은 래핑으로 끝나지 않는 유일한 버전 document이므로 코드를 유지 관리 할 때 중단하기가 더 쉽습니다. 예:

    // BEFORE
    $(document).ready(foo);
    
    // AFTER: works
    $(document).ready(foo).on("click", "a", function() {});
    

    이것을

    // BEFORE
    $().ready(foo);
    
    // AFTER: breaks
    $().ready(foo).on("click", "a", function() {});
    
  3. 위와 관련하여 : readyjQuery 객체가 랩핑하는 것과 상관없이 동일하게 작동하는 (유일한?) 메소드라는 점에서 괴물입니다 (여기에서와 같이 랩핑하지 않더라도). 이것은 다른 jQuery 메서드의 의미 체계와의 주요 차이점이므로 특히 이에 의존하는 것은 권장되지 않습니다.

    업데이트 : Esailija의 의견이 지적했듯이 엔지니어링 관점에서 보면 ready이와 같이 작동하기 때문에 정확히 정적 방법이어야합니다.

업데이트 # 2 : 소스를 파헤쳐 보면 1.4 브랜치의 어느 시점에서 $()일치하도록 변경된 것으로 보이지만 $([])1.3에서는 $(document). 이 변경은 위의 정당성을 강화합니다.


나는 이런 코드를 본 적이 없지만 오래된 관용구는$(document).ready( function(){ //your code here } );
Esailija

두 번째 업데이트를 이해하지 못했습니다. 좀 더 자세히 설명해 주시겠습니까? 이전 버전을 검색했지만이 빈 jQuery 객체 문제에 대한 차이점을 찾을 수 없습니다.
gdoron은 Monica를 지원하고 있습니다.

@gdoron :에서 selector = selector || document으로 의 변경을 의미합니다 if(!selector) return this.
Jon

4

나는 단순히 객체 를 $()반환 하지만 다른 것에 적용하지 않는다는 사실을 말할 것입니다. 그것은 여전히 ​​작동하지만 직관적이지 않다고 말할 것입니다.$(document)ready()

$(document).ready(function(){}).prop("title") // the title
$().ready(function(){}).prop("title")  //null - no backing document

1
예, 동일한 인식 이이 답변에 있습니다. 따라서 변경 사항은 새 반품 정책을 발표 한 버전 1.4에서 발생했습니다.
VisioN

준비 콜백을 첨부하는 동안 문서 제목을 변경하는 사람을 본 적이 없습니다 . jQuery없이 vanilla js로 간단히 수행 할 수 있습니다 . 답이 아닐 수도 있지만 좋은 이유는 아닙니다.
gdoron 모니카 지원하고있다

문서 속성이나 메서드는 다음을 통해 연결할 수 없습니다$()
Alex K.

2
@AlexK. 그의 요점은 실제로 .ready는 잘 정립 된 관용구이기 때문에 실제로 연결하는 사람은 없다는 것입니다. 물론 누군가가 이것을 할 이론적 인 기회가 있지만 나는 그것을하는 코드를 본 적이 없다 (좋은 주장은 아니지만 당신은 알고있다 : D).
Esailija

2
이론적 기회 방법 때문에 다른 릴리스에서 다른 동작 이 있기 때문에 권장되지 않습니다 .
VisioN

3

아마도 이것은 문서화 버그 일 뿐이며 수정해야합니다 $().ready(handler). 사용의 유일한 단점 은 가독성입니다. 물론, 그것도 $(handler)읽을 수 없다고 주장하십시오 . 동의 합니다 . 그렇기 때문에 사용하지 않습니다 .

한 방법이 다른 방법보다 빠르다고 주장 할 수도 있습니다. 그러나이 메서드를 한 페이지에서 여러 번 호출하여 차이점을 알아 차리십니까?

궁극적으로 그것은 개인적인 취향에 달려 있습니다. $().ready(handler)가독성 인수 이외의 사용에는 단점이 없습니다 . 이 경우 문서가 잘못되었다고 생각합니다.


+1! 당신은 절대적으로 옳았습니다! 공식 jQuery 답변을 읽고 싶을 것입니다. 나는 그것을 대답으로 추가했습니다.
gdoron 모니카 지원하고있다

2

세 가지에 약간의 불일치가 있음을 명백히 분명히하기 위해 자주 사용되는 네 번째 형식을 추가했습니다. (function($) {}(jQuery));

이 마크 업으로 :

<div >one</div>
<div>two</div>
<div id='t'/>

그리고이 코드 :

var howmanyEmpty = $().ready().find('*').length;
var howmanyHandler = $(function() {}).find('*').length;
var howmanyDoc = $(document).ready().find('*').length;
var howmanyPassed = (function($) { return $('*').length; }(jQuery));
var howmanyYuck = (function($) {}(jQuery));
var howmanyYuckType = (typeof howmanyYuck);

$(document).ready(function() {
    $('#t').text(howmanyEmpty + ":" + howmanyHandler + ":" 
        + howmanyDoc + ":" + howmanyPassed + ":" + howmanyYuckType);
});

마지막 문에서 div의 표시된 결과는 다음과 같습니다. 0 : 9 : 9 : 9 : undefined

따라서 Handler 및 Doc 버전 만 문서 선택기를 가져올 때 사용하는 것을 반환하는 jQuery 규칙과 일치하며 Passed 양식을 사용하면 무언가를 반환해야합니다 (내 생각에는 이것을 수행하지 않을 것입니다. "내부"를 보여주기 위해 뭔가가 있습니다).

다음은 호기심을위한 바이올린 버전입니다. http://jsfiddle.net/az85G/


아무것도 찾을 수 없다는 문제가 무엇인지 알 수 없으며 jQuery에 대해 준 컨텍스트는 null그래서 .find('*').lengthreturn 0 입니다. 이 (명백한) 행동에 나쁜 점이 있습니까?
gdoron 모니카 지원하고있다

@gdoron-이 동작에 나쁜 것은 없습니다. null이 아닌 선택자가있을 때와 다른 점을 지적하고 싶었습니다.이 빈 선택기가 "빠른"주석이 표시되는 이유 일 수 있습니다. 처리 할 더 작은 개체가 있지만 해당 인스턴스에서 "정의되지 않은"개체가 아닌 개체를 반환합니다. 나는 질문을 정말 좋아하고 그것을 찬성했습니다 :)
Mark Schultheiss

더 빠른 이유는 배우의 첫 번째 "휴식"조건이 다른 것을 if(!selector) return this주면 regex다른 일이 진행되기 때문입니다. 친절하게 말씀해 주셔서 감사합니다 ... jQuery 팀에 이것에 대답하십시오 (지옥, 그것은 내 도서관이 아닙니다 :-)).
gdoron 모니카 지원하고있다

네, 저는 코드베이스의이 특정 부분을 연구하지 않았고, 버그에 대한 중간 수정을 위해 코어를 해킹했지만 그 부분은 아닙니다. 저는 jQuery(document).ready(function(){});현재 우리 코드베이스에서 다양한 수준의 jQuery 전문 지식이 있고 이것이 jQuery를위한 이벤트 핸들러 함수라는 것이 새로운 사람들에게 "가장 명백한"형태를 선호합니다 .
Mark Schultheiss

0

나는 이것이 다른 무엇보다 가독성을 위해 정말로 더 많은 것이라고 생각합니다.

이건 표현력이 좋지 않아

$().ready(handler);

같이

$(document).ready(handler)

아마도 그들은 어떤 형태의 관용적 jQuery를 홍보하려고 할 것입니다.


3
$(document).ready(handler)이상 읽을 $(handler)... 추천된다
gdoron 모니카 지원하고
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.