First, let me talk about the inspiration of tapable design

  • I think it’s an inherited design pattern that I’m using, and this time I have a serious understanding of the inherited design pattern, which is essentially pulling out the common code.

  • When a subclass calls a method, this.xxx(), which does not define that method, will go to the parent XXX method, and this will be the subclass this. It’s like pulling the code out of the common code, and subclasses have methods that have a parent class.

  • There’s a phrase that’s been very popular in recent years, that composition is better than inheritance, and composition is also a design for pulling out common code.

See through to flexible application. Consider these two design patterns when you encounter common code in the future.

Post the demo code

class Parent {
  constructor() {
    this.name = 'Parent';
  }

  xxx() {
    console.log(this.name);/ / output Child
    this.goToChild();ChildInstance = childInstance; // This is childInstance
  }
  
  goToChild() {
    console.log(this.name); }}class Child extends Parent{
  constructor() {
    super(a)this.name = 'Child';
  }

  goToChild() {
    console.log(this.name); }}const childInstance = new Child();
childInstance.xxx();

Copy the code

Similarities and differences between Tapable and publish subscriptions

  • The principle is the same, it’s all stored and then executed.
  • When someone else saves a function for you and calls it for you, the concept of synchronous asynchronous hooks is typical. Recently, I have seen that the reason is that the function saved for you can have asynchronous operations, such as network requests. So when the library does it for you, you don’t know when your function is done. Hence the concept of synchronous asynchronous hooks.
  • There are two kinds of asynchrony: the function returns promise, and the function doesn’t return PROMis, but it does have asynchronous logic. To illustrate the order in which these functions are executed, the concept comes back: asynchronous parallelism (promise version: works like promise.all, non-Promise version: A typical next approach), asynchronous serial (sequential execution of one promise after another by adding a successful callback to a single promise[I] and then a successful callback to the next promise[I +1] ‘s THEN)
  • The basic thing about photoshop is that the function this comes out of new Funtion is the global object.

Post a demo of the promise

const f1 = () = > {
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      console.log('1');
      resolve()
    }, 1000)})}const f2 = () = > {
  return new Promise((resolve, reject) = > {
    setTimeout(() = > {
      console.log('2');
      resolve()
    }, 1000)})}const arr = [f1, f2];
const resultPromise = arr.reduce((prev, next) = > prev().then(() = > next()))
Copy the code
  • Difference: When executing publish subscription, it iterates through the previously stored functions, which are executed sequentially. Publish subscription has eventName. Tapable, on the other hand, uses classes directly to distinguish between the types of trigger functions.
  • New Function(‘param1,param2’, ‘arr[I](param1,param2)’); It doesn’t feel like it’s optimized enough. It’s not obvious why they did it. Strange. If anyone knows, please let me know.
  • Again, vue’s computing properties are known to all, native JS is also supported, and also with caching. It’s often used by bigwigs as a performance optimization point.

Next comes the note of the brick.

  • Synchronous asynchronous perspective classification:

  • Return value classification Basic: Executes each event function. If the return value is not undefined, it will directly end and stop executing the next Waterfall function. If the return value is not undefined, it will pass the return value to the next function to be executed. If the parameter Loop is: Execute event function over and over again until all function result === undefined.

  • There are also interceptor, stage, before, and hookMap interceptor, which provides functions that are fired when a TAB or call is received. HookMap provides the same kind of hooks. Stage is used to sort the hooks of a TAB. Sorting determines the order in which the hooks are executed