如何在不使用DOM的情况下在javascript中创建自定义事件

Question

我有两个对象。 ObjecA触发event E，ObjectB必须侦听ObjectA (E)触发的事件。 ObjectA仅在其中的属性在运行时更改时才会发送。

提前致谢。

Answer 1

您可以使用pubsub模式

var pubsub = {};

(function(myObject) {

  // Storage for topics that can be broadcast
  // or listened to
  var topics = {};

  // An topic identifier
  var subUid = -1;

  // Publish or broadcast events of interest
  // with a specific topic name and arguments
  // such as the data to pass along
  myObject.publish = function(topic, args) {

    if (!topics[topic]) {
      return false;
    }

    var subscribers = topics[topic],
      len = subscribers ? subscribers.length : 0;

    while (len--) {
      subscribers[len].func(topic, args);
    }

    return this;
  };

  // Subscribe to events of interest
  // with a specific topic name and a
  // callback function, to be executed
  // when the topic/event is observed
  myObject.subscribe = function(topic, func) {

    if (!topics[topic]) {
      topics[topic] = [];
    }

    var token = (++subUid).toString();
    topics[topic].push({
      token: token,
      func: func
    });
    return token;
  };

  // Unsubscribe from a specific
  // topic, based on a tokenized reference
  // to the subscription
  myObject.unsubscribe = function(token) {
    for (var m in topics) {
      if (topics[m]) {
        for (var i = 0, j = topics[m].length; i < j; i++) {
          if (topics[m][i].token === token) {
            topics[m].splice(i, 1);
            return token;
          }
        }
      }
    }
    return this;
  };
}(pubsub));



Implementation:
  // Another simple message handler

  // A simple message logger that logs any topics and data received through our
  // subscriber
  var messageLogger = function(topics, data) {
    console.log("Logging: " + topics + ": " + data);
  };

// Subscribers listen for topics they have subscribed to and
// invoke a callback function (e.g messageLogger) once a new
// notification is broadcast on that topic
var subscription = pubsub.subscribe("inbox/newMessage", messageLogger);

// Publishers are in charge of publishing topics or notifications of
// interest to the application. e.g:

pubsub.publish("inbox/newMessage", "hello world!");

// or
pubsub.publish("inbox/newMessage", ["test", "a", "b", "c"]);

// or
pubsub.publish("inbox/newMessage", {
  sender: "hello@google.com",
  body: "Hey again!"
});

// We can also unsubscribe if we no longer wish for our subscribers
// to be notified
pubsub.unsubscribe(subscription);

// Once unsubscribed, this for example won't result in our
// messageLogger being executed as the subscriber is`enter code here`
// no longer listening
pubsub.publish("inbox/newMessage", "Hello! are you still there?");

Answer 2

你可以使用手表

var a = {"x":5}
a.watch("a", function( prop, oldval, newval ) {
// your event code here
}

注意在Chrome浏览器中无法使用此代码

if ( !Object.prototype.watch ) {
    Object.defineProperty( Object.prototype, "watch", {
        enumerable: false,
        configurable: true,
        writable: false,
        value: function( prop, handler ) {
            var oldval = this[ prop ],
                newval = oldval,
                getter = function() {
                    return newval;
                },
                setter = function( val ) {
                    newval = val;
                    return handler.call( this, prop, oldval, newval );
                };

            if ( delete this[ prop ] ) { // can't watch constants
                Object.defineProperty( this, prop, {
                    get: getter,
                    set: setter,
                    enumerable: true,
                    configurable: true
                });
            }
        }
    });
}