About [SSD Series]

This is a series created specifically for the essay campaign in August to collect some interesting or unimportant content, which may be unknown to some of our friends.

preface

The ubiquity of the subscription publishing model, and the perennial handwritten series, shows its status.

In fact, on the browser side, 3 lines of code, yes, 3 lines of code, you can have a subscription publishing center that can subscribe, unsubscribe, publish, and once.

Subscription publishing center of 4 lines of code

Subscribe to publisher center code

window._on = window.addEventListener;
window._off = window.removeEventListener;
window._emit = (type, data) = > window.dispatchEvent(new CustomEvent(type, { detail: data }));;
window._once = (type, callback) = > window.addEventListener(type, callback, { once: true.capture: true });
Copy the code

It’s ok to have a header of 3 lines. Combine the two lines:

(window._on = window.addEventListener, window._off = window.removeEventListener);
Copy the code

The test code

function onEventX(ev) {
    console.log(Event-x received data:, ev.detail);
}
​
/ / subscribe
window._on("event-x", onEventX);
window._once("event-once".ev= > console.log(Event-once received data:, ev.detail));
​
// once
window._emit("event-once", { uid: -100.message: "you love me" });
window._emit("event-once", { uid: -100.message: "you love me" });
// Subscribe and unsubscribe
window._emit("event-x", { uid: 100.message: "i love you" })
window._off("event-x", onEventX);
window._emit("event-x", { uid: 100.message: "i love you" })
Copy the code

The output

It’s a little surprising.

The principle of the author

Window is the representation, the root is EventTarget.

It has three methods that make it a subscription publishing center:

  • EventTarget. AddEventListener () register specific events on the EventTarget types of event handlers.

  • EventTarget. RemoveEventListener () removes the event listener EventTarget.

  • EventTarget. DispatchEvent () event dispatch to the EventTarget.

Window:

Document inheritance:

Element’s inheritance:

So the Document and Window objects are both a subscription publishing center.

More importantly, we often use div, span, input and so on nodeType 1 element node, is also a subscription publishing center.

If you don’t know the nodeType, see node.nodeType.

The current version is faulty

  1. You can’t multi-instantiate
  2. It’s ugly to mount a window
  3. No more parameters. A: Why do you need so many parameters
  4. The parameter is taken from ev.detail. A: Fine
  5. It can’t be used in node or Web worker. Web workers, yes.
  6. .

At this point, I’m not angry, I’m not really angry, I’m just going to solve a particular problem in a particular scenario. 10 cents still want to heaven.

But even for 10 cents, I want people to have a better experience, so upgrade.

Forget about 3 and beyond, let’s upgrade 1,2 perfectly.

upgrade

It’s going to be a little bit more code, twice as much code, six lines of code.

code

class EventEmitter extends EventTarget {
    on = this.addEventListener;
    off = this.removeEventListener;
    emit = (type, data) = > this.dispatchEvent(new CustomEvent(type, { detail: data }));
    once = (type, callback) = > this.on(type, callback, { once: true.capture: true });
}
Copy the code

The test code

        var emitter = new EventEmitter();
        function onEventX(ev) {
            console.log(Event-x received data:, ev.detail);
        }
​
        / / subscribe
        emitter.on("event-x", onEventX);
        emitter.once("event-once".ev= > console.log(Event-once received data:, ev.detail));
​
        / / release
        emitter.emit("event-once", { uid: -100.message: "you love me" });
        emitter.emit("event-once", { uid: -100.message: "you love me" });
​
        emitter.emit("event-x", { uid: 100.message: "i love you" })
        emitter.off("event-x", onEventX);
        emitter.emit("event-x", { uid: 100.message: "i love you" })
Copy the code

Perfect, nice name, easy to use, and support for multiple instances.

The results of

conclusion

Is it simple? In fact, you can also have a subscription publishing center without a third-party library. It’s that simple.

If everyone sees this and doesn’t like it, then you’re wrong.