Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve js refactoring". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve js refactoring" can help you solve the problem.

Train of thought:

Create the EmitterTarget class and the EmitterEvent class.

The EmitterTarget class mainly uses the mediation pattern + observer mode.

The instantiation property list of the EmitterTarget class acts as an intermediary, registering the event name and trigger function for the instantiated object of the EmitterTarget class whenever the add method is executed, and removing the registered event and trigger function from the list list whenever the object executes the remove method

The main purpose of the dispatchEvent method is to send the event object ontology in order to trigger the event function and pass the data parameters at a specified time.

The instantiated object of the EmitterTarget class is itself an observer, which is characterized by an add,remove, a function that triggers a change (update or dispatchEvent here), and a property or singleton object that should be used to store registration information.

The = = EmitterEvent class is mainly used to create the event object itself, declaring the types of events that need to be triggered and the parameters that need to be carried.

The EmitterTarget.ts code is as follows:

Import EmitterEvent from ". / EmitterEvent"

Interface IEvent {/ / intermediaries are list data specification interfaces that store events bound by instantiated objects

[key:string]: Array;//key is the event name, and value is the array of trigger event functions.

}

Export default class EmitterTarget {

Private list:IEvent= {}; / / private variable list, which is only used for method internal data store communication

Constructor () {

}

Public addEventListener (type:string,handler:Function): void {

If (! this.list [type]) this.list [type] = []; / / determine whether the event type is registered in the list list according to the event type passed in the instantiated object, and if not, create this field

Var index= this.list.indexOf (handler); / / check whether this trigger function exists in the array of trigger functions bound in the corresponding event.

If (index >-1) this.list [type] [index] = handler;// is overwritten if present

This.list [type] .push (handler); / / if the trigger function is not previously triggered, add it to the trigger function array bound to the corresponding event.

}

Public removeEventListener (type:string,handler?:Function): void {

If (! this.list [type]) return;// if there is no event registration in the list registry, deletion is meaningless and returns directly

If (handler===undefined) {/ / if the method is called without passing the trigger function corresponding to the event type, delete all the trigger functions corresponding to the event type directly

For (var iTuno Bandi)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.