浅入深出Vue：代码整洁之封装

深入浅出vue系列文章已经更新过半了，在入门篇中我们实践了一个小小的项目。

《代码整洁之道》一书中提到过一句话：

• 神在细节中

这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德·罗所说，他秉承的是少即是多的建筑设计哲学，玻璃幕墙等现代建筑结构便是由他缔造的。

而这句话也对软件开发领域产生了不小的影响，同时在软件开发领域中，很多概念都是源于其它行业，经典的便有现在所提到的建筑学。

在实际开发中，当然也是需要注意细节的。很多人可能都碰到过 “维护不下去” 的代码，或者是 “无从下手”的代码，那么这些代码是如何产生，以及是如何逐渐成长为“这么不受待见”的代码呢？

碰巧，在入门篇的项目中同样存在着这些问题，那么让我们在提高篇中逐一找出并解决这些问题！

封装是什么

封装，就是整理。

这是生活之中逃不开的一个词。房间乱了，我们需要整理。那么项目中的代码乱了，我们是否需要整理呢？

当然需要整理，但是这个整理是需要有合适的方式方法。

《代码整洁之道》开篇的序中，最开始便提出了整理一词：

• 整理即组织，是为了搞清楚事物所在，而通过恰当地命名之类的手段至关重要。

以上是书中原文，个人的理解是：

• 整理，就是词要达意，文要对题。

这么解释有点片面与抽象，但是可以由点入面，先吃透浅表面所透露出来的意思，再去深究其意。

这也是若羽系列文章为何取名为浅入深出的原因。如今的社会过于浮躁，大家都喜欢由繁入简，而若羽偏要反其道而行之！

可以降低门槛为何要抬高门槛，知识只有在发生碰撞时才能发生质变和升华，闭门造车的反例已经在历史的滚滚长河中消失的无影无踪。

如何封装

首先我们来定义一个简单的规则，符合这些规则，我们就应当考虑是否要封装它们：

• 一段代码包含着一定的业务逻辑。

回过头来看看入门篇中文章列表页面的代码：

<script>
    import axios from 'axios'
    export default {
        name: "List",
        data() {
            return {
                list: [],
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list')
                    .then(res => {
                        this.list = res.data.Data
                    })
            }
        }
    }
</script>

这里的 init函数，当这个组件实例被挂载时会被触发。而里面的逻辑是：

• 向接口发起请求然后将返回值赋给当前组件作用域中的 list 变量

这个地方本身就是一个函数，为什么还需要封装呢？

这里我们暂时只关注一下 init 函数中的代码，这里其实包含了两部分逻辑：

1. 发起 ajax 请求

2. 请求完成后将返回的数据赋值给组件内的变量

上面我们提到的整理一词，为什么要整理呢？因为混乱！我们才会要整理。如果本身就整整齐齐的，那我们为什么需要去整理它呢。

这一段代码中包含了两部分逻辑，它已经有点混乱了，因此我们需要整理它！

关于为什么将其分析为 两部分这一点若羽会在接下来的博文中单独一篇来进行讲解。

那么这里我们如何对其进行封装呢，最简单的办法就是将发起请求的部分封装起来，让 init 函数看不见它，并不知道它干了什么事情。

这里我们在 src 目录下新建一个 test.js 文件：

import axios from 'axios';

class Test {
    static test() {
        return axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list');
    }
}

export default Test;

都 9021 年了，我们当然要用上最最最新的语法啊！（就是习惯写后端了呗）

这里我们定义了一个 Test 的类，并且将请求的代码封装到了一个静态函数里。

然后让我们继续重构一下 List.vue中的代码：

<script>
    import Test from '@/test'
    export default {
        name: "List",
        data() {
            return {
                list: [],
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                Test.test()
                    .then(res => {
                        this.list = res.data.Data
                    })
            }
        }
    }
</script>

此时有没有觉得变得清爽一点呢？很好，清爽了就说明我们的目的达到了一半。

剩下一半就是不爽了~

命名：不耍流氓的封装

在前面，我们封装了 ajax 请求这一部分，但是我们却耍了流氓！！！

只封装了，但是没有让它 词对其意，文对其题。一眼看过去，三个四个大大小小的 test 是什么情况？

只看这段代码的话，完全看不懂这是啥意思呢！

这种行为就像是打扫房间的时候，垃圾扫好扫好，然后聚集在门口就这么任由它放着！

距离我们成功重构这一小块就差这临门一脚了。

命名的标准很简单，但也很难完全做到：

• 词对其意，文对其题，码对其逻辑

那么这里我们是用来发送 ajax 请求的，这该怎么起名字？对于这个问题，一百个人里面大概有好多个答案，这里若羽的习惯是对其行为进行命名。因此这里若羽的命名是：

• RequestSender ， 请求发送者

函数的命名：

• GetBlogList，获取博文列表

让我们来完成这临门一脚：

test.js 重命名为 RequestSender.js，代码：

import axios from 'axios';

class RequestSender {
    static GetBlogList() {
        return axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list');
    }
}

export default RequestSender;

这里小小的表扬一下 Jetbrains 系列的工具，在 WebStorm 中先点击类名，然后按下 shift + f6 即可享受重命名功能：同时修改文件名及文件中引用的地方。

接下来继续重构一下 List.vue 文件：

<script>
    import RequestSender from '@/RequestSender'
    export default {
        name: "List",
        data() {
            return {
                list: [],
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                RequestSender.GetBlogList()
                    .then(res => {
                        this.list = res.data.Data
                    })
            }
        }
    }
</script>

完美~ 现在我们的代码表义性是不是变得更强了呢？

这就是封装的魅力，细小之处见真章。

代码已经上传至Gitee。Github晚点上传，若羽这里梯子最近有点问题，Gitee也方便大家直接访问。

提示：可以看看若羽的提交，每一次的提交就对应了文章中的每一个重构步骤。

Gitee地址：https://gitee.com/Exceptation/qianrushenchuvue

觉得合胃口可以顺手点个Star~