2009-06-30 11 views
19

Passando attraverso javascript documentazione, ho trovato le seguenti due funzioni in un oggetto JavaScript sembra interessante:Listener per la proprietà valore cambia in un oggetto JavaScript

.watch - Orologi per una proprietà da assegnare un valore e gestisce una funzione quando ciò accade.
.unwatch - Rimuove un punto di riferimento impostato con il metodo di controllo.

utilizzo Esempio:

o = { p: 1 }; 
o.watch("p", function (id,oldval,newval) { 
    console.log("o." + id + " changed from " + oldval + " to " + newval) 
    return newval; 
}); 

Ogni volta che si cambia il valore della proprietà di "p", questa funzione viene attivata.

o.p = 2; //logs: "o.p changed from 1 to 2" 

Sto lavorando su javascript per i pochi anni veloci e mai utilizzato queste funzioni.
Qualcuno può, per favore, fare dei buoni casi d'uso in cui queste funzioni saranno utili?

+2

Questi sono disponibili solo per i browser basati su Gecko, come Mozilla Firefox. Internet Explorer espone attraverso un metodo simile sugli oggetti, chiamato onpropertychange. –

risposta

8

Ciò che l'orologio è realmente progettato per la convalida dei valori delle proprietà. Per esempio si potrebbe convalidare che qualcosa è un numero intero:

obj.watch('count', function(id, oldval, newval) { 
    var val = parseInt(newval, 10); 
    if(isNaN(val)) return oldval; 
    return val; 
}); 

Si potrebbe utilizzare per convalidare la lunghezza della stringa:

obj.watch('name', function(id, oldval, newval) { 
    return newval.substr(0, 20); 
}); 

Tuttavia, questi sono disponibili solo nelle versioni più recenti del SpiderMonkey motore JavaScript . Ottimo se si utilizza Jaxer o si incorpora il motore SpiderMonkey, ma non è ancora disponibile nel browser (a meno che non si utilizzi FF3).

+1

Heads up, ora disponibile su tutti i browser moderni. Suggerimento: utilizzare invece getter e setter. –

1

Si potrebbe dare un'occhiata alla libreria Javascript Propery Events. È una piccola libreria che estende Object.defineProperty con alcuni chiamanti di eventi, che ho creato di recente. Aggiunge alcune proprietà on[event] che possono essere utilizzate come le proprietà on[event] di oggetti HTML. Ha anche un semplice controllo del tipo, che chiama l'evento onerror se fallisce.

Prendendo il codice che si tradurrebbe in qualcosa di simile:

var o = {} 
Object.defineProperty(o, "p", { 
    value:1, 
    writable:true, 
    onchange:function(e){ 
     console.log("o." + e.target + " changed from " + e.previousValue + " to " + e.returnValue); 
    } 
}) 
Problemi correlati