从JavaScript看单一职责

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

这个系列会分享一些对面向对象、设计模式的小理解，希望不会做不下去弃坑

怎么看待面向对象

网上一查都会找到很多面向对象是什么，面向对象七大原则等文章。但对于只会 JavaScript 的人来说，并不能很好理解这些原则转换为 JavaScript 代码该如何理解。文章里会谈到大量的继承、组合、重载、接口、抽象类，但 JavaScript 里面没有这些概念或者需要用其他方法实现，所以往往很难理解。

下面会先拿出了最简单的单一职责和依赖倒置，做 JavaScript 版本的理解。

单一职责原则

这个概念就是字面意思，每一个都只负责做一件事。在其他语言里，意思是每个类都只负责一个功能。这其实是一个很好的原则，我们基于这个思想来想一下 JavaScript 可以怎么使用这个原则。下面举一个例子，这个例子基于 vue。

假如我们需要实现点击按钮开始播放视频，同时将播放的icon进行切换，然后全屏播放，全屏的时候需要将控制栏隐藏起来。

下面是没有实现单一职责的写法。

    // 伪代码
    methods: {
        play() {
            this.icon = 'playing'
            this.video.play()
            this.video.fullscreen()
            this.isShowVideoController = false
            this.videoControllerFadeOut = true
        }
    }

我们会发现在一个播放的函数里面是直接的对状态进行了控制，而且包含了对控制栏的，对图标的，对视频的。那当我们在需要在其他地方想单独实现全屏，或者改变控制栏，或者改变图标的时候，我们就要再将里面的某些代码再写一遍。

最直接的坏处就是代码并不好读，其次就是没有复用。

如果按照单一职责进行改造的话。

    methods: {
        handlePlayEvent() {
            this.toggleIcon()
            this.play()
            this.hideVideoController()
        },
        play() {
            this.video.play()
        },
        toggleIcon() {
            this.icon = this.icon === 'playing' ? 'pause' : 'playing'
        },
        hideVideoController() {
            this.isShowVideoController = false
            this.videoControllerFadeOut = true
        }
    }

我们可以在直接从代码中读到我们想做什么，而且这些方法都是可以在其他地方再次使用的。当然这个例子相对简单了点，不能直接看出单一职责的好处，但只要在写代码的时候坚持这种思想，某一天遇到了很复杂的代码，很多状态的时候，这种思想会在改需求的时候让你少加点班。

而且当某一些常用的还能作为工具函数提取出来，这样就能在项目开发中产生沉淀。

写在最后，其他语言的类，转换到 JavaScript 的视角应该是函数，如果不对还请指出。