[javascript] “$ (). ready (handler)”가 권장되지 않는 이유는 무엇입니까?

Program / 글쓴이

로부터 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)권장되지 않습니까?

답변

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. 아마도 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()

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

답변

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

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

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

답변

세 가지에 약간의 불일치가 있음을 명백히 분명히하기 위해 자주 사용되는 네 번째 형식을 추가했습니다. (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/

답변

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

이건 표현력이 좋지 않아 

$().ready(handler);

같이

$(document).ready(handler)

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

답변