Obiekt.watch () dla wszystkich przeglądarek?
Koniecznie przeczytaj wszystkie komentarze poniżej. Obiekt.Patrz i celuj.Oba są przestarzałe. Zobacz komentarz Elliota B dla zaktualizowanej (stan na Czerwiec 2018) metody.
Szukałem łatwego sposobu monitorowania obiektu lub zmiennej pod kątem zmian i znalazłem Object.watch()
, który jest obsługiwany w przeglądarkach Mozilli, ale nie IE. Zacząłem więc szukać, czy ktoś napisał jakiś odpowiednik.
O jedyne co znalazłem to jQuery plugin , ale nie jestem pewien, czy to najlepszy sposób. Na pewno używam jQuery w większości moich projektów, więc nie martwię się o aspekt jQuery...
W każdym razie pytanie: czy ktoś może mi pokazać działający przykład tej wtyczki jQuery? Mam problemy, żeby to zadziałało...
Czy ktoś zna jakieś lepsze alternatywy, które mogłyby działać w przeglądarce?
Aktualizacja po odpowiedziach :
Dziękuję wszystkim za odpowiedzi! Wypróbowałem kod wysłany proszę.: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html
Ale nie mogłem tego zrobić z IE. Poniższy kod działa dobrze w Firefoksie, ale w IE nic nie robi. W Firefoksie za każdym razem, gdy watcher.status
jest zmieniany, wywoływany jest document.write()
w watcher.watch()
i możesz zobaczyć wyjście na stronie. W IE tak się nie dzieje, ale widzę, że watcher.status
aktualizuje wartość, ponieważ ostatnie wywołanie document.write()
pokazuje poprawną wartość (zarówno w IE, jak i w FF). Ale, jeśli oddzwanianie funkcja nie jest wywoływana, to jest trochę bezcelowe... :)
var options = {'status': 'no status'},
watcher = createWatcher(options);
watcher.watch("status", function(prop, oldValue, newValue) {
document.write("old: " + oldValue + ", new: " + newValue + "<br>");
return newValue;
});
watcher.status = 'asdf';
watcher.status = '1234';
document.write(watcher.status + "<br>");
7 answers
(Sorry za cross-posting, ale ta odpowiedź, którą dałem na podobne pytanie działa dobrze tutaj)
Stworzyłem mały obiekt.oglądaj shim za to jakiś czas temu. Działa w IE8, Safari, Chrome, Firefox, Opera, itp.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-27 08:00:11
Ta wtyczka po prostu używa timera / interwału do wielokrotnego sprawdzania zmian w obiekcie. Może wystarczająco dobre, ale osobiście chciałbym więcej bezpośredniości jako obserwator.
Oto próba sprowadzenia watch
/unwatch
do IE: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html .
To zmienia składnię z Firefoksa sposób dodawania obserwatorów. Zamiast:
var obj = {foo:'bar'};
obj.watch('foo', fooChanged);
Robisz:
var obj = {foo:'bar'};
var watcher = createWatcher(obj);
watcher.watch('foo', fooChanged);
Nie tak słodko, ale jako obserwator jesteś / align = "left" /Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-22 21:16:33
Aktualna Odpowiedź
Użyj nowego obiektu Proxy , który może obserwować zmiany w jego obiekcie docelowym.
let validator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('The age is not an integer');
}
if (value > 200) {
throw new RangeError('The age seems invalid');
}
}
// The default behavior to store the value
obj[prop] = value;
// Indicate success
return true;
}
};
let person = new Proxy({}, validator);
person.age = 100;
console.log(person.age); // 100
person.age = 'young'; // Throws an exception
person.age = 300; // Throws an exception
Stara odpowiedź z 2015
Mogłeś użyć obiektu.observe() from ES7 . Oto polyfill. Ale Obiekt.funkcja observe() została anulowana . Przepraszam ludzi!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-19 08:21:47
Odpowiedzi na to pytanie są trochę nieaktualne. obiekt.obserwuj i obiekt.observe są przestarzałe i nie powinny być używane.
Dzisiaj możesz użyć obiektu Proxy do monitorowania (i przechwytywania) zmian wprowadzonych w obiekcie. Oto podstawowy przykład:
var targetObj = {};
var targetProxy = new Proxy(targetObj, {
set: function (target, key, value) {
console.log(`${key} set to ${value}`);
target[key] = value;
}
});
targetProxy.hello_world = "test"; // console: 'hello_world set to test'
Jeśli chcesz obserwować zmiany dokonane w zagnieżdżonym obiekcie, musisz użyć specjalistycznej biblioteki, takiej jak obserwowalna Szczupła który działa tak:
var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
console.log(JSON.stringify(changes));
});
p.testing.blah = 42; // console: [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-14 05:04:59
Zauważ, że w Chrome 36 i wyższych można użyć Object.observe
też. W rzeczywistości jest to część przyszłego standardu ECMAScript, a nie Funkcja specyficzna dla przeglądarki, jak Mozilla Object.watch
.
Object.observe
działa tylko na właściwościach obiektu, ale jest o wiele bardziej wydajny niż Object.watch
(co jest przeznaczone do debugowania, a nie do użytku produkcyjnego).
var options = {};
Object.observe(options, function(changes) {
console.log(changes);
});
options.foo = 'bar';
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-16 12:27:29
Możesz użyć obiektu.defineProperty .
Obserwuj obiekt bar
w foo
Object.defineProperty(foo, "bar", {
get: function (val){
//some code to watch the getter function
},
set: function (val) {
//some code to watch the setter function
}
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-02 13:20:59
Myślę również, że teraz najlepszym rozwiązaniem jest użycie zegarka.JS, znajdź fajny samouczek tutaj: słuchaj / obserwuj zmiany obiektów lub tablic w Javascript (Zdarzenie zmiany właściwości w obiektach Javascript)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-14 15:33:30