"$(.ready(handler)"가 권장되지 않는 이유는 무엇입니까?
jQuery API 문서 사이트에서 다음을 위해ready
다음 세 가지 구문은 모두 동일합니다.
- $(document).준비 완료(handler)
- $(.ready(handler)(권장되지 않음)
- $(handler)
숙제를 하고 난 후 - 읽기와 소스코드를 가지고 놀고 난 후, 나는 왜 그런지 모르겠어요.
$().ready(handler)
권장되지 않습니다. 번째 세 방법은 세 하고, jQuery에서 준비합니다를된합니다.document
:
rootjQuery = jQuery(document);
...
...
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
함수는 .ready
소스 코드:
ready: function( fn ) {
// Attach the listeners
jQuery.bindReady();
// Add the callback
readyList.add( fn );
return this;
},
입니다()에합니다.readyList
및 및 세트의 요소를 변경하거나 사용하지 않습니다.이것은 당신이 전화할 수 있게 해줍니다.ready
모든 jQuery 개체에서 작동합니다.
좋아요:
- 일반 선택기:
$('a').ready(handler)
- 넌센스 셀렉터:
$('fdhjhjkdafdsjkjriohfjdnfj').ready(handler)
- 정의되지 않은 선택기:
$().ready(handler)
드디어...내 질문에 대해:왜 권장되지 않습니까?
jQuery 개발자 중 한 명으로부터 공식적인 답변을 받았습니다.
$().ready(fn)
다 합니다.$()
이었습니다.$(document)
(jQuery <1.4)
그렇게$().ready(fn)
읽을 수 있는 코드였어요
은 .$().mouseover()
다른 모든 종류의 광기들을 말입니다.
그리고 사람들은 해야만 했습니다.$([])
개체 jQuery를 다음과 같이 하십시오.
그래서 1.4에서 이렇게 바꿨습니다.$()
빈 jQuery다를 .$().ready(fn)
다를 합니다.
$().ready(fn)
말 그대로 레거시 케이스에 적합하게 작동하기 위해 코어에 패치를 적용한 것입니다.
에 .ready
는 ㅇ$.ready(fn)
, 하지만 그것은 정말 오래된 디자인 결정이고 그것이 우리가 지금 가지고 있는 것입니다.
저는 그에게 물었습니다.
$(fn)이 $(.ready(fn))보다 더 읽기 쉽다고 생각하십니까?!
그의 대답은 다음과 같습니다.
저는 항상 $(문서)를 합니다.실제 앱에는 ready(fn)가 있으며, 일반적으로 앱에는 문서 준비 블록이 하나밖에 없습니다. 이는 유지보수와 같은 것은 아닙니다.
$(fn)도 꽤 읽을 수 없는 것 같습니다. 이는 단지 당신이 알아야 할 것입니다™...
다른 옵션들은 여러분이 지적한 것과 거의 같은 일을 하기 때문에, 도서관 작가의 모자를 쓰고 추측을 해 볼 때입니다.
은 jQuery를 입니다.
$()
사용 능 이후후 미심쩍음)$().ready
하는 것으로 됩니다의 시킬 수 있습니다.입니다.$
특별한 경우).훨씬 더 실용적인 이유: 두 번째 버전은 포장이 끝나지 않는 유일한 버전입니다.
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() {});
내용:
ready
jQuery 객체가 무엇을 감싸든 동일하게 작동하는 방법(여기 있는 경우와 같이 아무것도 감싸지 않더라도)이라는 점에서 괴짜입니다.이것은 다른 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:9:undefined 입니다.
따라서 Handler 및 Doc 버전만 문서 선택기를 얻을 때 사용할 수 있는 것을 반환하고 Passed 양식을 사용하면 반환해야 한다는 jQuery 규칙을 준수합니다(이렇게 하지는 않을 것으로 생각하지만 "내부에" 무언가가 있다는 것을 보여주기 위해 입력합니다).
여기 궁금한 사람들을 위한 바이올린 버전이 있습니다: http://jsfiddle.net/az85G/
저는 이것이 다른 무엇보다 가독성을 위한 것이라고 생각합니다.
이건 표현력이 별로 없어요.
$().ready(handler);
~하듯이
$(document).ready(handler)
아마도 그들은 관용적인 jQuery의 어떤 형태를 홍보하려고 노력하고 있을 것입니다.
언급URL : https://stackoverflow.com/questions/10753306/why-readyhandler-is-not-recommended
'programing' 카테고리의 다른 글
C++에서 _In_이란 무엇입니까? (0) | 2023.10.02 |
---|---|
fetch를 사용하여 멀티파트 폼 데이터를 게시하려면 어떻게 해야 합니까? (0) | 2023.10.02 |
ActiveRecord는 쿼리 끝에 'AND(1=0)'를 추가합니다. (0) | 2023.09.27 |
서명되지 않은 int에 음수 값을 할당하면 어떻게 됩니까? (0) | 2023.09.27 |
새 Spring 세션을 추가할 때 cookie-value 오류 발생 (0) | 2023.09.27 |