从面试题到插件机制的小思考

简介: 从面试题到插件机制的小思考

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


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 都作用到实例上了

image.png

当然,这只是冰山一角,如果说到如何写库,按照现代 JavaScript 库的写法要考虑的东西还有很多,等笔者对其研究有所收获后,会写一篇

相关文章
|
4月前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
4月前
|
缓存 安全 Java
7张图带你轻松理解Java 线程安全,java缓存机制面试
7张图带你轻松理解Java 线程安全,java缓存机制面试
|
1月前
|
消息中间件 存储 Java
Android面试高频知识点(2) 详解Android消息处理机制(Handler)
Android 消息处理机制估计都被写烂了,但是依然还是要写一下,因为Android应用程序是通过消息来驱动的,Android某种意义上也可以说成是一个以消息驱动的系统,UI、事件、生命周期都和消息处理机制息息相关,并且消息处理机制在整个Android知识体系中也是尤其重要,在太多的源码分析的文章讲得比较繁琐,很多人对整个消息处理机制依然是懵懵懂懂,这篇文章通过一些问答的模式结合Android主线程(UI线程)的工作原理来讲解,源码注释很全,还有结合流程图,如果你对Android 消息处理机制还不是很理解,我相信只要你静下心来耐心的看,肯定会有不少的收获的。
105 3
Android面试高频知识点(2) 详解Android消息处理机制(Handler)
|
1月前
|
Java
【Java基础面试四十七】、 说一说你对Java反射机制的理解
这篇文章介绍了Java反射机制,它允许程序在运行时获取对象和类的真实信息,进行类和实例的创建,以及访问和修改成员变量和方法。
|
2月前
|
安全 Java 开发者
Java面试题:什么是Java 15中的密封类以及其限制?还有哪些其他特性用于限制类继承的机制吗?
Java面试题:什么是Java 15中的密封类以及其限制?还有哪些其他特性用于限制类继承的机制吗?
27 1
|
2月前
|
监控 安全 Java
Java面试题:描述Java反射机制及其应用场景,并讨论其优缺点。
Java面试题:描述Java反射机制及其应用场景,并讨论其优缺点。
34 1
|
3月前
|
消息中间件 Kafka 程序员
Kafka面试必备:深度解析Replica副本的作用与机制
**Kafka的Replica副本是保证数据可靠性的关键机制。每个Partition有Leader和Follower副本,Leader处理读写请求及管理同步,Follower被动同步并准备成为新Leader。从Kafka 2.4开始,Follower在完全同步时也可提供读服务,提升性能。数据一致性通过高水位机制和Leader Epoch机制保证,后者更精确地判断和恢复数据一致性,增强系统容错能力。**
84 1
|
2月前
|
Java 编译器 程序员
Java面试题:解释Java中的异常处理机制,包括checked异常和unchecked异常的区别。
Java面试题:解释Java中的异常处理机制,包括checked异常和unchecked异常的区别。
27 0
|
2月前
|
监控 Java
Java面试题:Java内存、多线程与并发工具包的深度探索,Java内存管理策略及其优化技巧,Java多线程并发控制的工具类与机制,Java并发工具包在实际项目中的应用
Java面试题:Java内存、多线程与并发工具包的深度探索,Java内存管理策略及其优化技巧,Java多线程并发控制的工具类与机制,Java并发工具包在实际项目中的应用
27 0