Study the responsibility chain mode of JavaScript design patterns and javascript Design Patterns

Study the responsibility chain mode of JavaScript design patterns and javascript Design Patterns

I. Definition

Responsibility Chain Mode: Enables multiple objects to process requests, so as to avoid coupling between request senders and recipients and link these objects into a chain, and pass the request along this chain until an object processes it.

Ii. Example

• Assume that:
• We are responsible for an e-commerce website that sells mobile phones. After paying two rounds of orders with a deposit of 500 yuan and a deposit of 200 yuan respectively, the official purchase phase has arrived. If you have made a discount for a user, the user who has paid a deposit of 500 yuan will receive a coupon of 100 yuan for the mall. If you have paid a deposit of 200 yuan, the user will receive a coupon of 50 yuan for the mall, users who do not pay the deposit are classified as normal purchases, and the purchase is not necessarily guaranteed when the inventory is limited.
  

/* Traditional implementation * // orderType: [, 3: Normal], isPaid: true/false, stock: Inventory var order = function (orderType, isPaid, stock) {if (orderType = 1) {if (isPaid) {console. log ("500 yuan deposit pre-purchase, get 100 coupons");} else {if (stock> 0) {console. log ("general purchase, no coupons");} else {console. log ("inventory insufficient") ;}} else if (orderType = 2) {if (isPaid) {console. log ("200 yuan deposit pre-purchase, get 50 coupons");} else {if (stock> 0) {console. log ("general purchase, no coupons");} else {console. log ("inventory insufficient") ;}} else if (orderType = 2) {if (stock> 0) {console. log ("general purchase, no coupons");} else {console. log ("inventory insufficient") ;}}} order (1, true, 500);/* responsibility chain */var order500 = function (orderType, isPaid, stock) {if (orderType = 1 & isPaid = true) {console. log ("500 yuan deposit pre-purchase, get 100 coupon");} else {return "nextSuccessor" ;}}; var order200 = function (orderType, isPaid, stock) {if (orderType = 2 & isPaid = true) {console. log ("200 yuan deposit pre-purchase, get 50 coupons");} else {return "nextSuccessor" ;}}; var orderNormal = function (orderType, isPaid, stock) {if (stock> 0) {console. log ("general purchase, no coupons");} else {console. log ("inventory insufficient") ;}}; Function. prototype. after = function (fn) {var self = this; return function () {var ret = self. apply (this, arguments); if (ret = "nextSuccessor") {return fn. apply (this, arguments);} return ret;} var order = order500.after (order200 ). after (orderNormal); order (1, true, 10 );

Advantage: the complex relationship between request senders and N recipients is decoupled.
Disadvantage: a request cannot be processed by any node in the chain.

Iii. Example: object to be uploaded

Example 2: Get the object to upload in the responsible link mode
PS: Comparison of "Learning JavaScript design patterns-iterator patterns"

Function getActiveUploadObj () {try {return new ActiveObject ("TXFTNActiveX. FTNUpload "); // IE upload control} catch (e) {return" nextSuccessor ";}} function getFlashUploadObj () {if (supportFlash (). f = 1) {// suppflash flash, see JavaScript design mode-iterator mode var str = '<object type = "application/x-shockwave-flash"> </object> '; return $ (str ). appendTo ($ ("body");} return "nextSuccessor";} function getFormUploadObj () {var str = '<input name = "file" type = "file" class = "ui-file"/>'; return $ (str ). appendTo ($ ("body");} var getUploadObj = getActiveUploadObj. after (getFlashUploadObj ). after (getFormUploadObj); console. log (getUploadObj ());

Whether it is the scope chain, prototype chain, or event bubbles in the DOM node, we can find the shadow of the responsibility chain.

The above is all the content of this article. I hope this article will help you learn javascript programming ..

Articles you may be interested in:

• Suggestions on javascript design mode recommendation
• Analysis of combined JavaScript Design Patterns
• Javascript design pattern-basic for Object-Oriented Learning
• JavaScript design mode Security Sandbox Mode
• Interface introduction of javascript Design Mode
• JavaScript design pattern-Observer pattern (publisher-subscriber pattern)
• Introduction to the prototype of JavaScript design patterns (Object. create and prototype)
• Introduction to the factory method pattern of JavaScript Design Pattern
• Mediator mode in javascript Design Mode