Object.watch() が非推奨になった後も、ブラウザ間でオブジェクトの変更を監視できますか?

Object.watch() によるクロスブラウザーのオブジェクト変更監視

質問: 監視する方法はありますか? Object.watch() の非推奨にもかかわらず、オブジェクトは複数のブラウザ間で一貫して変更されますか?

「pseudoecstatic」からの回答:

はい、単純な Object.watch を開発しました。 () IE8、Safari、Chrome、Firefox、Opera、その他の一般的なブラウザ間でシームレスに動作する shim。

実装:

プロジェクトに次の shim を含めます。

<code class="javascript">(function () {
  var toString = Object.prototype.toString,
    isNative = function (obj) {
      return toString.call(obj) === '[object Object]';
    },
    attachListener = function (target, prop, fn) {
      target.__watchers__ || (target.__watchers__ = {});
      target.__watchers__[prop] || (target.__watchers__[prop] = []);
      target.__watchers__[prop].push(fn);
    },
    detachListener = function (target, prop, fn) {
      if (target.__watchers__ && target.__watchers__[prop]) {
        var watchers = target.__watchers__[prop];
        for (var i = 0; i < watchers.length; i++) {
          if (watchers[i] === fn) {
            watchers.splice(i, 1);
            if (watchers.length === 0) {
              delete target.__watchers__[prop];
            }
            break;
          }
        }
      }
    },
    getWatchers = function (target, prop) {
      if (target.__watchers__ && target.__watchers__[prop]) {
        return target.__watchers__[prop];
      }
      return [];
    },
    notifyWatchers = function (target, prop, oldValue, newValue) {
      var watchers = getWatchers(target, prop);
      for (var i = 0; i < watchers.length; i++) {
        try {
          var newval = watchers[i](prop, oldValue, newValue);
          if (isNative(newval)) {
            newValue = newval;
          }
        } catch (e) {
          setTimeout(function () {
            throw e;
          }, 0);
        }
      }
      return newValue;
    },
    convert = function (prop, fn, target, rec) {
      var orig = target[prop];
      Object.defineProperty(target, prop, {
        configurable: true,
        enumerable: true,
        get: function () {
          return orig;
        },
        set: function (value) {
          if (orig !== value) {
            var oldval = orig;
            orig = notifyWatchers(target, prop, orig, value);
            fn(prop, oldval, orig, target);
          }
        }
      });
      if (rec && isNative(orig)) {
        for (var subprop in orig) {
          convert(subprop, fn, orig, rec);
        }
      }
    },
    watch = function (target, prop, fn, rec) {
      if (!target || typeof prop !== 'string' || typeof fn !== 'function') {
        throw new Error('Bad arguments');
      }
      attachListener(target, prop, fn);
      fn(prop, target[prop], target[prop], target);
      if (rec && isNative(target[prop])) {
        for (var p in target[prop]) {
          convert(p, fn, target[prop], true);
        }
      }
    },
    unwatch = function (target, prop, fn) {
      if (!target || typeof prop !== 'string') {
        throw new Error('Bad arguments');
      }
      detachListener(target, prop, fn);
    },
    constrained = function (val, defval) {
      if (val !== null && val !== undefined) {
        return val;
      } else {
        return defval;
      }
    },
    watchEvery = function (obj, fn, rec) {
      rec = constrained(rec, false);
      for (var p in obj) {
        convert(p, fn, obj, rec);
      }
    },
    stopWatchingEvery = function (obj, fn) {
      for (var p in obj) {
        unwatch(obj, p, fn);
        delete obj.__watchers__[p];
      }
    };
  Object.watch = watch;
  Object.unwatch = unwatch;
  Object.watchEvery = watchEvery;
  Object.stopWatchingEvery = stopWatchingEvery;
})();</code>

使用法:

次のように Object.watch() シムを使用できるようになりました:

<code class="javascript">var options = {'status': 'no status'},
watcher = Object.watch(options, 'status', function (prop, oldValue, newValue) {
  // Do something with the change...
});

watcher.status = 'asdf';
watcher.status = '1234';</code>

Cross -ブラウザ互換性:

このシムにより、Object.watch() 機能がネイティブにサポートしていないブラウザを含むすべての主要なブラウザ間で一貫していることが保証されます。

以上がObject.watch() が非推奨になった後も、ブラウザ間でオブジェクトの変更を監視できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。