在开始本篇的主题之前,让我们把上次遗留下来的问题都清理一下:

  • 将其他组件中 axios 请求的地方封装起来。

这里就不把代码放在开头了,相关代码都放在文末,有兴趣了解的童鞋可以先往下翻。

好了, 我们现在把上篇剩下的任务给完成了,接下来我们来正式开始本篇内容吧。

去重是什么

字面上意思:去除重复,在项目中,不可避免的会出现重复代码。但是如果不好好去处理这些重复代码,那很有可能就会给你很多“惊喜”。

如何为“重复” 下一个定义呢?

从最浅显的层次来看, 相同即是重复。在我们上面的代码中,每一个组件中都有这么一行代码:

import RequestSender from '@/requestSender';

这就是重复代码,在每一个需要发起请求的组件中你都会需要写上这么一行代码。那么让我们就这个列举一些可能出现的问题:

  • 某一天修改了文件名

  • 某一天移动了该文件

那么项目中需要修改的地方将会是多少呢?而在修改中会产生手误的概率又会是多少呢?以上还是在单人开发的时候,如果团队协作开发,这些情况的概率又会是什么样的呢。

如何去重

当然,对于上面这种引入型的代码,类似移动文件,修改文件名这种操作。IDE 就能很好的帮你处理,比如 WebStorm 如果你使用重构相关的功能去重命名,那么它会找出所有 “疑似”引用的代码片段,你可以选择所有相关的引用同时修改。

这是一种手段,很好的解决了上面这些问题。

那么让我们来看看另一个重复代码的问题:

class RequestSender {
static GetBlogList() {
return axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list');
} static Publish(data) {
return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/publish', data);
} static Login(data) {
return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/login', data);
} static Signup(data) { return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/signup', data);
}
}

上面的代码, 重点不在函数噢。 仔细看看它们有哪些地方重复了。

光从代码上来看,其实有很多“重复”的地方,比如说 returnstaticaxios.getaxios.post

这些重复有一部分是语法,有一部分是调用。这些都是不可避免的,因此这些重复代码并不在我们需要重构的范围内。那么,究竟是哪段代码呢?

https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io

准确来说,它并不算是代码。而是“硬编码”,从整体代码上来看,这是目前所有后台接口的域名

在开发过程中,一般来说至少是会有两个环境存在:开发环境、线上环境。而它们两的后台接口域名一般而言又不会重复,难道每次发布前都手动改一下域名么?

我们先来列举一下可能会出现的问题:

  • 开发环境、线上环境域名不一致

  • 团队协作中,开发者之间的开发域名不一致

  • 当线上/开发 环境中的域名需要修改时

可以看到,当遇到上述问题时,项目中所有硬编码了域名的地方都是需要修改的,那么为什么要修改呢?

除了解决上面列举的具体问题之外,最根本的目的是:

  • 保持唯一性

如果有两段/多段代码它们表示的含义完全一致,并且从目的上来说也是一致的。那么就应该尽可能将其只保留一处定义。

那么对于这个域名我们怎么处理呢?首先将其提炼出来:

static Host = 'https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io';

这样,引用的地方就可以这么写:

static GetBlogList() {
return axios.get(`${Host}/list`);
}

这样,当发现修改的时候,是不是只需要修改 Host 这么一个地方就好了呢?、

但是这样还存在问题,如果要发布,或者是在 gitsvn上协作的时候呢? 每个人、每个环境都需要修改这个变量,并且还要在提交代码时移除掉自己的修改以避免冲突。

可配置化

Host 的例子是非常常见的,当我们需要发布、团队协作的时候,环境不同是非常常见的,有可能在自己电脑上 Hostlocalhost:8080,换在另一个人电脑上就是 localhost:9099了。那么线上环境有可能又是 xxx.xxx.comxx.xxx.com/api诸如此类。

这里若羽实践的解决方案是:

  • 将与环境相关的硬编码提炼成可配置项放入配置文件

  • 配置文件模板化

  • 配置模板文件多样化

真正的配置文件是不会被提交上去,只有一个模板文件。由于配置文件并不会被提交,所以开发者之间的环境差异就可以忽略了,大家根据自己的环境修改配置文件即可。

那么对于线上环境、测试环境等等,建立对应的配置文件模板即可。当发布时,使用对应环境的发布配置文件模板作为配置文件即可。

那么我们来实践一下:

新建配置模板文件 config.js.template:

const config = {
HOST: '',
}; export default config;

接下来复制粘贴模板文件,并重命名为 config.js:

const config = {
HOST: 'https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io',
}; export default config;

接下来修改一下 requestSender.js:

import axios from 'axios';
import config from '@/config.js'; class RequestSender {
static GetBlogList() {
return axios.get(`${config.HOST}/list`);
} static Publish(data) {
return axios.post(`${config.HOST}/publish`, data);
} static Login(data) {
return axios.post(`${config.HOST}/login`, data);
} static Signup(data) { return axios.post(`${config.HOST}/signup`, data);
}
} export default RequestSender;

好了,现在不管是在任何一个环境下,都可以游刃有余的切换域名了。而且这里面还有一个很有意思的事情:

  • 所有的改动对于表现层而言是透明的。

简单来说,我们在这里重构了这么多的代码,然而我们并不需要修改任何一个视图组件中的代码!!!

表面上还是原来的样子,可实际上已经“打扫”过了。这也是重构中需要注意的一点:

  • 步子迈小一点,迈准一点

写在后面

上篇中有人问到若羽说封装请求的意义何在,axios 本身就是带着 Promise的支持了。

这里对这个问题做一个回应,立场仅代表若羽本人,并不为任何人“做代表”:

  1. 封装并非为了 Promise,而是为了将“发送请求”的这个动作封装起来。因为这属于数据获取的行为,而后面 then 里的逻辑实际上是和业务挂钩:为视图设置数据。这是两个不同的行为,就像后端一样:ORM它仅仅是负责从数据库中取数据而已,真正对这个数据进行逻辑操作的,并不是它。这也是接下来博文的主题:专一,一个函数应当只负责一件事情。

  2. 这一篇文章便表示了另一层意思:去重,在第一层封装的过程中我们发现了域名的硬编码问题(不封装也是一样),因此在这里如果不做封装的话,即使将域名提炼出来,涉及到修改的文件同样也会较多。不过这种修改是一次性的。

以上便是若羽对上一篇中示例的解释。

欢迎大家发表评论,共同探讨。

上篇重构代码

edit.vue:

<script>
import RequestSender from '@/requestSender'
export default {
name: "Edit",
data() {
return {
model: {
title: '',
content: '',
}
}
},
methods: {
submit() {
RequestSender.Publish(this.model)
.then(res => {
if(res.data.Code === 200) {
this.$message.success('发布成功');
}
})
}
}
}
</script>

Login.vue:

<script>
import RequestSender from '@/requestSender';
export default {
name: "Login",
data() {
return {
model: {
username: '',
password: '',
}
}
}, methods: {
submit() {
RequestSender.Login(this.model)
.then(res => {
if(res.data.Code === 200) {
this.$message.success('登录成功');
}
})
}
}
}
</script>

Signup.vue:

<script>
import RequestSender from '@/requestSender'; export default {
name: "Signup",
data() {
return {
model: {
username: '',
password: '',
rePassword: ''
}
};
},
methods: {
submit() {
if(this.model.password !== this.model.rePassword){
this.$message.error('两次出入密码不一致.');
return ;
} RequestSender.Signup(this.model)
.then(res => {
if(res.data.Code === 200){
this.$message.success("注册成功");
this.$router.push('./login');
}
});
}
}
}
</script>

requestSender.js:

import axios from 'axios';

class RequestSender {
static GetBlogList() {
return axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list');
} static Publish(data) {
return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/publish', data);
} static Login(data) {
return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/login', data);
} static Signup(data) { return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/signup', data);
}
} export default RequestSender;

浅入深出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:代码整洁之封装

    深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...

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

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

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

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

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

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

随机推荐

  1. Windows 64 位下安装 psyco 1.6

    用 eclipse 运行 python 的时候,第一行总是有红色提示:没有安装 psyco,程序可以正常运行但是会有一点慢.于是就干脆装上吧,红色的提示还是越少越舒服. 百度了一下,在这里,http: ...

  2. Spark之json数据处理

    -- 默认情况下,SparkContext对象在spark-shell启动时用namesc初始化.使用以下命令创建SQLContext. val sqlcontext = new org.apache ...

  3. 读书笔记——《谁说菜鸟不会数据分析—Python篇》

    最近刚读完一本新书,关注的公众号作者出的“谁说菜鸟不会数据分析—Python篇”,话说现在很多微信公众号大牛都在出书,这貌似是一个趋势.. 说说这本书吧,我之前看过一些网文,对于数据分析这一块也有过一 ...

  4. XGBoost类库使用小结

    在XGBoost算法原理小结中,我们讨论了XGBoost的算法原理,这一片我们讨论如何使用XGBoost的Python类库,以及一些重要参数的意义和调参思路. 本文主要参考了XGBoost的Pytho ...

  5. 关于Jvm类加载机制,这一篇就够了

    前言 一个月没更新了,这个月发生了太多的事情,导致更新的频率大大降低,不管怎样收拾心情,技术的研究不能落下! jvm作为每个java程序猿必须了解的知识,博主推荐一本书<深入理解Java虚拟机& ...

  6. C#—使用InstallerProjects打包桌面应用程序

    前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘. 下载打包工具 C#打包桌面应用程序有很多种方法,这里介绍一种使用M ...

  7. 什么是 VxLAN?

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. VLAN 和 ...

  8. 如何用css实线所需要的小三角

    使用css实现三角符号 关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在cs ...

  9. Go - Slice 切片

    概述 切片是一种动态数组,比数组操作灵活,长度不是固定的,可以进行追加和删除. len() 和 cap() 返回结果可相同和不同. 声明切片 //demo_7.go package main impo ...

  10. 深度探索c++对象模型 第二章

    1,c++转换函数:显示转换和隐式转换. 隐式转换为程序员提供了很大的变量.比如整形提升,普通类型转换为类类型(operator int())都为程序带来无尽的方便.试想,如果没有整形提升,一个sho ...