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

This article is to share with you about the Javascript design patterns that front-end engineers must know. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Preface

Design pattern is a necessary skill for a programmer to advance, and it is also a touchstone to judge an engineer's work experience and ability. Design pattern is the concise and summary of programmer's working experience for many years, which can optimize the code and reconstruct the existing code to a greater extent. As a qualified front-end engineer, learning design patterns is another way to summarize and reflect on one's own work experience, and it is also an important means to develop high-quality, high-maintainability and extensible code. We are familiar with several frameworks of Jindian, such as jquery, react, vue, which also use a large number of design patterns, such as observer pattern, proxy pattern, singleton pattern and so on. So as an architect, design patterns must be mastered. In the interview process of middle and senior front-end engineers, the interviewer will also appropriately examine the job seekers' understanding of the design pattern, so the author summarizes and draws the mind map and actual case for javascript design pattern based on years of work experience and learning exploration. Next, let's explore the practice together.

Text

Let's take a look at the overview first. What exactly can design patterns bring us?

The above author mainly summarizes several benefits that the use of design patterns can bring to the project, such as code decoupling, expansibility, reliability, organization and reusability. Next, let's take a look at our first design pattern of javascript.

1. Singleton mode

1.1 Conceptual interpretation

Singleton mode: ensure that there is only one instance for a class, generally judge whether the instance exists, return directly if it exists, create it first and then return if it does not exist, so you can guarantee that a class has only one instance object.

1.2 effect

Communication between modules

Guarantee the uniqueness of the objects of a class

Prevention of variable pollution

1.3 points for consideration

Correct use of this

Closures can easily cause memory leaks, so remove unwanted variables in time

It is more expensive to create a new object

1.4 actual cases

Singleton pattern is widely used in different programming languages, such as computer task manager, recycle bin, website counter, multithreaded thread pool design and so on.

1.5 Code implementation

(function () {/ / Fish farming game let fish = null function catchFish () {/ / if the fish exists, return if (fish) {return fish} else {/ / if the fish does not exist, get the fish and return fish = document.querySelector ('# cat') return {fish Water: function () {let water = this.fish.getAttribute ('weight') this.fish.setAttribute (' weight', + + water)}} / / feed water every 3 hours setInterval (() = > {catchFish (). Water ()}, 3 / 60 / 60 / 1000)})

two。 Constructor mode

2.1 Conceptual interpretation

Constructor pattern: used to create specific types of objects for business logic and functional reuse.

2.2 effect

Create a specific type of object

Logic and business encapsulation

2.3 points for consideration

Pay attention to demarcating the boundaries of business logic

Cooperate with singleton to realize initialization and other work.

Constructor naming convention, the first letter is capitalized

The cost of new objects, putting common methods on the prototype chain

2.4 actual cases

I think the constructor pattern is the pattern of code, and it is also used to test programmers' understanding of business code. It is often used to implement javascript tool libraries, such as lodash and javascript framework.

2.5 Code presentation

Function Tools () {if (! (this instanceof Tools)) {return new Tools ()} this.name ='js tool Library'/ / method of getting dom this.getEl = function (elem) {return document.querySelector (elem)} / / determine whether it is an array this.isArray = function (arr) {return Array.isArray (arr)} / / other general methods.}

3. Builder model

3.1 Conceptual interpretation

Builder model: to realize a complex logic or function step by step through a structured division of labor.

3.2 effect

Distribution creates a complex object or implements a complex function

Decouple the packaging process without paying attention to the details of the creation

3.3 points for consideration

Need to be supported by reliable algorithms and logic

Expose certain interfaces as needed

3.4 actual cases

In fact, the builder model is also used in many fields. The author has also written a lot of js plug-ins before, most of which adopt the builder mode. You can refer to the github of the author's github address Xu Xiaoxi. Other cases are as follows:

Encapsulation of ajax for jquery

Jquery plug-in encapsulation

The design of a specific component of react/vue

3.5 Code presentation

The author will take a previous case of using the builder pattern to implement a graphic CAPTCHA with javascript object-oriented, so let's use the builder pattern to implement a very common CAPTCHA plug-in.

/ / canvas drawing verification code (function () {function Gcode (el, option) {this.el = typeof el = = 'string'? Document.querySelector (el): el; this.option = option; this.init ();} Gcode.prototype = {constructor: Gcode, init: function () {if (this.el.getContext) {isSupportCanvas = true Var ctx = this.el.getContext ('2d'), / / set canvas width and height cw = this.el.width = this.option.width | | 200, ch = this.el.height = this.option.height | | 40, textLen = this.option.textLen | | 4, lineNum = this.option.lineNum | | 4 Var text = this.randomText (textLen); this.onClick (ctx, textLen, lineNum, cw, ch); this.drawLine (ctx, lineNum, cw, ch); this.drawText (ctx, text, ch);}, onClick: function (ctx, textLen, lineNum, cw, ch) {var _ = this This.el.addEventListener ('click', function () {text = _ .drawText (textLen); _ .drawLine (ctx, lineNum, cw, ch); _ .drawText (ctx, text, ch) }, false)}, / / draw interference lines drawLine: function (ctx, lineNum, maxW, maxH) {ctx.clearRect (0,0, maxW, maxH); for (var iTuno; I

< lineNum; i++) { var dx1 = Math.random()* maxW, dy1 = Math.random()* maxH, dx2 = Math.random()* maxW, dy2 = Math.random()* maxH; ctx.strokeStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; ctx.beginPath(); ctx.moveTo(dx1, dy1); ctx.lineTo(dx2, dy2); ctx.stroke(); } }, // 画文字 drawText: function(ctx, text, maxH) { var len = text.length; for(var i=0; i < len; i++) { var dx = 30 * Math.random() + 30* i, dy = Math.random()* 5 + maxH/2; ctx.fillStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; ctx.font = '30px Helvetica'; ctx.textBaseline = 'middle'; ctx.fillText(text[i], dx, dy); } }, // 生成指定个数的随机文字 randomText: function(len) { var source = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; var result = []; var sourceLen = source.length; for(var i=0; i< len; i++) { var text = this.generateUniqueText(source, result, sourceLen); result.push(text) } return result.join('') }, // 生成唯一文字 generateUniqueText: function(source, hasList, limit) { var text = source[Math.floor(Math.random()*limit)]; if(hasList.indexOf(text) >

-1) {return this.generateUniqueText (source, hasList, limit)} else {return text} new Gcode ('# canvas_code', {lineNum: 6}) () (); / / call new Gcode ('# canvas_code', {lineNum: 6})

4. Agent mode

4.1 Conceptual interpretation

Proxy mode: one object controls access to another object in a proxy way.

4.2 function

Remote proxy (the local proxy of one object to another)

Virtual proxy (thumbnails can be used instead of real images when rendering large images of web pages for objects that need to be created with high overhead)

Security proxy (protecting access to real objects)

Cache proxy (some expensive operations provide temporary storage, and if the parameters passed in the next operation are the same as before, you can directly return the previously stored results)

4.3 points for consideration

Using proxies will increase the complexity of the code, so you should choose to use proxies.

Actual case

We can use the proxy pattern to achieve the following functions:

Optimize computing performance by caching proxies

Picture placeholder / skeleton screen / preload, etc.

Merge requests / resources

4.4 Code presentation

Next, we talk about the application of proxy mode by implementing a computing buffer.

/ caching proxy function sum (a, b) {return a + b} let proxySum = (function () {let cache = {} return function () {let args = Array.prototype.join.call (arguments,','); if (args in cache) {return cache [args];} cache [args] = sum.apply (this, arguments) return cache [args]}) ()

5. Appearance mode

5.1 Conceptual interpretation

Appearance pattern (facade): provides a consistent representation of a set of interfaces in the subsystem, making the subsystem easier to use without paying attention to internal complex and tedious details.

5.2 effect

Decouple the interface and the caller.

Create a classic three-tier structure MVC

Reduce the dependence and coupling between different subsystems in the development phase, and facilitate the iteration and expansion of each subsystem.

Provide a clear interface for large and complex systems

5.3 considerations

When the appearance pattern is called continuously by the developer, it will cause a certain performance loss, which is due to the usability test of each call.

5.4 actual cases

We can use appearance patterns to design methods that are compatible with event binding in different browsers and other methods or abstract classes that need to uniformly implement interfaces.

5.5 Code presentation

Next, we implement an event listener function that is compatible with different browsers to let you understand how the appearance pattern is used.

Function on (type,fn) {/ / for supporting dom2-level event handlers if (document.addEventListener) {dom.addEventListener (type,fn,false);} else if (dom.attachEvent) {/ / for ie browsers under IE9 dom.attachEvent ('on'+type,fn);} else {dom [' on'+type] = fn;}}

6. Observer mode

6.1 Conceptual interpretation

Observer mode: defines an one-to-many relationship in which all observers monitor a subject object at the same time, and notify all observers when the state of the subject object changes, so that they can update themselves automatically.

6.2 effect

There is a dynamic association between the target object and the observer, which increases flexibility.

Supports simple broadcast communication and automatically notifies all subscribed objects

The abstract coupling relationship between the target object and the observer can be extended and reused separately.

6.3 points for attention

Observer mode generally needs to listen before triggering (you can also publish before subscribing in special cases, such as QQ offline mode)

6.4 actual cases

The Observer pattern is a very classic design pattern, and its main applications are as follows:

System message notification

Website logging

Content subscription function

Javascript event mechanism

Observers of react/vue, etc.

6.5 Code presentation

Next we use native javascript to implement an observer pattern:

Class Subject {constructor () {this.subs = {}} addSub (key, fn) {const subArr = this.subs [key] if (! subArr) {this.subs [key] = []} this.subs [key] .push (fn)} trigger (key Message) {const subArr = this.subs [key] if (! subArr | | subArr.length = 0) {return false} for (let I = 0, len = subArr.length I

< len; i++) { const fn = subArr[i] fn(message) } } unSub(key, fn) { const subArr = this.subs[key] if (!subArr) { return false } if (!fn) { this.subs[key] = [] } else { for (let i = 0, len = subArr.length; i < len; i++) { const _fn = subArr[i] if (_fn === fn) { subArr.splice(i, 1) } } } } } // 测试 // 订阅 let subA = new Subject() let A = (message) =>

{console.log ('subscriber receives message:' + message)} subA.addSub ('A', A) / release subA.trigger ('A','I'm Xu Xiaoxi') / / A receives message:-- > this is Xu Xiaoxi

7. Strategy mode

7.1 Conceptual interpretation

Policy mode: the strategy mode classifies and encapsulates different algorithms reasonably, so that different algorithms can replace each other without affecting the users of the algorithm.

7.2 effect

The realization is different, the function is the same.

The calling mode is the same, which reduces the use cost and the coupling between different algorithms.

Define the algorithm model separately to facilitate unit testing

Avoid a lot of redundant code judgments, such as if else, etc.

7.3 actual cases

Achieve more elegant form validation

The character scoreboard in the game

The winning or losing algorithm of chess and card games

7.4 Code presentation

Next, we implement a pattern that implements the summation algorithm according to different types to lead you to understand the strategy pattern.

Const obj = {A: (num) = > num * 4, B: (num) = > num * 6, C: (num) = > num * 8} const getSum = function (type, num) {return obj [type] (num)}

8. Iterator mode

8.1 Conceptual interpretation

Iterator pattern: provides a method to access the elements of an aggregate object sequentially, and the consumer does not need to care about the internal representation of the method.

8.2 effect

Provide a unified interface for traversing different collections

Protects the original collection but provides external access to internal elements

8.3 actual cases

The most common cases of iterator pattern are array traversal methods such as forEach, map, reduce.

8.4 Code presentation

Next, the author uses a traversal function encapsulated by himself to make people better understand the use of iterator patterns. This method can traverse not only arrays and strings, but also objects. The _ .forEach (collection, [iteratee=_.identity]) method in lodash is also a typical application of policy pattern.

Function _ each (el, fn = (v, k, el) = > {}) {/ / determine the data type function checkType (target) {return Object.prototype.toString.call (target) .slice (8 Array', String')} / / array or string if (['Array',' String'] .indexOf (checkType (el)) >-1) {for (let item0, len = el.length; I < len) El +) {fn (el [I], I, el)}} else if (checkType (el) = = 'Object') {for (let key in el) {fn (el [key], key, el)} these are the Javascript design patterns that front-end engineers must know. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please 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.