SoFunction
Updated on 2025-03-04

JavaScript design pattern application example

This article describes the responsibility chain pattern of JavaScript design pattern. Share it for your reference, as follows:

1. Definition of the chain of responsibilities:

Give multiple objects the opportunity to process the request, thus avoiding the coupling relationship between the sender and receiver of the request, connecting the objects into a chain, and passing the request along the chain until an object processes it.

2. Example scenario description:

A company promotes company products-mobile phones, and has the following policies: when the official purchase is made, users who have paid a deposit of 500 yuan will receive a discount of 100 yuan for malls, and users who pay a deposit of 200 yuan can receive a discount of 50 yuan. Users who have not paid a deposit before can only enter the ordinary purchase mode, that is, there is no discount coupon. The main danger is that they may not be able to buy a mobile phone when the inventory is limited.

3. The example code is as follows:

1. Create a function object for the purchase pattern in 3, as follows:

/**
 * @param: orderType indicates the order type
 * @param: pay means whether the user has paid the deposit
 * @param: stock indicates the amount of mobile phone inventory that the current user has purchased normally. Users who have paid a deposit are not subject to this restriction.
 **/
var order500 = function( orderType, pay, stock ){
  if( orderType === 1 && pay === true)
     ('Pre-order for 500 yuan deposit, get 100 discount coupons');
  else
     return 'nextSuccessor'; //I don't know who the next node is, anyway, I pass the request to the later};
var order200 = function( orderType, pay, stock){
  if( orderType === 2 && pay === true)
    ( 'Pre-order for 200 yuan deposit, get 50 yuan discount coupon' );
  else
    return 'nextSuccessor';
};
var orderNormal = function(orderType, pay, stock){
  if(stock > 0)
    ('Ordinary purchase, no discount coupons');
  else
    ('Insufficient mobile phone inventory');
};

2. Write a constructor that wraps the function into the responsibility chain node, as follows:

var Chain = function(fn){
   = fn;
   = null;
};
 = function( successor ){
  return  = successor;
};
 = function(){
  var ret = ( this, arguments );
  if( ret === 'nextSuccessor'){
    return  && ( this,successor, arguments );
  }
   return ret;
};

3. The call is as follows:

1> Package the 3 order functions into nodes in the responsibility chain:

var chainOrder500 = new Chain( order500 );
var chainOrder200 = new Chain( order200 );
var chainOrderNormal = new Chain( orderNormal );

2> Specify the order of sections in the chain of responsibilities:

( chainOrder200 );
( chainOrderNormal );

3> Pass the request to the first node, as follows:

( 1, true, 500 ); //Output: Pre-order for 500 yuan deposit, get 100 discount coupons( 2, true, 500 ); //Output: Pre-order for 200 yuan deposit, get 50 discount coupons( 3, true, 500 ); //Output: Normal purchase, no discount coupon( 1, false, 0 ); //Output: Insufficient mobile phone inventory

4. Advantages of the responsibility chain model:

Through the above code, we can flexibly add and delete nodes, and flexibly modify the order of nodes.

For more information about JavaScript, please view the special topic of this site: "JavaScript object-oriented tutorial》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage

I hope this article will be helpful to everyone's JavaScript programming.