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

先上源码

适应场景: 在定制化一些复杂组件(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()