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

缺乏、安全感 2022-10-07 01:54 188阅读 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 条评论，188人围观）

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

相关阅读

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

设计模式–责任链模式 > 当我们需要连续链式的进行处理数据时：你可以理解为接力赛，接力棒就是我们处理的数据，队员就是就是不同的处理器(mybaitis就是自定义插件)

Dear 丶/ 2022年10月07日 14:58/ 0 赞/ 202 阅读

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

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

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

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

前言　　责任链模式：　　　　流水线作业，流水线上的每个节点都能处理自己所承担职责的任务。（个人理解）　　责任链的特点：　　　　①：有一个链式的流水线（定义主

我会带着你远行/ 2022年10月03日 00:42/ 0 赞/ 203 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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