关于前端:从面试题到插件机制的小思考

起初是因为一道面试题，这个面试题是去年遇到的，即如下代码：

class Operator {...}
var op = new Operator(1)

op.add(3).minus(2).multi(2).division(1)

写出 Operator 中的代码，当初不会写，因为齐全没遇到过口试写这类题目。当然，这也裸露了我基础薄弱的问题

当初，能够一解，其实很简略，add、minus、multi、division 都是 Operator 的办法，调用后能返回是因为返回了 this，this 指向调用者，所以还是指向实例（即 op）

class Operator {constructor(initial) {this.num = initial}
    
    add(num) {
        this.num = this.num + num
        return this
    }
    
    minus(num) {
        this.num = this.num - num
        return this
    }
    
    multi(num) {
        this.num = this.num * num
        return this
    }
    
    division(num) {
        this.num = this.num / num
        return this
    }
}

var op = new Operator(1)
op.add(3).minus(2).multi(2).division(1)

留神，肯定要 return，你调用一个办法，不 return，就不会有后果。个别你调用办法总是要有返回值吧

再次揭示，能链式调用的关键在于调用办法后返回 this，this 指向调用者即实例

而此类又能衍生思考一个问题，库的「插件」机制

无论是 Chrome 中的插件，还是 PhotoShop 中的插件，还是 Webpack（前端打包库）中的插件，还是 jQuery、Axios、BetterScroll 等库的插件，在写应用程序时，为了扩展性，咱们都会应用“插件思维”，把外围的性能实现进去，再通过插件机制来扩大本身

多说无益，如果应用插件机制来实现此性能，该如何革新呢？

class Operator {plugins = []
    constructor(initial) {this.num = initial}
    
    use(plugin) {this.plugins.push(plugin)
        this[plugin.name] = plugin.exec.bind(this)
    }
    
    // 这里加一个办法，调用显示后果
    result() {return this.num;}
}

const AddPlugin = {
    name: 'add',
    exec: function(num) {
        this.num = this.num + num;
        return this
    }
}

const minusPlugin = {
    name: 'minus',
    exec: function(num) {
        this.num = this.num - num;
        return this
    }
}


const op = new Operator(5)
op.use(AddPlugin)
op.use(minusPlugin)
op.add(5).minus(2).result() // 8

咱们打印 op 能看到办法 add、minus 都作用到实例上了

当然，这只是冰山一角，如果说到如何写库，依照古代 JavaScript 库的写法要思考的货色还有很多，等笔者对其钻研有所播种后，会写一篇