![f52f22e1de5fa85cf04ba94e50079660.png](https://i-blog.csdnimg.cn/blog_migrate/27b883c67273ebb68212479f69fccfdb.jpeg)
封面图:黄梦莹
前言
本文为转载外加意译,并重新排版。
- 原文地址:How to avoid SOLID principles violations in Vue. JS application
- 原文作者:Manu Ustenko
几天前,我的朋友菲利普(Philipp)决定创业(一家面包店,用来烹制很棒的饼干),并请我帮助他创建一个待办事项列表应用程序,以便他可以记录他的工作。
他决定用Vue.JS作为前端框架,但实际上不知道将来如何使他的应用易于扩展和维护。 他听到了一些关于SOLID (SOLID 是啥???)原理和清晰结构体系的神话,但不知道如何在Vue中使用它们。
在本文中,我想讨论如何在Vue.JS项目中避免违反SOLID原则。
啥是SOLID?
SOLID是Michael Feathers提出的面向对象编程的五大软件设计原则首字母缩写 。
Robert Cecil Martin (又叫“鲍勃大爷”)在他的《设计原则与设计模式》一书中进行了推广。(《Design Principles and Design Patterns》)
这五个原则是面向对象编程范式中非常重要的一部分,旨在使我们的程序更灵活、更可读、更易于维护,以便下一步开发。
SOLID原则包括如下概念:
- 单一责任原则
- 开闭原则
- 里氏替换原则
- 接口隔离原则
- 依赖倒置原则
让我们看看实际的Vue.JS项目中如何应用这些原则,以及如何避免违反原则。我们将创建简单的待办事项列表应用程序。让我们在实际的Vue.JS项目中了解所有这些原则,以及如何避免违反原则。我们将创建简单的待办事项列表应用程序 。
先决条件
让我们使用vue cli(https://cli.vuejs.org/)创建一个新的Vue.JS应用。
vue create todo-app
在我们的应用中,我将使用vue 2.6.10 + typescript 3.4.3,因此,如果您还不熟悉 typescript ,可以在此处找到文档(https://www.typescriptlang.org/docs/home.html )。
安装后,我们必须清理一下并删除所有演示组件。 我们的src目录结构看起来像这样:
src
----views
-------Home.vue
----App.vue
----main.ts
----shims-tsx.d.ts
----shims-vue.d.ts
----types.ts
<!-- app.vue -->
<template>
<div id="app">
<router-view />
</div>
</template>
<!-- Home.vue -->
<template>
<div>
Content
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class Home extends Vue {}
</script>
我们准备出发了……
单一责任原则(SRP)
假设我们更改了 **views/Home.vue **组件以获取任务列表并将其显示给用户。 它可能看起来像这样:
<!--Home.vue-->
<template>
<div>
<header class="header">
<nav class="header-nav" />
<div class="container">
<h1>My todo list</h1>
</div>
</header>
<main>
<div class="container">
<div class="todo-list">
<div
v-for="{ id, title, completed } in todos"
:key="id"
class="todo-list__task"
>
<span :class="{ 'todo-list__task--completed': completed }">
{
{ title }}
</span>
</div>
</div>
</div>
</main>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ITodo } from '@/types'
@Component
export default class Home extends Vue {
todos: ITodo[] = []
mounted() {
this.fetchTodos()
}
fetchTodos(): void {
fetch('https://jsonplaceholder.typicode.com/todos/')
.then(response => response.json())
.then((todos: ITodo[]) => (this.todos = todos))
}
}
</script>
<style lang="scss">
.header {
width: 100%;
&-nav {
background: teal;
width: 100%;
height: 56px;
}
}
.container {
padding: 1.5rem;
}
.todo-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
&__task {
width: 24%;
padding: 1.5rem;
margin: 0.5%;
text-align: left;
color: #4169e1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
&:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
}
&--completed {
color: #2e8b57;
text-decoration: line-through;
}
}
}
</style>
//type.ts
export interface ITodo {
id: number
userId: number
title: string
completed: boolean
}
基本上,我们在一个 **views/Home.vue **组件中创建了整个应用程序。在这里,我们可以看到违反SRP的说法:“每个组件都只有一个更改的理由”。但是,我们有多少原因需要更改此组件?
- 我们要更改 **fetchTodos() **方法来获取待办事项。可能有任何更改的原因:获取到axios或任何其他库,api,方法本身等。
- 我们想在此组件中添加更多元素:边栏,菜单,页脚等。
- 我们要更改现有元素:标题或待办事项列表。
我们至少找到了三个要更改 **views/Home.vue **的原因。</