


js design pattern: what is the chain of responsibility pattern? Introduction to js chain of responsibility model
This article brings you content about js design patterns: What is the chain of responsibility pattern? The introduction of js chain of responsibility model has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
What is the chain of responsibility model?
Definition: Avoid coupling the request sender and receiver, make it possible for multiple objects to receive the request, connect these objects into a chain, and pass the request along this chain until an object handles it.
Main solution: The processor on the responsibility chain is responsible for processing the request. The customer only needs to send the request to the responsibility chain, and does not need to care about the request processing details and request delivery, so The chain of responsibility decouples the request sender from the request handler.
When to use: To filter many channels when processing messages.
How to solve:The intercepted classes all implement the unified interface.
js chain of responsibility model application examples: 1. "Blowing drums and passing flowers" in Dream of Red Mansions. 2. Event bubbling in JS. 3. The processing of Encoding by Apache Tomcat in JAVA WEB, the interceptor of Struts2, and the Filter of jsp servlet.
Advantages of js chain of responsibility model: 1. Reduce coupling. It decouples the sender and receiver of the request. 2. Simplified objects. The object does not need to know the structure of the chain. 3. Enhance the flexibility of assigning responsibilities to objects. Allows dynamic addition or deletion of responsibilities by changing members within the chain or moving their order. 4. It is very convenient to add new request processing classes.
Disadvantages of js chain of responsibility model: 1. There is no guarantee that the request will be received. 2. System performance will be affected to a certain extent, and it is inconvenient to debug the code, which may cause loop calls. 3. It may be difficult to observe runtime characteristics, which hinders debugging.
js chain of responsibility mode usage scenarios: 1. There are multiple objects that can handle the same request. The specific object that handles the request is automatically determined at runtime. 2. Submit a request to one of multiple objects without explicitly specifying the recipient. 3. A group of objects can be dynamically designated to handle requests.
js Chain of Responsibility Model Scenario Scenario: An e-commerce company has a preferential policy for users who have paid a deposit. After the official purchase, users who have paid a deposit of 500 yuan will receive 100 yuan. Yuan coupons, users who make a deposit of 200 Yuan can receive 50 Yuan coupons, and users who have not paid a deposit can only purchase normally.// orderType: 表示订单类型,1:500 元定金用户;2:200 元定金用户;3:普通购买用户 // pay:表示用户是否已经支付定金,true: 已支付;false:未支付 // stock: 表示当前用于普通购买的手机库存数量,已支付过定金的用户不受此限制 const order = function( orderType, pay, stock ) { if ( orderType === 1 ) { if ( pay === true ) { console.log('500 元定金预购,得到 100 元优惠券') } else { if (stock > 0) { console.log('普通购买,无优惠券') } else { console.log('库存不够,无法购买') } } } else if ( orderType === 2 ) { if ( pay === true ) { console.log('200 元定金预购,得到 50 元优惠券') } else { if (stock > 0) { console.log('普通购买,无优惠券') } else { console.log('库存不够,无法购买') } } } else if ( orderType === 3 ) { if (stock > 0) { console.log('普通购买,无优惠券') } else { console.log('库存不够,无法购买') } } } order( 3, true, 500 ) // 普通购买,无优惠券
const order500 = function(orderType, pay, stock) { if ( orderType === 1 && pay === true ) { console.log('500 元定金预购,得到 100 元优惠券') } else { order200(orderType, pay, stock) } } const order200 = function(orderType, pay, stock) { if ( orderType === 2 && pay === true ) { console.log('200 元定金预购,得到 50 元优惠券') } else { orderCommon(orderType, pay, stock) } } const orderCommon = function(orderType, pay, stock) { if (orderType === 3 && stock > 0) { console.log('普通购买,无优惠券') } else { console.log('库存不够,无法购买') } } order500( 3, true, 500 ) // 普通购买,无优惠券
// 业务代码 const order500 = function(orderType, pay, stock) { if ( orderType === 1 && pay === true ) { console.log('500 元定金预购,得到 100 元优惠券') } else { return 'nextSuccess' } } const order200 = function(orderType, pay, stock) { if ( orderType === 2 && pay === true ) { console.log('200 元定金预购,得到 50 元优惠券') } else { return 'nextSuccess' } } const orderCommon = function(orderType, pay, stock) { if (orderType === 3 && stock > 0) { console.log('普通购买,无优惠券') } else { console.log('库存不够,无法购买') } } // 链路代码 const chain = function(fn) { this.fn = fn this.sucessor = null } chain.prototype.setNext = function(sucessor) { this.sucessor = sucessor } chain.prototype.init = function() { const result = this.fn.apply(this, arguments) if (result === 'nextSuccess') { this.sucessor.init.apply(this.sucessor, arguments) } } const order500New = new chain(order500) const order200New = new chain(order200) const orderCommonNew = new chain(orderCommon) order500New.setNext(order200New) order200New.setNext(orderCommonNew) order500New.init( 3, true, 500 ) // 普通购买,无优惠券
// 业务代码 const order500 = function(orderType, pay, stock) { if ( orderType === 1 && pay === true ) { console.log('500 元定金预购,得到 100 元优惠券') } else { return 'nextSuccess' } } const order200 = function(orderType, pay, stock) { if ( orderType === 2 && pay === true ) { console.log('200 元定金预购,得到 50 元优惠券') } else { return 'nextSuccess' } } const orderCommon = function(orderType, pay, stock) { if (orderType === 3 && stock > 0) { console.log('普通购买,无优惠券') } else { console.log('库存不够,无法购买') } } // 链路代码 Function.prototype.after = function(fn) { const self = this return function() { const result = self.apply(self, arguments) if (result === 'nextSuccess') { return fn.apply(self, arguments) // 这里 return 别忘记了~ } } } const order = order500.after(order200).after(orderCommon) order( 3, true, 500 ) // 普通购买,无优惠券
js design pattern: What is the flyweight pattern? Introduction to js flyweight pattern
#js design pattern: What is the template method pattern? Introduction to js template method pattern
The above is the detailed content of js design pattern: what is the chain of responsibility pattern? Introduction to js chain of responsibility model. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
