2013-03-28 2 views
3

자바 스크립트에서 객체 관찰자를 만들려고합니다. 이 관찰 할 수있는 더 좋은 방법이있다,자바 스크립트 객체를 관찰하려고 시도했습니다.

//object to observe an object 
     observe : { 
      parent : this, //keep context of parent 
      references : {}, //keep track of setted references 
      originals : {}, // also for the originals 
      callStack : 0, // trying to prevent the callstack 

      // set an object to observe.. 
      setObject : function (name, object){ 
       this.references[name] = object; 
       //app.utils.extendObject is a working object extending function. 
       this.originals[name] = app.utils.extendObject(new Object , object); 
       //start watching the object 
       this.watchObject(name); 
      }, 

      watchObject : function (referenceName){ 
       this.callStack++; 
       //walk through reference 
       for(prop in this.references[referenceName]){ 
        // if the reference differs from the original... 
        if(this.references[referenceName][prop] !== this.originals[referenceName][prop] ){ 
         //... log the differance 
         console.log(referenceName + " with property " + prop + " has changed."); 
        } 
       } 
       // set variable with call to this function 
       var func = eval("app.utils.observe.watchObject(" + referenceName + ")"); 

       //read somewhere this could do the trick 
       if(callStack == 1000){ 
        setTimeout(func , 100); 
       } 
       func(); 

      } 

     } 

문제는 호출 스택 오류입니다 :

이것은 지금까지 내가 먹을수록입니까? Ofcourse 저는 현재 Chrome에서 Object.observe를 사용할 수 있지만 크로스 브라우저 솔루션을 원합니다.

도움을 주시면 감사하겠습니다.

답변

1

코드를 약간 수정했으며 watchObject 메서드에 callback 함수가 추가되었습니다. 변경 내용을 듣고 몇 가지 작업을 수행하려는 경우 유용합니다.

watchObject: function (referenceName, callback) { 
    for (prop in this.references[referenceName]) { 
     if (this.references[referenceName][prop] !== this.originals[referenceName][prop]) { 
      console.log(referenceName + " with property " + prop + " has changed."); 
      callback && callback.call(this.references[referenceName], this.originals[referenceName][prop], this.references[referenceName][prop]); 
      this.originals[referenceName][prop] = this.references[referenceName][prop]; 
     } 
    } 
} 

플러스 나는 setObjectsetInterval 배치 :

var self = this; 
setInterval(function() { 
    self.watchObject(name, callback); 
}, 300); 

http://jsfiddle.net/59Fnt/1/

+0

헤이 덕분에 빠른 응답을 위해! 이 바인딩 기능은 정확히 무엇입니까? 콜백 && 콜백 행에 대한 설명도 있습니다. 나는 그것이 작동하는 것을 본다, 그것은 위대하다! – HerrWalter

+0

실제로'bind'는 필요하지 않습니다. 나는 코드를 업데이트했습니다. – dfsq

+0

편집 내용이 맞습니다! – HerrWalter

관련 문제