ตอบสนองต่อการเปลี่ยนแปลงด้วย Object.observe

Alex Danilo

เฟรมเวิร์ก JavaScript จำนวนมากที่ใช้ MVC หรือ MDV ต้องตอบสนองต่อการเปลี่ยนแปลงออบเจ็กต์ที่จำลองสถานะภายในเว็บแอปพลิเคชัน ความสามารถนี้เป็นพื้นฐานของโมเดลการเชื่อมโยงข้อมูล

การตรวจสอบออบเจ็กต์ JavaScript และพร็อพเพอร์ตี้ DOM เพื่อทริกเกอร์การดำเนินการบางอย่างมีหลายวิธี แต่เทคนิคส่วนใหญ่ไม่เหมาะสําหรับเหตุผลหลายประการ เช่น ประสิทธิภาพ เป็นต้น

เราได้เสนอเมธอดใหม่ชื่อ Object.observe() ให้กับ TC39 ซึ่งเป็นองค์กรมาตรฐานที่ดูแลการพัฒนา ECMAScript (JavaScript) เพื่อปรับปรุงประสิทธิภาพของเว็บแอปพลิเคชัน

Object.observe() ช่วยให้คุณเพิ่ม Listener ไปยังออบเจ็กต์ JavaScript ใดก็ได้ที่จะเรียกใช้ทุกครั้งที่ออบเจ็กต์หรือพร็อพเพอร์ตี้ของออบเจ็กต์นั้นเปลี่ยนแปลง

คุณลองใช้ฟีเจอร์นี้ได้ใน Chrome Canary เวอร์ชัน 25

หากต้องการทดลองใช้ฟีเจอร์นี้ คุณต้องเปิดใช้ Flag Enable Experimental JavaScript ใน Chrome Canary แล้วรีสตาร์ทเบราว์เซอร์ คุณจะเห็น Flag ในส่วน "about:flags" ดังที่แสดงในภาพด้านล่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆ ของวิธีตั้งค่าผู้สังเกตการณ์บนออบเจ็กต์

var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
    // do something
}
Object.observe(beingWatched, somethingChanged);

เมื่อมีการแก้ไขออบเจ็กต์ "beingWatched" ระบบจะเรียกใช้ฟังก์ชัน Callback "somethingChanged" ซึ่งจะรับอาร์เรย์ของการเปลี่ยนแปลงที่มีผลกับออบเจ็กต์

ดังนั้น เครื่องมือนี้จะจัดเก็บการเปลี่ยนแปลงหลายรายการไว้ในบัฟเฟอร์และส่งทั้งหมดในคําเรียกฟังก์ชัน Callback ครั้งเดียว ซึ่งจะช่วยเพิ่มประสิทธิภาพการเรียกกลับเพื่อให้โค้ดของคุณดําเนินการกับ JavaScript ได้หลายรายการ แต่ประมวลผลการเรียกกลับเพียงไม่กี่รายการโดยการรวมการอัปเดตเข้าด้วยกัน

ฟังก์ชัน Callback จะทริกเกอร์เมื่อมีการเพิ่ม แก้ไข ลบ หรือกำหนดค่าพร็อพเพอร์ตี้ใหม่

อีกสิ่งที่ยอดเยี่ยมมากเมื่อสังเกตอาร์เรย์คือ หากอาร์เรย์มีการเปลี่ยนแปลงหลายรายการ คุณสามารถใช้ไลบรารีตัวช่วยสรุปการเปลี่ยนแปลงเพื่อสร้างชุดการเปลี่ยนแปลงขั้นต่ำได้ เพื่อให้ 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 ต้องการความคิดเห็นเกี่ยวกับฟีเจอร์นี้ โปรดลองใช้ฟีเจอร์นี้และบอกเราว่าคุณคิดเห็นอย่างไร