jquery.initialize ดาวน์โหลด - jquery.initialize ดาวน์โหลดซอร์สโค้ด

jquery.initialize

หมวดหมู่อื่นๆ

1.2.0

ดาวน์โหลด

หมายเหตุจากผู้เขียน (pie6k) ฉันสร้าง lib นี้เมื่อไม่กี่ปีก่อน และมันก็ดีในตอนนั้น ตอนนี้คุณคงไม่ควรใช้ jQuery สำหรับเรื่องแบบนั้น และเลือกใช้ React หรืออะไรที่คล้ายกัน ขอบคุณ — 2018-11-21

รายงานข้อผิดพลาดยังคงได้รับการยอมรับ

jQuery.เริ่มต้น

ปลั๊กอิน jQuery.initialize ถูกสร้างขึ้นเพื่อช่วยรักษาองค์ประกอบที่สร้างขึ้นแบบไดนามิกบนเพจ

เรื่องย่อ

jQuery.initialize จะวนซ้ำแต่ละองค์ประกอบที่ตรงกับตัวเลือกและใช้ฟังก์ชันโทรกลับ จากนั้นจะรับฟังการเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นกับ Document Object Model และใช้ฟังก์ชันเรียกกลับกับองค์ประกอบใหม่ใด ๆ ที่แทรกลงในเอกสารที่ตรงกับตัวเลือกดั้งเดิม

 $.initialize([selector], [callback]);

สิ่งนี้ช่วยให้นักพัฒนาสามารถกำหนดการเรียกกลับเริ่มต้นที่จะใช้เมื่อใดก็ตามที่องค์ประกอบใหม่ที่ตรงกับตัวเลือกถูกแทรกลงใน DOM มันใช้ได้กับองค์ประกอบที่โหลดผ่าน AJAX ด้วย

การสาธิตง่ายๆ - คลิกที่นี่

ตัวอย่างการใช้งาน

 $.initialize(".some-element", function() {
    $(this).css("color", "blue");
});

แต่ตอนนี้หากองค์ประกอบใหม่ที่ตรงกับตัวเลือก .some-element ปรากฏบนหน้า องค์ประกอบนั้นจะถูกเริ่มต้นทันที วิธีการเพิ่มรายการใหม่ไม่สำคัญ คุณไม่จำเป็นต้องสนใจการโทรกลับใดๆ ฯลฯ

 $("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!

ไม่สังเกต

หากต้องการหยุดการสังเกตเอกสาร คุณอาจยกเลิกการเชื่อมต่อผู้สังเกตการณ์โดยการเรียก disconnect() บนอินสแตนซ์ MutationObserver ที่ส่งคืน ซึ่งจะหยุดไม่ให้รับการแจ้งเตือนเพิ่มเติมจนกว่าจะและเว้นแต่ observe() จะถูกเรียกอีกครั้ง - เช่น

 var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();

ตัวเลือก

`target`

ตามค่าเริ่มต้น เอกสารทั้งหมดจะถูกสังเกตการเปลี่ยนแปลง ซึ่งอาจส่งผลให้ประสิทธิภาพไม่ดี สามารถสังเกตโหนดเฉพาะใน DOM ได้โดยการระบุเป้าหมาย:

 $.initialize(".some-element", function() {
    $(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });

มิฉะนั้น เป้าหมายจะมีค่าเริ่มต้นเป็น document.documentElement

`observer`

อาจมีการระบุ MutationObserverInit แบบกำหนดเอง หากไม่ได้ระบุ ระบบจะใช้ค่าเริ่มต้นเป็นการกำหนดค่าภายใน

ความเข้ากันได้ของเบราว์เซอร์

ปลั๊กอินจะขึ้นอยู่กับ MutationObserver มันจะทำงานได้บน IE9+ ( อ่านหมายเหตุด้านล่าง ) และเบราว์เซอร์สมัยใหม่ทุกตัว

หมายเหตุ: เพื่อให้มันทำงานบน IE9 และ IE10 คุณจะต้องเพิ่ม MutationObserver polyfill - เช่นเดียวกับที่นี่: https://github.com/webcomponents/webcomponentsjs

การทดสอบประสิทธิภาพ (ขอบคุณ @bezborodow และ @liuhongbo )