Реагировать на изменения с Object.observe

Сейчас много фраймворков JavaScript, перечислять их, в этой статье Я не буду. Но, это один из самых лучших способов усовершенствовать содержание веб-приложения. Есть целый ряд различных способов контролировать наличие объектов и свойств DOM, чтобы вызвать нужное действие, но большинство из этих методов не являются идеальными, по ряду различных причин.

Для того, чтобы улучшить производительность веб-приложений, Надзором развития ECMAScript (JavaScript) TC39 — стандартным органом, был предложен новый метод Object.observe().

Object.observe() позволяет добавить контроль любого объекта 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 engine добавил в буфер целый ряд изменений и проходит их все в одном вызове функции обратного вызова. Это помогает с оптимизацией функций обработки вызова, так что ваш код может сделать много манипуляции JavaScript, но процесс только несколько функций обратного вызова путем дозирования обновления вместе.

Функция обратного вызова будет срабатывать всякий раз, когда свойство добавлено, изменено или удалено.

Еще одна очень хорошая вещь при наблюдении массивов, то что если в массиве был ряд изменений, вы можете использовать ECMAScript Object.observe как вспомогательную библиотеку для создания минимального набора изменений, так что на стороне клиента 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  определяет, что случилось с объектом. Некоторые примеры свойства задаются и связанные с  type  можно увидеть в коде ниже.



beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new


Самое замечательное в этой технике является то, что все smarts мониторинг внутри движка JavaScript, который позволяет браузеру, хорошо оптимизировать, и освободить наличие до реализации функциональности воспользоваться этой функцией.

Другая действительно отличная возможность для развития способности использовать Object.observe() , это вызвать отладчик, когда объект изменен. Для этого нужно использовать код:



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


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>