Wiele platform programistycznych JavaScript korzystających z MVC lub MDV musi reagować na zmiany w obiektach, które modelują stan w aplikacji internetowej. Ta funkcja jest podstawową częścią modelu powiązania danych.
Istnieją różne sposoby monitorowania obiektów JavaScript i właściwości DOM, aby wywołać określone działanie, ale większość technik nie jest idealna z różnych powodów, np. ze względu na wydajność.
Aby zwiększyć wydajność aplikacji internetowych, TC39 (organizacja zajmująca się opracowywaniem standardów ECMAScript, czyli JavaScriptu) zaproponowała nową metodę Object.observe().
Metoda Object.observe() umożliwia dodanie odbiornika do dowolnego obiektu JavaScript, który jest wywoływany za każdym razem, gdy ten obiekt lub jego właściwości ulegają zmianie.
Możesz go teraz wypróbować w Chrome Canary w wersji 25.
Aby eksperymentować z tą funkcją, musisz włączyć flagę Włącz eksperymentalny JavaScript w Chrome Canary i ponownie uruchomić przeglądarkę. Flagę można znaleźć w sekcji „about:flags”, jak pokazano na obrazie poniżej:
Oto prosty przykład konfigurowania obserwatora w obiekcie:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Gdy obiekt „beingWatched” zostanie zmodyfikowany, wywoła to funkcję wywołania zwrotnego „somethingChanged”, która otrzymuje tablicę zmian wprowadzonych w obiekcie.
Silnik JavaScript może więc buforować wiele zmian i przekazać je wszystkie w jednym wywołaniu funkcji wywołania zwrotnego. Pomaga to w optymalizacji wywołań zwrotnych, dzięki czemu Twój kod może wykonywać wiele operacji na kodzie JavaScript, ale przetwarzać tylko kilka wywołań zwrotnych, łącząc aktualizacje w jedną grupę.
Funkcja wywołania zwrotnego jest wywoływana po dodaniu, zmianie, usunięciu lub zmianie konfiguracji usługi.
Kolejną bardzo przydatną rzeczą w przypadku tablic jest to, że jeśli w tablicy wprowadzono wiele zmian, możesz użyć biblioteki pomocniczej ChangeSummary, aby utworzyć minimalny zestaw zmian, dzięki czemu kod JavaScript po stronie klienta nie będzie musiał ręcznie skanować tablicy w celu sprawdzenia każdego elementu.
Możesz łatwo przejrzeć wszystkie zmiany, wykonując w funkcji „somethingChanged” coś takiego:
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 wskazuje, co stało się z obiektem. Przykłady właściwości z powiązanym typem znajdziesz w poniżej zamieszczonym kodzie.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Największą zaletą tej techniki jest to, że wszystkie mechanizmy monitorowania są zawarte w silniku JavaScriptu, co pozwala przeglądarce dobrze je optymalizować i uwalnia kod JavaScriptu, aby umożliwić implementację funkcji korzystających z tej funkcji.
Inną bardzo przydatną funkcją jest możliwość wywołania funkcji Object.observe() w celu uruchomienia debugera po każdej zmianie obiektu. W tym celu użyjesz kodu podobnego do tego poniżej.
Object.observe(beingWatched, function(){ debugger; });
Oto film wprowadzający, który szczegółowo omawia funkcję Object.observe().
Dostępny jest też dobry opis i przykład działającego kodu.
Organizacja TC39 zajmująca się standardami zbiera opinie na temat tej funkcji. Wypróbuj ją i powiedz nam, co o niej myślisz.