1

他のリスナーを失うことなく、変数またはオブジェクト プロパティに設定された値をリッスンするにはどうすればよいですか。

例えば

var myModel;
myModel = 10;
var myListener1 = function(oldVal, newVal) {
    //do stuff
}
var myListener2 = function(oldVal, newVal) {
    //do other stuff
}

ここでは、変数 myModel に値が設定されるたびに myListener1 と myListener2 が呼び出されるようにします。後で他の関数がセッターの myModel に別のリスナーを追加したい場合があるため、既存のリスナーをオーバーライドしないでください。

Object.defineProperty() でそれを行う方法があるはずです。また、IE8+ 向けのソリューション クロス ブラウザがあるとよいでしょう。

4

2 に答える 2

4

次のメソッドでは、プロパティを持つオブジェクトを使用する必要がありますが、機能します。

// this is very similar to using Object.watch()
// instead we attach multiple listeners
var myModel = (function () {
    var actualValue,
        interceptors = [];

    function callInterceptors(newValue) {
        for (var i = 0; i < interceptors.length; i += 1) {
            interceptors[i](newValue);
        }
    }

    return {
        get value() {
            // user never has access to the private variable "actualValue"
            // we can control what they get back from saying "myModel.value"
            return actualValue;
        },

        set value(newValue) {
            callInterceptors(newValue);
            actualValue = newValue;
        },

        listen : function (fn) {
            if (typeof fn === 'function') {
                interceptors.push(fn);
            }
        }
    };
}());

// add a listener
myModel.listen(function (passedValue) {
    alert('You tried to set myValue to ' + passedValue);
});

// add another listener
myModel.listen(function (passedValue) {
    alert('AAARRG! Why did you modify that value to ' + passedValue + '?!?!');
});

// our functions are called when we
// modify our value
myModel.value = 10;

jsFiddle の例

于 2013-10-09T22:59:14.200 に答える
0

関数を介してのみ値を変更してmyModel、変更の前後にリスナー関数を実行できるようにします。

var myModel = 10,
    myListener1 = function(oldVal, newVal) {
      // do stuff
    },
    myListener2 = function(oldVal, newVal) {
     // do other stuff
    },
    changeMyModel = function (value) {
      myListener1(myModel, value);
      myListener2(myModel, value);
      myModel = value;
      // do more stuff 
    };

   // changeMyModel(99) === myModel; true

また

   var change = function (value) {
      myListener1(myModel, value);
      myListener2(myModel, value);
      return value;          
   };
   // myModel = change(45);
于 2013-10-09T02:22:30.927 に答える