Wiele platform JavaScript korzystających z MVC lub MDV musi reagować na zmiany w obiektach modelujących stan w aplikacji internetowej. Ta możliwość jest podstawową częścią modelu wiązania danych.
Istnieje wiele różnych sposobów monitorowania obiektów JavaScript i właściwości DOM w celu wywołania jakiegoś działania, ale większość z nich nie jest idealna z różnych powodów, takich jak wydajność itp.
Aby poprawić wydajność aplikacji internetowych, zaproponowano w TC39 nową metodę o nazwie Object.observe(), która zajmuje się opracowywaniem ECMAScript (JavaScript).
Metoda Object.observe() pozwala dodać odbiornik do dowolnego obiektu JavaScript, który jest wywoływany po każdej zmianie tego obiektu lub jego właściwości.
Możesz ją teraz wypróbować w Chrome Canary w wersji 25.
Aby poeksperymentować z tą funkcją, musisz włączyć flagę Włącz eksperymentalny JavaScript w Chrome Canary i zrestartować przeglądarkę. Flagę tę można znaleźć w atrybucie „about:flags”, tak jak na poniższym obrazku:
Oto prosty przykład konfiguracji obserwatora obiektu:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Po zmodyfikowaniu obiektu „beingWatched” uruchomi on funkcję wywołania zwrotnego „SomeChanged”, która odbierze tablicę zmian zastosowanych do obiektu.
Mechanizm JavaScript może więc buforować szereg zmian i przekazywać je wszystkie w jednym wywołaniu do funkcji wywołania zwrotnego. Pomaga to zoptymalizować wywołania zwrotne, dzięki czemu Twój kod może przeprowadzać wiele operacji na języku JavaScript, ale przetwarzać tylko kilka wywołań zwrotnych dzięki grupowaniu aktualizacji.
Funkcja wywołania zwrotnego jest aktywowana po każdym dodaniu, zmodyfikowaniu, usunięciu lub ponownym skonfigurowaniu właściwości.
Inną bardzo przydatną funkcją przy obserwacji tablic jest to, że jeśli wprowadzono kilka zmian w tablicy, możesz użyć biblioteki pomocniczej Podsumowanie zmian, aby wprowadzić minimalny zestaw zmian. Dzięki temu kod JavaScript po stronie klienta nie będzie musiał ręcznie skanować tablicy, aby sprawdzić każdy element.
Każdą zmianę możesz łatwo iterować. W tym celu wykonaj w funkcji wywołania zwrotnego „SomeChanged” podane niżej polecenie:
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
Właściwość type określa, co się stało z obiektem. Przykłady ustawiania właściwości i powiązanego z nimi typu znajdziesz w kodzie poniżej.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Ogromną zaletą tej techniki jest to, że wszystkie funkcje monitorowania znajdują się wewnątrz mechanizmu JavaScript, który umożliwia przeglądarce jej optymalizację oraz zwolnienie JavaScriptu do zaimplementowania funkcjonalności korzystającej z tej funkcji.
Inną bardzo świetną funkcją w programie jest możliwość użycia funkcji Object.observe() do aktywowania debugera przy każdej zmianie obiektu. Aby to zrobić, użyj kodu podobnego do poniższego przykładu.
Object.observe(beingWatched, function(){ debugger; });
Oto świetne wprowadzenie wideo, w którym znajdziesz szczegółowe objaśnienie funkcji Object.observe().
Możesz też skorzystać z ładnego opisu i tego przykładu.
Członkowie organizacji zajmującej się standardami TC39 proszą o opinie na temat tej funkcji, więc śmiało wypróbuj ją i daj nam znać, co o niej myślisz.