深入浅出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~

浅入深出Vue:代码整洁之封装的更多相关文章

  1. 浅入深出Vue:前言

    浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...

  2. 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...

  3. 浅入深出Vue:环境搭建

    浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...

  4. 浅入深出Vue:工具准备之WebStorm安装配置

    浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...

  5. 浅入深出Vue系列

    浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...

  6. 浅入深出Vue:第一个页面

    今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...

  7. 浅入深出Vue:文章列表

    终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...

  8. 浅入深出Vue:发布项目

    项目完成之后,当然不能满足于在我们的开发环境下跑一跑.我们可以打包发布到服务器上,让大家一起来欣赏一下你的作品. 那么 vue 项目如何打包发布呢,新建的项目目录下通常都有一个 README.md 的 ...

  9. 浅入深出Vue:代码整洁之去重

    在开始本篇的主题之前,让我们把上次遗留下来的问题都清理一下: 将其他组件中 axios 请求的地方封装起来. 这里就不把代码放在开头了,相关代码都放在文末,有兴趣了解的童鞋可以先往下翻. 好了, 我们 ...

随机推荐

  1. 零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能

    原文:零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能 最近有机会在工作上用到Deep Zoom这个功能,我就顺便介绍 ...

  2. CSS技巧分享:如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  3. 反射:获取枚举类型的Name,Value,Description

    [Obsolete("请使用新的方法XXX")] //使用Obsolete特性来告诉使用者这是一个过期的方法 private static void Test() { Type t ...

  4. ext中设置grid单选,取消选择

    原代码(无法取消选择)如下: selModel: Ext.create('Ext.selection.CheckboxModel', { mode: "SINGLE", allow ...

  5. Unicode 7.0.1中文支持非常好

    简单测试了一下,7.0.1中文支持非常好.Delphi7下将UniConnection的useUnicode设置为False,Tokyo下设置为True,Charset空着即可. 问题要点:1.建数据 ...

  6. MySQL 主从配置 读写分离

    Master配置 1.创建用户: 在Master MySQL上创建一个用户‘repl’,并允许其他Slave服务器可以通过远程访问Master,通过该用户读取二进制日志,实现数据同步. create ...

  7. return view 详解 MVC

    1.return View(); 返回值 类型:System.Web.Mvc.ViewResult将视图呈现给响应的 View() 结果. 注释 View() 类的此方法重载将返回一个具有空 View ...

  8. C#最新功能(6.0、7.0)

    一直用C#开发程序,.NET的功能越来越多,变化也挺大的,从最初的封闭,到现在的开源,功能不断的增加,一直在进步.作为C#的强烈支持者,C#的变化,我不能不关注,这篇文章主要介绍,C#6.0和C#7. ...

  9. 系列教程 - java web开发

    代码之间工作室持续推出Java Web开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢java的朋友们学习进步: java web 开发教程(1) - 开发环境搭建 技术交流QQ群: 商务合作 ...

  10. Appium+python自动化(十)- 元素定位秘籍助你打通任督二脉 - 上卷(超详解)

    简介 你有道灵光从天灵盖喷出来你知道吗,年纪轻轻就有一身横练的筋骨,简直百年一见的练武奇才啊,如果有一天让你打通任督二脉,那还不飞龙上天啊.正所谓我不入地狱谁入地狱,警恶惩奸维护世界和平这个任务就交个 ...