浅入深出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
函数中的代码,这里其实包含了两部分逻辑:
-
发起
ajax
请求 -
请求完成后将返回的数据赋值给组件内的变量
上面我们提到的整理一词,为什么要整理呢?因为混乱!我们才会要整理。如果本身就整整齐齐的,那我们为什么需要去整理它呢。
这一段代码中包含了两部分逻辑,它已经有点混乱了,因此我们需要整理它!
关于为什么将其分析为 两部分这一点若羽会在接下来的博文中单独一篇来进行讲解。
那么这里我们如何对其进行封装呢,最简单的办法就是将发起请求的部分封装起来,让 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~