با Object.observe به تغییر پاسخ دهید

بسیاری از فریمورک‌های جاوا اسکریپت که از MVC یا MDV استفاده می‌کنند باید به تغییرات در اشیایی که حالت را در داخل یک برنامه وب مدل می‌کنند پاسخ دهند. این قابلیت بخش اساسی یک مدل اتصال داده است.

روش‌های مختلفی برای نظارت بر اشیاء جاوا اسکریپت و ویژگی‌های DOM برای راه‌اندازی نوعی عمل وجود دارد، اما بیشتر تکنیک‌ها به دلایل مختلف مانند عملکرد و غیره ایده‌آل نیستند.

به منظور بهبود عملکرد برنامه های کاربردی وب، روش جدیدی به نام Object.observe() به TC39 پیشنهاد شده است - بدن استاندارد نظارت بر توسعه ECMAScript (جاوا اسکریپت).

Object.observe() به شما امکان می دهد یک شنونده به هر شی جاوا اسکریپتی که هر زمان که آن شی یا ویژگی های آن تغییر می کند فراخوانی می شود اضافه کنید.

اکنون می توانید آن را در Chrome Canary نسخه 25 امتحان کنید.

برای آزمایش این ویژگی، باید پرچم Enable Experimental 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' را فعال می کند که آرایه ای از تغییرات اعمال شده بر روی شی را دریافت می کند.

بنابراین موتور جاوا اسکریپت آزاد است تا تعدادی از تغییرات را بافر کند و همه آنها را در یک تماس به تابع callback منتقل کند. این به بهینه‌سازی تماس‌های برگشتی کمک می‌کند تا کد شما بتواند بسیاری از جاوا اسکریپت را دستکاری کند، اما تنها چند تماس را با دسته‌بندی به‌روزرسانی‌ها پردازش کند.

هر زمان که یک ویژگی اضافه، اصلاح، حذف یا پیکربندی مجدد شود، عملکرد برگشت به تماس فعال می شود.

یکی دیگر از چیزهای بسیار خوب در هنگام مشاهده آرایه ها این است که اگر یک آرایه چندین تغییر در آن ایجاد شده است، می توانید از یک کتابخانه کمکی Change Summary برای ایجاد یک مجموعه تغییرات حداقلی استفاده کنید، به طوری که جاوا اسکریپت سمت کلاینت نیازی به اسکن دستی آن نداشته باشد. آرایه ای برای بررسی هر مورد

می‌توانید با انجام کارهایی مانند زیر در تابع callback '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

نکته مهم در مورد این تکنیک این است که تمام هوشمندهای نظارتی در موتور جاوا اسکریپت قرار دارند که به مرورگر اجازه می دهد تا آن را به خوبی بهینه کند و جاوا اسکریپت شما را آزاد کند تا با بهره گیری از این ویژگی، عملکرد را پیاده سازی کند.

یکی دیگر از ویژگی های واقعا عالی برای توسعه، توانایی استفاده از Object.observe() برای راه اندازی اشکال زدا هر زمان که یک شی تغییر می کند است. برای انجام این کار از کدی مانند مثال زیر استفاده کنید.

Object.observe(beingWatched, function(){ debugger; });

در اینجا یک معرفی ویدیویی عالی در مورد Object.observe() است که آن را با جزئیات توضیح می دهد.

همچنین یک نوشته توصیفی خوب و یک نمونه کار در اینجا وجود دارد.

بدنه استاندارد TC39 به دنبال بازخورد در مورد این ویژگی است، بنابراین ادامه دهید و آن را امتحان کنید و نظر خود را با ما در میان بگذارید.