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

This article mainly explains "how to realize the design pattern of JavaScript". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to realize the design pattern of JavaScript".

1 Design pattern concept

Design pattern is a set of best solution designed to solve a certain problem.

Object-oriented-pay more attention to objects-find the best way to define objects and add properties and methods to each object

The best solution found-it's a design pattern.

For different problems, we will have different best solutions-design patterns

Common design patterns:

Singleton mode

Combination mode

Observer mode

Command mode

Agent mode

Factory model

Strategy mode

Adapter mode

. . .

1.1 Singleton mode

Database connection-multiple functions require operation of the database-reconnect to the database-1000 functions, connect to the database 1000 times

Registration function, each registration needs to operate the database-1000 people are registered at the same time

Mysql database has a connection limit: it can only support up to 200 connections at the same time.

We connect to the database once, get a connection, and operate the database multiple times, which can be operated with this connection.

How to execute the database statement multiple times using the same connection-we can design a design pattern

Design pattern: define a class, this class new will get a connection later, every time you execute a database statement, you can get a connection from this class

Singleton pattern: only one object can be obtained from a class-no matter how many times the class is manipulated, all connected objects are the same object.

Let all objects created by a class have exactly the same properties and methods. For example, encapsulate a class, put some commonly used operation functions as methods, and then use the same object to call these methods every time

Normally, each object created by a class is different.

Class Carousel {} var a = new Carousel (); var b = new Carousel (); console.log (a = = b); / / false

The singleton pattern is to make the two objects the same, that is, a class always has only one instance object.

Var single = (function () {class Carousel {} var res = undefined; return function () {if (! res) {res = new Carousel ();} return res;}}) (); var S1 = single (); var S2 = single (); console.log (S1 = = S2); / / true

Variable P exposed to global variables will cause global pollution.

Using closures to solve the problem of redefining p every time

The core code of the singleton pattern:

Function Person () {} function fn (Person) {var p; return function () {if (! P) {p = new Person;} return p;}} var f = fn (Person) var p1 = f () var p2 = f ()

The application scenario of the singleton pattern is encapsulated in the tool library.

Example: encapsulate a tool library

Singleton pattern application encapsulation tool library

There are a lot of methods in the toollibrary-methods should be used by the same object each time, instead of having a new object every time using the tool / / var t = new Tool; / / t.setCookie ('username',' zs', 20) Const Tool = (function () {class Tool {constructor () {if (window.getComputedStyle) {this.flag = true;} else {this.flag = false }} / get node attribute getStyle (ele, attr) {if (this.flag) {return window.getComputedStyle (ele) [attr];} else {return ele.currentStyle [attr] }} getStyle (ele Attr) {if you try a piece of code, you don't know whether it will report an error or not. After the attempt succeeds, there is nothing in the code that will report a failure. It will be caught by cathch and will put the error message in the err parameter catch {}. You can handle the error or not handle the error alignment. Face error code to correct the error will not report try {return window.getComputedStyle (ele) [attr] in the browser } catch (err) {return ele.currentStyle [attr] }} / / set node css attribute setStyle (ele, styleObj) {for (let attr in styleObj) {ele.style [attr] = styleObj [attr] }} / / set cookie setCookie (key, value, second, path ='/') {let data = new Date (); date.setTime (date.getTime ()-8 * 3600 * 1000 + second * 1000); [xss_clean] = `$ {key} = ${value} Expires=$ {date}; path=$ {path} `;} var tool; return (function () {if (! tool) {tool = new Tool ();} return tool;}) ();}) (); 1.3 combination mode

The combination mode is to make the starter. After multiple classes are instantiated, they are executed with a method of the same name to start. At this point, you can make an initiator and let multiple classes start together.

Class Carousel {init () {console.log ("broadcast picture starts running");}} class Tab {init () {console.log ("tab starts running");}} class Enlarge {init () {console.log ("magnifying glass starts running") }} / / the three classes need to be instantiated individually and the init method in each class is called, so you can use the combined mode as an initiator.

The combination mode makes the initiator:

Class Starter {constructor () {this.arr = []; / define an array} add (className) {this.arr.push (className); / / put this multiple classes into the array} run () {for (var iPossibili)

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.