เฟรมเวิร์ก JavaScript จำนวนมากที่ใช้ MVC หรือ MDV จำเป็นต้องตอบสนองต่อการเปลี่ยนแปลงของออบเจ็กต์ที่จำลองสถานะภายในเว็บแอปพลิเคชัน ความสามารถนี้เป็นพื้นฐานหลักของโมเดลการเชื่อมโยงข้อมูล
มีหลายวิธีในการตรวจสอบออบเจ็กต์ JavaScript และพร็อพเพอร์ตี้ DOM เพื่อทริกเกอร์การทำงานบางอย่าง แต่เทคนิคส่วนใหญ่ไม่เหมาะสำหรับสาเหตุต่างๆ เช่น ประสิทธิภาพ ฯลฯ
เพื่อปรับปรุงประสิทธิภาพของเว็บแอปพลิเคชัน ได้มีการเสนอวิธีการใหม่ที่เรียกว่า Object.observe() ให้กับ TC39 ซึ่งเป็นหน่วยงานมาตรฐานที่ดูแลการพัฒนา ECMAScript (JavaScript)
Object.observe() จะช่วยให้คุณเพิ่ม Listener ลงในออบเจ็กต์ JavaScript ที่มีการเรียกใช้เมื่อใดก็ตามที่ออบเจ็กต์นั้นหรือคุณสมบัติของออบเจ็กต์มีการเปลี่ยนแปลง
คุณลองใช้ได้เลยใน Chrome Canary เวอร์ชัน 25
หากต้องการทดสอบฟีเจอร์นี้ คุณต้องเปิดใช้แฟล็กเปิดใช้ JavaScript แบบทดลองใน Chrome Canary และรีสตาร์ทเบราว์เซอร์ การตั้งค่าสถานะจะอยู่ในส่วน "about:flags" ดังที่แสดงในรูปภาพด้านล่าง
ต่อไปนี้คือตัวอย่างง่ายๆ ของวิธีตั้งค่าผู้สังเกตการณ์ในวัตถุ
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
เมื่อมีการแก้ไขออบเจ็กต์ "beingWatched" จะทริกเกอร์ฟังก์ชันเรียกกลับ "somethingChanged" ซึ่งจะได้รับอาร์เรย์ของการเปลี่ยนแปลงที่ใช้กับออบเจ็กต์ดังกล่าว
ดังนั้นเครื่องมือ JavaScript จึงมีอิสระในการบัฟเฟอร์การเปลี่ยนแปลงต่างๆ และส่งต่อการเปลี่ยนแปลงทั้งหมดในการเรียกครั้งเดียวไปยังฟังก์ชันเรียกกลับ ซึ่งจะช่วยในการเพิ่มประสิทธิภาพให้โค้ดเรียกกลับเพื่อให้โค้ดสามารถดำเนินการจัดการ JavaScript ได้มากมายแต่ประมวลผลการเรียกกลับเพียงไม่กี่รายการโดยการรวมการอัปเดตไว้ด้วยกัน
ฟังก์ชันเรียกกลับจะทำงานเมื่อมีการเพิ่ม แก้ไข ลบ หรือกำหนดค่าพร็อพเพอร์ตี้ใหม่
สิ่งที่ดีมากอีกอย่างหนึ่งเมื่อสังเกตอาร์เรย์คือ หากอาร์เรย์มีการเปลี่ยนแปลงหลายครั้ง คุณสามารถใช้ไลบรารีตัวช่วยสรุปการเปลี่ยนแปลง เพื่อสร้างชุดการเปลี่ยนแปลงที่น้อยที่สุด เพื่อที่ JavaScript ฝั่งไคลเอ็นต์จะได้ไม่ต้องสแกนอาร์เรย์เพื่อตรวจสอบแต่ละรายการด้วยตนเอง
คุณสามารถทำซ้ำการเปลี่ยนแปลงแต่ละรายการได้ง่ายๆ โดยดำเนินการต่อไปนี้ในฟังก์ชันเรียกกลับ "somethingChanged"
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
พร็อพเพอร์ตี้ type จะระบุสิ่งที่เกิดขึ้นกับออบเจ็กต์ ดูตัวอย่างพร็อพเพอร์ตี้ที่กำลังตั้งค่าและประเภทที่เกี่ยวข้องได้ในโค้ดด้านล่าง
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
ข้อดีอย่างหนึ่งของเทคนิคนี้คือ ความอัจฉริยะในการตรวจสอบทั้งหมดอยู่ในเครื่องมือ JavaScript ซึ่งช่วยให้เบราว์เซอร์เพิ่มประสิทธิภาพได้อย่างดีและทำให้ JavaScript สามารถติดตั้งใช้งานฟังก์ชันการทำงานที่ใช้ประโยชน์จากฟีเจอร์นี้ได้
ฟีเจอร์ที่ยอดเยี่ยมอีกอย่างในการพัฒนาซอฟต์แวร์คือความสามารถในการใช้ Object.observe() เพื่อทริกเกอร์โปรแกรมแก้ไขข้อบกพร่องเมื่อออบเจ็กต์เปลี่ยนแปลง ซึ่งทำได้โดยใช้โค้ดดังตัวอย่างด้านล่าง
Object.observe(beingWatched, function(){ debugger; });
นี่คือวิดีโอแนะนำที่ยอดเยี่ยมเกี่ยวกับ Object.observe() ซึ่งอธิบายอย่างละเอียด
นอกจากนี้ยังมีการเขียนคำอธิบายดีๆ และตัวอย่างที่ใช้งานได้ที่นี่ด้วย
หน่วยงานมาตรฐานของ TC39 ต้องการความคิดเห็นเกี่ยวกับฟีเจอร์นี้ ลองใช้งานและบอกให้เราทราบว่าคุณคิดอย่างไร