object.watch()를 모든 브라우저에 적용하시겠습니까?

object.watch()를 모든 브라우저에 적용하시겠습니까?

및 둘 다 현재(2018년 6월 기준) 감가상각되었음을 유의하시기 바랍니다.

---

객체나 변수의 변화를 쉽게 모니터링할 수 있는 방법을 찾고 있었는데,Object.watch(), 모질라 브라우저에서는 지원되지만 IE에서는 지원되지 않습니다.그래서 나는 누군가가 그에 상응하는 글을 썼는지 알아보기 위해 여기저기를 뒤지기 시작했습니다.

제가 찾은 것은 jQuery 플러그인뿐인데, 그게 최선의 방법인지 잘 모르겠습니다.저는 대부분의 프로젝트에서 jQuery를 사용하기 때문에 jQuery 측면에 대해서는 걱정하지 않습니다.

어쨌든, 질문: 누가 그 jQuery 플러그인의 작동 예를 보여줄 수 있습니까?작동시키는 데 문제가 있어요

아니면 브라우저를 통해 작동할 수 있는 더 나은 대안을 아는 사람이 있습니까?

답변 후 업데이트:

답변해주신 모든 분들께 감사드립니다!나는 여기에 게시된 코드를 시도해 보았습니다: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html

하지만 IE와 함께 일을 할 수는 없는 것 같습니다.아래 코드는 Firefox에서는 잘 작동하지만 IE에서는 작동하지 않습니다.파이어폭스에서는 매번watcher.status변경되었습니다.document.write()인에watcher.watch()가 호출되며 페이지에서 출력을 볼 수 있습니다.IE에서는 그런 일이 일어나지 않지만, 나는 알 수 있습니다.watcher.status값을 업데이트하고 있습니다. 왜냐하면 마지막이document.write()call은 정확한 값(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>");

(교차 게시해서 죄송합니다만, 비슷한 질문에 제가 드린 답변은 여기서도 잘 됩니다.)

작은 개체를 만들었습니다.아까 이거 좀 봐주세요.IE8, 사파리, 크롬, 파이어폭스, 오페라 등에서 작동합니다.

이 플러그인은 단순히 타이머/인터벌을 사용하여 개체의 변경 사항을 반복적으로 확인합니다.아마도 충분히 좋지만, 개인적으로 관찰자로서 좀 더 신속성을 갖고 싶습니다.

여기에 그들을 데려오려는 시도가 있습니다.watch/unwatchIE: http://webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html 로 이동합니다.

파이어폭스의 관찰자 추가 방식에서 구문을 변경합니다.대신:

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

사용자:

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

달갑지는 않지만 관찰자로서 즉시 통지를 받습니다.

이 질문에 대한 답은 좀 구식입니다.오브젝트.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;
      return true;
  }
});

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년의 오래된 답변

ES7의 Object.observe()를 사용할 수도 있었습니다.여기 폴리필이 있습니다.그러나 Object.observe()가 취소되었습니다.죄송합니다 여러분!

Chrome 36 이상에서도 사용이 가능합니다.이것은 사실 미래의 ECMA스크립트 표준의 일부이며 Mozilla의 것처럼 브라우저에 특화된 기능이 아닙니다.Object.watch.

Object.observe체만다씬이다만다이yea보다 훨씬 성능이 .Object.watch(이는 프로덕션 용도가 아닌 디버깅 목적을 의미합니다.)

var options = {};

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

options.foo = 'bar';

Object.definProperty를 사용할 수 있습니다.

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를 사용한 적이 있습니다.그리고 잘 작동하고 있습니다.이 라이브러리를 사용하는 주된 장점 중 하나는 다음과 같습니다.

"With 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>

이렇게 간단해요!

이거 나한테 효과가 있어요.

 $('#img').hide().attr('src', "path/newImage.jpg").fadeIn('slow');

저는 또한 현재 가장 좋은 해결책은 Watch를 사용하는 것이라고 생각합니다.JS, 여기 좋은 튜토리얼 찾아보세요: 자바스크립트에서 객체 또는 배열 변경 듣기/보기 (자바스크립트 객체에서 속성 변경 이벤트)

언급URL : https://stackoverflow.com/questions/1029241/object-watch-for-all-browsers