เหตุใดจึงไม่แนะนำให้ใช้“ $ (). ready (handler)”

จากไซต์เอกสาร jQuery APIสำหรับready

ไวยากรณ์ทั้งสามต่อไปนี้เทียบเท่ากัน:

• $ (เอกสาร). พร้อม (ตัวจัดการ)
• $ () พร้อม (ตัวจัดการ) (ไม่แนะนำ)
• $ (ตัวจัดการ)

หลังจากทำการบ้าน - อ่านและเล่นกับซอร์สโค้ดฉันไม่รู้ว่าทำไม

$().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) DEMO
• ตัวเลือกไร้สาระ : $('fdhjhjkdafdsjkjriohfjdnfj').ready(handler) สาธิต
• ตัวเลือกที่ไม่ได้กำหนด : $().ready(handler) DEMO

สุดท้าย ... คำถามของฉัน: ทำไม$().ready(handler)ไม่แนะนำ?

ฉันได้รับคำตอบอย่างเป็นทางการจากหนึ่งในผู้พัฒนา jQuery:

$().ready(fn)ใช้งานได้เพราะ$()เคยเป็นทางลัดไปยัง$(document) _{(jQuery <1.4)}
ดังนั้นจึง$().ready(fn)เป็นรหัสที่อ่านได้

แต่คนเคยทำสิ่งที่ชอบ$().mouseover()และความบ้าคลั่งอื่น ๆ ทุกประเภท
และผู้คนต้องทำ$([])เพื่อให้ได้วัตถุ jQuery ที่ว่างเปล่า

ดังนั้นใน 1.4 เราเปลี่ยนมันเพื่อ$()ให้ jQuery ว่างเปล่าและเราเพิ่ง$().ready(fn)ทำงานเพื่อไม่ให้โค้ดจำนวนมากเสียหาย

$().ready(fn) ตอนนี้ได้รับการแก้ไขอย่างแท้จริงในแกนกลางเพื่อให้ทำงานได้อย่างถูกต้องสำหรับกรณีเดิม

สถานที่ที่ดีที่สุดสำหรับreadyฟังก์ชั่นคือ$.ready(fn)แต่เป็นการตัดสินใจในการออกแบบที่เก่ามากและนั่นคือสิ่งที่เรามีในตอนนี้

ฉันถามเขา:

คุณคิดว่า $ (fn) อ่านได้มากกว่า $ () พร้อม (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. ที่เกี่ยวข้องกับข้างต้น: 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: ไม่ได้กำหนด

ดังนั้นเฉพาะเวอร์ชัน Handler และ Doc เท่านั้นที่สอดคล้องกับหลักการ jQuery ในการส่งคืนสิ่งที่ใช้งานเมื่อได้รับตัวเลือกเอกสารและด้วยแบบฟอร์ม Passed คุณจะต้องส่งคืนบางสิ่ง (ฉันจะไม่ทำเช่นนี้ฉันคิดว่า แต่ใส่ไว้เฉยๆ เพื่อแสดง "ข้างใน" มันมีอะไรบางอย่าง)

นี่คือเวอร์ชั่นซอสำหรับคนขี้สงสัย: http://jsfiddle.net/az85G/

ฉันคิดว่านี่เป็นสิ่งที่อ่านได้ง่ายกว่าสิ่งอื่นใด

อันนี้ไม่แสดงออก

$().ready(handler);

เช่น

$(document).ready(handler)

บางทีพวกเขาอาจพยายามส่งเสริม jQuery สำนวนบางรูปแบบ