设计模式-责任链模式在JS中的应用

缺乏、安全感 2022-10-07 01:54 167阅读 0赞

### 先上源码 ###

适应场景: 在定制化一些复杂组件(div, a, input, table等标签)时, 可以通过责任链封装函数, 实现随意组合拆分. **优美及逼格**

var a = { 
        init: function () { 
            console.log("init---");
            console.log("国家>>>");
            a.zhFn().usFn().eeFn();
            console.log("省份>>>");
            a.province.bjPr().twPr().xjPr();
            console.log("市区>>>"); 
            a.province.bjbj.dcQ().xcQ().hdQ();
        },
        zhFn: function () { 
            console.log("中国");
            return a;
        },
        usFn: function () { 
            console.log("美国");
            return a;
        },
        eeFn: function () { 
            console.log("俄罗斯");
            return a;
        },
        province: { 
            bjPr: function () { 
                console.log("北京");
                return a.province;
            },
            twPr: function () { 
                console.log("台湾");
                return a.province;
            },
            xjPr: function () { 
                console.log("新疆");
                return a.province;
            },
            bjbj: { 
                dcQ: function () { 
                    console.log("东城区");
                    return a.province.bjbj;
                },
                xcQ: function () { 
                    console.log("西城区");
                    return a.province.bjbj;
                },
                hdQ: function () { 
                    console.log("海淀区");
                    return a.province.bjbj;
                }
            }
        }
    }

### 对一系列函数实现链式调用 ###

顺序随意, 随机组合亦可

a.zhFn().usFn().eeFn(); 
    a.province.bjPr().twPr().xjPr(); 
    a.province.bjbj.dcQ().xcQ().hdQ();

如源所示, 关键在于把一系列的函数封装成对象, 然后每个函数返回本对象,以此来实现链式调用用.  
比如 给一个div添加多个class样式时,将单个class封装函数, 随意组合函数调用. 提升代码逼格

查看效果:  
直接将代码复制进火狐浏览器控制台 然后`a.init()`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDYyNjk4_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDYyNjk4_size_16_color_FFFFFF_t_70]: /images/20221005/40b2f14dec8c4ab48db2250f3c4d8abf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关在设计模式中责任链模式的举例（一）

在设计模式中责任链模式的举例一个在线商店需要对用户的购物车进行处理。每个购物车可以包含多个商品，当用户提交购物车时，需要依次对购物车中的商品进行处理，如验证库存、计算价格等

小咪咪/ 2024年03月22日 10:59/ 0 赞/ 22 阅读

相关设计模式-责任链模式在JS中的应用

先上源码适应场景: 在定制化一些复杂组件(div, a, input, table等标签)时, 可以通过责任链封装函数, 实现随意组合拆分. 优美及逼格 va

缺乏、安全感/ 2022年10月07日 01:54/ 0 赞/ 168 阅读

相关责任链模式在Android中的应用

转载地址：http://blog.csdn.net/sahadev\_/article/details/51684998\rd 责任链其实在[Android][]中

╰半橙微兮°/ 2022年09月22日 14:55/ 0 赞/ 148 阅读

相关设计模式—责任链模式

责任链模式的英文是：Avoid coupling the sender of a request to its receiver by giving more than one

心已赠人/ 2022年08月08日 14:00/ 0 赞/ 194 阅读

相关【设计模式】责任链模式

前言 Github：[https://github.com/yihonglei/java-design-patterns][https_github.com_yihong

「爱情、让人受尽委屈。」/ 2022年07月16日 01:28/ 0 赞/ 213 阅读

相关责任链模式-在工作中的应用

> 需求是对于@JmsListener的消息的处理，监听到的记录处理如下 > 1.更新记录状态 > 2.发送通知给客户 > 3.其他处理 > 刚好可以使用链式的处理

绝地灬酷狼/ 2022年05月15日 10:38/ 0 赞/ 171 阅读

相关设计模式---责任链模式

责任链模式 Chain of Responsibility 1. 什么是责任链模式 2. 如何实现责任链模式 3. 责任链模式如何解耦 4. 责任链模式的应用

小灰灰/ 2022年05月15日 10:22/ 0 赞/ 241 阅读

相关设计模式-责任型模式（责任链模式）

责任型模式是什么？在责任链模式中很多对象都是由每一个对象对其下家的引用而联接起来形成一条责任链。请求在链上传递，直到链上的某一个对象决定处理次请求。发出这个请求的客

朴灿烈づ我的快乐病毒、/ 2022年05月13日 23:12/ 0 赞/ 282 阅读

相关设计模式：责任链模式

书上定义：使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。好处：

r囧r小猫/ 2022年04月25日 10:02/ 0 赞/ 258 阅读

相关设计模式 | 责任链模式及典型应用

本文的主要内容：介绍责任链模式请假流程示例责任链模式总结源码分析Tomcat Filter中的责任链模式责任链模式一个事件需要经过

拼搏现实的明天。/ 2022年04月22日 00:14/ 0 赞/ 84 阅读