preface

I was recently given the task of writing a color picker in the form of a third-party library and importing wangEditor to optimize the current font color and background color functionality of wangEditor.

I’ve defined some terms just to make it easier to understand

One: preparation

Here I use TypeScript + Webpack for the development of the extension library (learn to use), the specific configuration process will not be described. If necessary, the chore branch can be used by pulling it directly on GitHub, which is a clean branch.

Two: analyze the function

Internal events are mainly used to support the internal events of the color picker. I have recently learned some data structures and patterns and plan to put them to use.

Those of you who have used color pickers should have some experience:

  • When the gamut slider is dragged, our color palette, transparency bar, preview box, and output box are all updated synchronously
  • As the color slider drags, our transparency bar, preview box, and output box are all updated synchronously
  • As the transparency slider drags, both our preview box and output box are updated synchronously

Combine the above three points to draw a diagram and define the internal change event

As can be seen from the figure, the execution order of change is certain. In order to ensure the accuracy of the order, ordinary publish and subscription no longer meet the requirements, so I think of the event priority, which is the main content of today.

1. Summarize the knowledge points involved in this lecture:

  • Priority queues (for those of you who are tired of watching them)
  • Publish subscriptions (some of you are sick of it)
  • Array traversal (tired of watching)
  • TypeScript generic
  • TypeScript enumeration

Build a priority queue using TypeScript generics

There are a few tricks to writing a priority queue that can be used anywhere, but the most inefficient one is that it’s used there and defined there, which is how I originally wrote it (don’t learn), like this:

Later on, you might write something like this (don’t learn it either), but there’s no need to go all the way around it!

I can just write it like this

Array traversal

In publish-subscribe mode, we need to iterate over the bound event callback function. However, the forEach of array cannot meet our needs, so we need to customize a forEach.

ForEach: Array.prototype.forEach:

  • Traversal cannot be aborted
  • The traversal cannot delete an element, because if it does, it creates the illusion of an index jump, with an element not executed in the middle.

Combined with the above two points, we can encapsulate as follows:

Optimize traversal functions with TypeScript enumerations

Did we feel like we were done when we wrote our custom forEach, but we weren’t? When you use it, you need to remember the corresponding status code to use it properly, and if you forget it, you have to consult the code or documentation. And when used, returning the status code number will confuse the reader, as follows:

If you don’t remember what returning 0 is for, you might be confused. This reduces the readability of your code. If we implement this:

Now it’s easier to read the same code again. With good comments, it’s not too easy to read the code.

Note that I used if… else… And not switch. You can think about why

5, support priority defined publish subscription

There’s nothing to be said for this, except to replace publish and subscribe data management with priority queues. However, publication subscriptions that support priority definition can define more EMIT apis than regular publication subscriptions. Examples include emitLessThan, emitEqual, emitGreaterThan,……

I have summarized the following functions that need to be completed in publishing and subscribing for your reference:

  • Normal event binding: on
  • One-time event binding: once
  • Event unbinding: off
  • Publish the event: emit
  • Publish events less than the specified level: emitLessThan
  • Event clearing/All unbinding: clear [Optional]

Three: the final code

Refer to the article

Data structures that Web development should know about

Have you mastered the nine common design patterns

Observer vs. subscription publishing

conclusion

This is just my practice as a front-end novice, if there are mistakes welcome correction.