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

This article shows you how to use JavaScript design patterns in the introduction and framework, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

In the process of writing JS and assembling code, using certain design patterns can make our code more elegant and flexible.

Below, the author will combine the subsscribe of redux, the class of ES6, the $dispatch of vue, and the on/off of jquery to briefly introduce the use of design patterns in these libraries, syntax and frameworks.

Problems solved by design patterns

Design pattern is not a very mysterious knowledge, many students have inadvertently used a lot of design patterns when writing JS code.

The author thinks that abstracting the design pattern separately is to describe a commonly used JS pattern, just like bubbling and sorting in the algorithm.

By studying this kind of pattern, let patterns guide our code structure and JS algorithm.

An overview of some commonly used design patterns

Observer [Observer Mode]

Actively trigger the callback behavior of observer queue and hashMap according to the change of state

A simple Observer Mode Code practice

Class StateTracker {constructor () {this.observers = []; this.internamState= 10;} / change the internal state and trigger the observer list of the state change (val) {this.internamState= val; this.observers.forEach (observer= > observer (val)) } registerObserver (ObserverFn) {this.obserers.push (ObserverFn)}}

Publish/subscribe [subscription Publishing Mode]

The topic/callback form of hashMap is stored in the shared access space of the code module.

Add on/off/trigger and other APIs to mount, remove, trigger and other actions.

A simple code practice for subscribing to publishing patterns

Class PubSubHandler {constructor () {this.eventPool = {};} / remove off (topicName) {delete this.observers [topicName]} / / publish trigger (topicName,...args) {this.eventPool [topicName] & & this.eventPool [topicName] .forEach (callback= > callback (.args)) } / / subscribe to on (topicName,callback) {let topic = this.eventPool [topicName]; if (! topic) {this.eventPool [topicName] = []} this.eventPool [topicName] .push (callback)}}

Singleton [singleton mode]

There is only one instance of the constructor. Generally, the internal instance is stored through the closure and accessed through the interface.

Var singleton = () = > {var instance; var createInstance = () = > {this.a = 1; this.b = 2;} return {getInstance: () = > {if (! instance) {instance = createInstance ();} return instance } var test = singleton (); test.getInstance () = = test.getInstance () / / true

Decorator mixed mode

The pattern is to decorate more behavior on top of the original object and keep the variable name unchanged. Those who have used ES7 @ decorator or python and other languages should be familiar with decorator.

Function decorator (sourceObj,decortorFn) {decortorFn (sourceObj); return sourceObj} var d = {aVl1}; / / d becomes {aVlv 1} d = decorator (d, (d) = > {d.b=1})

Mixin mixed mode

This pattern is somewhat similar to decorator, except that its function is more vertical. Is to add and overwrite the behavior of the object above the original object. Compared with extends and Object.assign, mixin mode is more expressive. Mixin schemas cannot be generalized, and there may be different mixin strategies according to different data types, such as vue.mixin

Class StateTracker {constructor () {this.raw = {obj 1, 2}} mixin (obj) {Object.assign (this.raw,obj)}}

The author will introduce so many design patterns for the time being, and the following will explain the application of these design patterns according to the commonly used frameworks, syntax, libraries, and so on.

The use of observer mode in redux var store = createStore (reducer,initialState); / / registers redux store, stored in the nextListeners array var test = store.subscribe (() = > {console.log ('I registered!') }); / / unregister listening test.unsubscribe (); use of publish/subscribe in jquery $_ (document) .on ('hello', () = > {console.log (' hello')}) $(document) .trigger ('hello') Practice of $(document) .off ('hello') decorator pattern in react-redux / / decorator @ connect (state= > state) class Container extends Component {render () {return JSON.stringify (this.props)}} the above is how to introduce JavaScript design patterns and use them in the framework. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.