Object.watch () для всех браузеров?

Обратите внимание, что Object.Watchи Object.Observeоба являются устаревшими (по состоянию на июнь 2018 г.).

Я искал простой способ отслеживать изменения объекта или переменной и обнаружил Object.watch(), что он поддерживается браузерами Mozilla, но не IE. Так что я начал искать, не написал ли кто-нибудь что-нибудь эквивалентное.

Единственное, что я нашел, это плагин jQuery , но я не уверен, что это лучший способ. Я, конечно, использую jQuery в большинстве своих проектов, поэтому меня не беспокоит аспект jQuery ...

В любом случае, вопрос: может ли кто-нибудь показать мне рабочий пример этого плагина jQuery? У меня проблемы с его работой ...

Или кто-нибудь знает какие-нибудь лучшие альтернативы, которые будут работать в кросс-браузере?

Обновление после ответов :

Спасибо всем за ответы! Я попробовал код, размещенный здесь: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html

Но я не мог заставить его работать с IE. Приведенный ниже код отлично работает в Firefox, но ничего не делает в IE. В Firefox каждый раз при watcher.statusизменении вызывается document.write()in, watcher.watch()и вы можете увидеть результат на странице. В IE этого не происходит, но я вижу, что watcher.statusпроисходит обновление значения, потому что последний document.write()вызов показывает правильное значение (как в IE, так и в FF). Но, если функция обратного вызова не вызывается, это бессмысленно ... :)

Я что-то упускаю?

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>");

(Извините за перекрестную публикацию, но этот ответ, который я дал на аналогичный вопрос, здесь отлично работает)

Некоторое время назад я создал для этого небольшую прокладку object.watch . Он работает в IE8, Safari, Chrome, Firefox, Opera и т. Д.

Этот плагин просто использует таймер / интервал для многократной проверки изменений объекта. Может быть, достаточно хорошо, но лично я хотел бы больше непосредственности в качестве наблюдателя.

Вот попытка перенести watch/ unwatchв IE: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html .

Он действительно меняет синтаксис способа добавления наблюдателей в Firefox. Вместо того :

var obj = {foo:'bar'};
obj.watch('foo', fooChanged);

Вы делаете:

var obj = {foo:'bar'};
var watcher = createWatcher(obj);
watcher.watch('foo', fooChanged);

Не так мило, но как наблюдатель вы сразу же получите уведомление.

Ответы на этот вопрос немного устарели. Object.watch и Object.observe устарели и не должны использоваться.

Сегодня вы можете использовать объект Proxy для отслеживания (и перехвата) изменений, внесенных в объект. Вот простой пример:

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'

Если вам нужно наблюдать за изменениями, внесенными во вложенный объект, вам необходимо использовать специализированную библиотеку. Я опубликовал Observable Slim, и он работает так:

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}}]

Текущий ответ

Используйте новый объект Proxy , который может отслеживать изменения своей цели.

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

Старый ответ от 2015 года

Вы могли использовать Object.observe () из ES7 . Вот полифилл. Но Object.observe () теперь отменен . Простите народ!

Обратите внимание, что в Chrome 36 и выше вы также можете использовать Object.observe. Фактически это часть будущего стандарта ECMAScript, а не специфическая для браузера функция, такая как Mozilla Object.watch.

Object.observeработает только со свойствами объекта, но намного более производительно, чем Object.watch(который предназначен для целей отладки, а не для производственного использования).

var options = {};

Object.observe(options, function(changes) {
    console.log(changes);
});

options.foo = 'bar';

вы можете использовать Object.defineProperty .

смотреть собственность barв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
  }
})

Я использовал Watch.js в одном из своих проектов. И она работает нормально. Одно из главных преимуществ использования этой библиотеки:

«С Watch.JS вам не придется менять способ разработки».

Пример приведен ниже

//defining our object however we like
var ex1 = {
	attr1: "initial value of attr1",
	attr2: "initial value of attr2"
};

//defining a 'watcher' for an attribute
watch(ex1, "attr1", function(){
	alert("attr1 changed!");
});

//when changing the attribute its watcher will be invoked
ex1.attr1 = "other value";

<script src="https://cdn.jsdelivr.net/npm/melanke-watchjs@1.5.0/src/watch.min.js"></script>

Это так просто!

Я также думаю, что прямо сейчас лучшим решением является использование Watch.JS, найдите здесь хороший учебник: Слушайте / следите за изменениями объекта или массива в Javascript (событие изменения свойства для объектов Javascript)