js函数链式结构

链式结构方式:
1.最简单方式通过返回this:

class Text {
        constructor() {

        }
        init() {
            console.log('init');
            return this;
        }
        init1() {
            console.log('init1');
            return this;
        }

    }
    var text = new Text();
    text.init().init1();

缺点:主要是对DOM元素的操作,只需要改变DOM元素的表现或者不需要返回值,所以适合链式操作。
优点:编程的流程更加清晰,不会像回调函数一样相互耦合,难以分辨函数的执行顺序且维护困难
为兼容需要返回值的时候则修改为:

  class Text {
        constructor() {
            this.name = ''
        }
        init() {
            console.log('init');
            return this;
        }
        init1() {
            this.name='init1';
            return this;
        }
        result(res) {
            return this[res]
        }

    }
    var text = new Text();
    console.log(text.init1().result('name'));

通过添加一个result函数实现兼容需返回值操作,但这个会多加一个函数,通过result传参来调用所需要的返回值;
但这样如果返回值为多个情况反而无法满足

最终完善版:

 class Text {
        constructor() {
            this.name = '';
            this.age= 18;
        }
        init1() {
            this.name='init1';
            return this;
        }
        result(res) {
            if(Object.prototype.toString.call(res)==="[object Array]") {
                let obj = {};
                for ( let i of res) {
                    obj[i] = this[i];
                }
                return obj;
            } else {
                 return '传入参数类型错误';
            }

        }

    }
    var text = new Text();
    console.log(text.init1().result(['name', 'age']));

你可能感兴趣的:(js函数链式结构)