모든 브라우저에서 Object.watch ()?

있음을 유의하시기 바랍니다 Object.Watch그리고 Object.Observe모두 (2018년 6월 현재) 현재 사용되지 않습니다.

개체 또는 변수의 변경 사항을 모니터링 할 수있는 쉬운 방법을 찾고 있었는데, 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 shim 을 만들었습니다 . 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 는 모두 더 이상 사용되지 않으며 사용해서는 안됩니다.

이제 이제 프록시 개체를 사용하여 개체에 대한 변경 사항을 모니터링 (및 차단) 할 수 있습니다 . 다음은 기본적인 예입니다.

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

현재 답변

대상의 변경 사항을 볼 수 있는 새 프록시 개체를 사용합니다 .

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 년의 이전 답변

ES7에서 Object.observe ()를 사용할 수 있습니다 . 여기 polyfill이 있습니다. 그러나 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를 사용하는 것이라고 생각합니다. 여기에서 멋진 자습서를 찾으십시오. Listen / Watch for object or array changes in Javascript (Property changed event on Javascript objects)