Veel JavaScript-frameworks die MVC of MDV gebruiken, moeten reageren op wijzigingen in de objecten die de status binnen een webapplicatie modelleren. Deze mogelijkheid is een fundamenteel onderdeel van een databindingsmodel.
Er zijn een aantal verschillende manieren om JavaScript-objecten en DOM-eigenschappen te monitoren om een bepaalde actie te activeren, maar de meeste technieken zijn niet ideaal om verschillende redenen, zoals prestaties, enz.
Om de prestaties van webapplicaties te verbeteren, is een nieuwe methode genaamd Object.observe() voorgesteld aan TC39 - de standaardorganisatie die toezicht houdt op de ontwikkeling van ECMAScript (JavaScript).
Met Object.observe() kunt u een luisteraar toevoegen aan elk JavaScript-object dat wordt aangeroepen wanneer dat object of de eigenschappen ervan veranderen.
Je kunt het nu uitproberen in Chrome Canary versie 25.
Als u met deze functie wilt experimenteren, moet u de vlag Experimenteel JavaScript inschakelen in Chrome Canary inschakelen en de browser opnieuw opstarten. De vlag is te vinden onder 'about:flags' zoals weergegeven in onderstaande afbeelding:
Hier is een eenvoudig voorbeeld van hoe u een waarnemer op een object kunt instellen:
var beingWatched = {};
// Define callback function to get notified on changes
function somethingChanged(changes) {
// do something
}
Object.observe(beingWatched, somethingChanged);
Wanneer het object 'beingWatched' wordt gewijzigd, wordt de callback-functie 'somethingChanged' geactiveerd, die een reeks wijzigingen ontvangt die op het object zijn toegepast.
De JavaScript-engine is dus vrij om een aantal wijzigingen op te slaan en ze allemaal in één keer door te geven aan de callback-functie. Dit helpt bij het optimaliseren van de callbacks, zodat uw code veel JavaScript-manipulatie kan uitvoeren, maar slechts een paar callbacks kan verwerken door de updates samen te groeperen.
De callback-functie wordt geactiveerd wanneer een eigenschap wordt toegevoegd, gewijzigd, verwijderd of opnieuw geconfigureerd.
Een ander heel leuk ding bij het observeren van arrays is dat als er een aantal wijzigingen in een array zijn aangebracht, je een helperbibliotheek met wijzigingssamenvatting kunt gebruiken om een minimale wijzigingsset te maken, zodat JavaScript aan de clientzijde niet handmatig de wijzigingen hoeft te scannen. array om elk item te controleren.
U kunt elke wijziging vrij eenvoudig doorlopen door iets als het volgende te doen in uw 'somethingChanged' callback-functie:
function whatHappened(change) {
console.log(change.name + " was " + change.type + " and is now " + change.object[change.name]);
}
function somethingChanged(changes) {
changes.forEach(whatHappened);
}
De eigenschap type identificeert wat er met het object is gebeurd. Enkele voorbeelden van eigenschappen die worden ingesteld en het bijbehorende type zijn te zien in de onderstaande code.
beingWatched.a = "foo"; // new
beingWatched.a = "bar"; // updated
beingWatched.a = "bar"; // no change
beingWatched.b = "amazing"; // new
Het mooie van deze techniek is dat alle slimme monitoringfuncties zich in de JavaScript-engine bevinden, waardoor de browser deze goed kan optimaliseren en uw JavaScript kan vrijmaken om functionaliteit te implementeren die van deze functie profiteert.
Een andere geweldige functie voor ontwikkeling is de mogelijkheid om Object.observe() te gebruiken om de debugger te activeren wanneer een object verandert. Om dat te doen, zou je code gebruiken zoals in het onderstaande voorbeeld.
Object.observe(beingWatched, function(){ debugger; });
Hier is een geweldige video-introductie over Object.observe() waarin dit in detail wordt uitgelegd.
Er is ook een mooi beschrijvend artikel beschikbaar en een werkend voorbeeld hier .
De TC39-standaardorganisatie zoekt feedback over deze functie, dus ga je gang en probeer het en laat ons weten wat je ervan vindt.