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

This article will explain in detail the sample analysis of the visitor pattern in the front end of web. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Visitor Mode (Visitor Pattern)

The Visitor pattern is a design pattern that separates the algorithm from the object structure. in popular terms, the Visitor pattern enables us to add new logic to an object without changing the structure of the object. the new logic is stored in a separate visitor object. The Visitor pattern is often used to expand third-party libraries and tools.

/ / Visitor class Visitor {constructor () {} visitConcreteElement (ConcreteElement) {ConcreteElement.operation ()} / / element class class ConcreteElement {constructor () {} operation () {console.log ("ConcreteElement.operation invoked");} accept (visitor) {visitor.visitConcreteElement (this)}} / / clientlet visitor = new Visitor () let element = new ConcreteElement () elementA.accept (visitor)

The implementation of the visitor pattern has the following elements:

Visitor Object: visitor object with a visit () method

Receiving Object: receive object with an accept () method

Visit (receivingObj): used for Visitor to receive a Receiving Object

Accept (visitor): for Receving Object to receive a Visitor and provide it with the ability to obtain Receiving Object data by calling Visitor's visit ()

The simple code implementation is as follows:

Receiving Object:function Employee (name, salary) {this.name = name; this.salary = salary;} Employee.prototype = {getSalary: function () {return this.salary;}, setSalary: function (salary) {this.salary = salary;}, accept: function (visitor) {visitor.visit (this);}} Visitor Object:function Visitor () {} Visitor.prototype = {visit: function (employee) {employee.setSalary (employee.getSalary () * 2) }}

Verify:

Const employee = new Employee ('bruce', 1000); const visitor = new Visitor (); employee.accept (visitor); console.log (employee.getSalary ()); / / output: 2000

Scene

The class corresponding to an object in the object structure rarely changes, but it is often necessary to define new operations on this object structure

You need to do many different and unrelated operations on objects in an object structure, and you need to avoid letting these operations "pollute" the classes of these objects, and you don't want to modify them when you add new operations.

Advantages

In accordance with the principle of single responsibility

Excellent scalability

Flexibility

Shortcoming

The disclosure of details by specific elements to visitors violates the Dimitt principle.

Violates the principle of dependency inversion, relies on concrete classes, and does not rely on abstraction.

It is difficult to change specific elements.

This is the end of the article on "sample Analysis of Visitor patterns in the web Front end". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.