Vue3实践SOLID五大设计原则

最新推荐文章于 2024-06-20 08:57:02 发布
最新推荐文章于 2024-06-20 08:57:02 发布
阅读量717 收藏
点赞数
文章标签： vue vue3 设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LENOVOJXN/article/details/114108352
版权

本篇内容在国外的一篇博客的基础上修改的，基于Vue3 + JavaScript实现，使用腾讯前端AlloyTeam的代码规范对演示代码进行校验，Git提交规范使用开源工具husky来验证。本文涉及的代码均以上传到GitHub和Gitee中。文章中有不正确的地方，请大家批评指正，不吝赐教。

1. SOLID原则

SOLID原则是面向对象编程和面向对象设计的5大基本原则，分别代表的是：

  • S：SRP，单一职责原则
  • O：OCP，开放封闭原则
  • L：LSP，里氏替换原则
  • I：ISP，接口隔离原则
  • D：DIP，接口隔离原则

下面对5大基本原则做一个简单的描述，如果之前有了解，可以跳转到第2章，了解如何在Vue3中一步步实践这5大原则。

1.1 单一职责原则

单一职责原则规定：一个对象应该只包含单一的职责，并且该职责被完整地封装在一个类中，即定义有且仅有一个原因使类变更。

反例：A类负责两个不同的职责：职责B和职责C。当由于职责B需求发生了改变而修改A类时，有可能会导致职责C不能正常运行了，这就说明职责B和职责C被耦合在A类。

1.2 开放封闭原则

开放封闭原则规定：一个实体应该对扩展开放，对修改是封闭的，也就说说，如果想对一个已完成或者已运行的实体添加新的功能，那么应该通过扩展的方式来实现对实体的变化，而不应该通过对现有的实体进行修改来实现变化。

1.3 里氏替换原则

里氏替换原则规定：一个对象出现的地方，都可以使用子类来替换，并且不会导致程序的错误，它的意义在于：子类可以扩展父类的功能，但是不能修改父类原有的功能。

1.4 接口隔离原则

接口隔离原则规定：客户端不应该被迫实现一些他们不需要的接口，而应该把胖接口中的方法分组，然后使用多个接口来替代它，确保每个接口服务于一个模块。

1.5 依赖倒置原则

依赖倒置原则规定：抽象不应该依赖于细节，而细节应该依赖于抽象，也就说，应该针对抽象（接口）编程，而不是针对实现细节编程。

依赖倒置原则和开放封闭原则的关系：开放封闭原则是面向对象设计原则的基础，而依赖倒置原则是实现开放封闭原则的一个基础。

2 初始Vue3项目

这里使用vite来初始化Vue3项目，这里不介绍vite是什么，可移步vite官网查看。

$ npm create @vitejs/app --template vue

2.1 配置AlloyTeam代码规范检测

这里以VSCode编辑器为例，介绍如何在Vue3项目中配置AlloyTeam代码规范检测。

  1. VSCode需要安装的插件：ESLint、Prettier - Code formatter、Vetur、Auto Close Tag（可选）、Auto Rename Tag（可选）和Debugger for Chrome（可选）
  2. VSCode配置：使用组合键Ctrl+Shift+P打开Command Palette，选择Preference: Open Settings (JSON)，在文件中配置一下内容：
{
  "eslint.validate": ["javascript", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "files.eol": "\n",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}
  1. 项目安装依赖：package.json文件内容如下，可直接替换devDependencies中的内容，然后使用npm install安装依赖
{
    "name": "vite-project",
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview"
    },
    "dependencies": {
        "vue": "^3.0.5"
    },
    "devDependencies": {
        "@types/eslint": "^7.2.6",
        "@vitejs/plugin-vue": "^1.1.4",
        "@vue/compiler-sfc": "^3.0.5",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.20.0",
        "eslint-config-alloy": "^3.10.0",
        "eslint-config-prettier": "^8.0.0",
        "eslint-plugin-vue": "^7.6.0",
        "prettier": "^2.2.1",
        "vite": "^2.0.1",
        "vue-eslint-parser": "^7.5.0"
    }
}
  1. 在Vue3项目根目录下增加两个文件：.prettierrc.js、.eslintrc.js
  • .eslintrc.js
module.exports = {
    extends: ['alloy', 'alloy/vue'],
    env: {},
    globals: {},
    rules: {
        'vue/component-tags-order': [
            'error',
            {
                order: [['template', 'script'], 'style'],
            },
        ],
    },
};
  • .prettierrc.js
module.exports = {
    // 一行最多 120 字符
    printWidth: 120,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾需要有逗号
    trailingComma: 'all',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // vue 文件中的 script 和 style 内不用缩进
    vueIndentScriptAndStyle: false,
    // 换行符使用 lf
    endOfLine: 'lf',
    // 格式化嵌入的内容
    embeddedLanguageFormatting: 'auto',
};
  1. 通过以上配置，在保存文件时，会自动检测相关代码，并按照约定的格式格则自动调整。

2.2 配置Git提交规范验证工具：husky

  1. 安装依赖项：npm i -D husky
  2. 修改package.json：在devDependencies后添加husky，具体内容如下：
{
    "name": "vite-project",
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "serve": "vite preview"
    },
    "dependencies": {
        "vue": "^3.0.5"
    },
    "devDependencies": {
        "@types/eslint": "^7.2.6",
        "@vitejs/plugin-vue": "^1.1.4",
        "@vue/compiler-sfc": "^3.0.5",
        "babel-eslint": "^10.1.0",
        "eslint": "^7.20.0",
        "eslint-config-alloy": "^3.10.0",
        "eslint-config-prettier": "^8.0.0",
        "eslint-plugin-vue": "^7.6.0",
        "husky": "^5.1.1",
        "prettier": "^2.2.1",
        "vite": "^2.0.1",
        "vue-eslint-parser": "^7.5.0"
    },
    "husky": {
        "hooks": {
            "commit-msg": "node script/verify-commit.js"
        }
    }
}
  1. 在项目根目录下创建script文件夹，并在其中创建verify-commit.js文件
const msgPath = process.env.HUSKY_GIT_PARAMS;
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim();

// 提前定义好 commit message 的格式，如果不符合格式就退出程序。
const commitRE = /^(feat|fix|docs|style|refactor|perf|test|workflow|build|ci|chore|release|workflow)(\(.+\))?: .{1,50}/;

if (!commitRE.test(msg)) {
    console.error(`
        不合法的 commit 消息格式。
        请查看 git commit 提交规范：https://github.com/woai3c/Front-end-articles/blob/master/git%20commit%20style.md
    `);

    process.exit(1);
}

2.3 实现代码事件列表

  1. 删除components文件夹
  2. 增加views文件夹，并在其中创建Home.vue文件
<script>
import { onMounted, ref } from 'vue';
export default {
    name: 'Home',
    setup() {
        let todos = ref([]);

        const fetchTodos = () => {
            fetch('https://jsonplaceholder.typicode.com/todos/')
                .then((response) => response.json())
                .then((response) => {
                    todos.value = response;
                });
        };
        onMounted(() => {
            fetchTodos();
        });

        return {
            todos,
        };
    },
};
</script>

<template>
    <div>
        <header class="header">
            <nav class="header-nav"></nav>
            <div class="container">
                <h1>我的代办事项</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>

<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>
  1. 修改App.vue
<script>
export default {};
</script>

<template>
    <div id="app">
        <router-view />
    </div>
</template>
  1. 在src目录下新建router.js
import { createRouter, createWebHistory } from 'vue-router';

import Home from './views/Home.vue';

const routerHistory = createWebHistory();
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
    ],
});

export default router;
  1. 修改main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);
app.mount('#app');
  1. 实现效果：
$ npm run dev

image-20210224140216138

3 SRP改造

在上面的示例中，前面页面的工作都是在Home.vue这个文件中实现，包括：header bar、nav bar、todo list等。如果将SRP原则应用于当前现有的项目中：每个组件都应该只有一个改变的理由。很明显，当前的Home.vue组件不能满足SRP理由，因为它有多个可以改变的理由：

  • 使用axios替换fetch
  • 根据需求添加其他元素，例如：sidebar、img
  • 改变列表的展示形式
  • …

当整个系统功能越来越多，系统越来越庞大的时候，我们可能对Home.vue文件失去控制，因此，尝试使用SRP原则对其进行改造。

3.1 抽取访问RESTful接口的内容

在项目根目录创建services文件夹，然后在该文件夹中创建api.js文件，内容如下：

export class Api {
    constructor(url) {
        this.baseUrl = 'https://jsonplaceholder.typicode.com/';
        this.url = url;
    }

    async fetch() {
        const response = await fetch(`${this.baseUrl}``${this.url}`);
        return await response.json();
    }
}

3.2 拆分页面组件

将header从Home.vue中拆分出来，在components文件夹中创建MyHeader.vue文件：

<script>
export default {
    name: 'MyHeader',
    props: ['listName'],
};
</script>

<template>
    <header class="header">
        <nav class="header-nav" />
        <div class="container">
            <h1>{{$props.listName}}</h1>
        </div>
    </header>
</template>

<style lang="scss">
.header {
    width: 100%;
    &-nav {
        background: teal;
        width: 100%;
        height: 56px;
    }
}
</style>

将todo-list也从Home.vue中拆分出来，在components文件夹中创建MyTodoList.vue文件：

<script>
export default {
    name: 'MyTodoList',
    props: ['todos']
}
</script>

<template>
    <div class="container">
        <div class="todo-list">
            <div v-for="{ id, title, completed } in $props.todos" :key="id" class="todo-list__task">
                <span :class="{ 'todo-list__task--completed': completed }">
                    {{ title }}
                </span>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.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>

3.3 修改Home.vue

修改Home.vue文件，引入刚刚拆分的组件和API接口：

<script>
import { onMounted, ref } from 'vue';
import MyHeader from '../components/MyHeader.vue';
import MyTodoList from '../components/MyTodoList.vue';
import { Api } from '../services/api'
export default {
    name: 'Home',
    components: {
        MyHeader,
        MyTodoList
    },
    setup() {
        let todos = ref([]);
        const fetchTodos = async () => {
            const api = new Api('todos')
            return await api.fetch()
        };
        onMounted(async () => {
            todos.value = await fetchTodos();
        });
        return {
            todos,
        };
    },
};
</script>

<template>
    <div>
        <MyHeader :listName="代办事项列表"/>
        <main>
            <MyTodoList :todos="todos"/>
        </main>
    </div>
</template>

<style lang="scss">
.container {
    padding: 1.5rem;
}
</style>

通过以上步骤，使演示示例基本满足SRP原则的规定，即：

  1. api.js文件对应着RESTful接口的调用
  2. MyHeader.vue文件对应着header
  3. MyTodoList.vue文件对应着todo-list代办事项列表

4 OCP改造

OCP原则规定：对扩展开放，对修改关闭。会看下当前示例，现在展示具体的代办事项使用Card的形式来展示的，那么如果想用Row的方式来展示，就要修改现有的MyTodoList.vue文件，这显然与不符合OCP原则。具体的改造方法如下：

4.1 拆分Card表示形式

将MyTodoList.vue文件中涉及的Card表现形式的相关代码抽离出来，添加到具体的文件中。在components文件夹中新建文件MyTodoCard.vue文件，内容如下：

<script>
export default {
    name: 'MyTodoCard',
    props: ['todo']
}
</script>

<template>
    <div class="todo-list__task">
        <span :class="{ 'todo-list__task--completed': $props.todo.completed }">
            {{ $props.todo.title }}
        </span>
    </div>
</template>

<style lang="scss" scoped>
.todo-list {
  &__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>

4.2 修改MyTodoList

修改MyTodoList.vue文件，主要是使用slot插槽的形式替换之前具体的Card表现形式，并移除多余的CSS代码：

<script>
export default {
    name: 'MyTodoList'
}
</script>

<template>
    <div class="container">
        <div class="todo-list">
            <slot/>
        </div>
    </div>
</template>

<style lang="scss">
.todo-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
</style>

4.3 修改Home.vue

修改Home.vue文件，引入MyTodoCar.vue文件，MyTodoList元素中引入MyTodoCar，为代办事项设置对应的表示形式：

<script>
import { onMounted, ref } from 'vue';
import MyHeader from '../components/MyHeader.vue';
import MyTodoList from '../components/MyTodoList.vue';
import MyTodoCard from '../components/MyTodoCard.vue';
import { AxiosApi } from '../services/AxiosApi';

export default {
    name: 'Home',
    components: {
        MyHeader,
        MyTodoList,
        MyTodoCard
    },
    setup() {
        let todos = ref([]);

        const fetchTodos = async () => {
            const api = new AxiosApi()
            return await api.fetch('todos')
        };
        onMounted(async () => {
            todos.value = await fetchTodos();
        });

        return {
            todos,
        };
    },
};
</script>

<template>
    <div>
        <MyHeader listName="代办事项列表"/>
        <main>
            <MyTodoList>
                <!-- <MyTodoCard v-for="todo in todos" :key="todo.id" :todo="todo"/> -->
                <MyTodoRow v-for="todo in todos" :key="todo.id" :todo="todo"/>
            </MyTodoList>
        </main>
    </div>
</template>

<style lang="scss">
.container {
    padding: 1.5rem;
}

</style>

4.4 新增Row.vue文件

增加一种新的代办事项的展示形式，来验证经过上述修改是否能满足OCP原则的规定。

  1. 在components文件夹中创建MyTodoRow.vue文件
<script>
export default {
    name: 'MyTodoRow',
    props: ['todo']
}
</script>

<template>
    <div class="todo-list__row">
        <span>{{$props.todo.id}}.</span>
        <span :class="{ 'todo-list__row--completed': $props.todo.completed }">
            {{$props.todo.title}}
        </span>
    </div>
</template>

<style lang="scss">
.todo-list {
  &__row {
    width: 100%;
    text-align: left;
    color: #4169e1;
    &--completed {
      text-decoration: line-through;
      color: #2e8b57;
    }
  }
}
</style>
  1. 在Home.vue文件中使用MyTodoRow替换MyTodoCard
<script>
import { onMounted, ref } from 'vue';
import MyHeader from '../components/MyHeader.vue';
import MyTodoList from '../components/MyTodoList.vue';
// import MyTodoCard from '../components/MyTodoCard.vue';
import MyTodoRow from '../components/MyTodoRow.vue';
import { Api } from '../services/api';

export default {
    name: 'Home',
    components: {
        MyHeader,
        MyTodoList,
        // MyTodoCard,
        MyTodoRow
    },
    setup() {
        let todos = ref([]);

        const fetchTodos = async () => {
            const api = new Api('todos')
            return await api.fetch()
        };
        onMounted(async () => {
            todos.value = await fetchTodos();
        });

        return {
            todos,
        };
    },
};
</script>

<template>
    <div>
        <MyHeader listName="代办事项列表"/>
        <main>
            <MyTodoList>
                <!-- <MyTodoCard v-for="todo in todos" :key="todo.id" :todo="todo"/> -->
                <MyTodoRow v-for="todo in todos" :key="todo.id" :todo="todo"/>
            </MyTodoList>
        </main>
    </div>
</template>

<style lang="scss">
.container {
    padding: 1.5rem;
}
</style>

image-20210225094748530

可以看到，修改代办事项的表现形式，就需要增加一个.vue文件来实现具体的表现形式，然后在Home.vue文件中做简单的修改，并且MyTodoList.vue文件保持不变。到这里，基本实现OCP原则。

5 LSP改造

LSP原则规定：当对父类进行扩展时，能够使用子类的对象来替换之前使用的父类的对象，从而不会破坏客户机的代码。具体到当前演示示例该如何实现呢？考虑这种情况：现在基于axios来从服务器获取todo-list，并且不修改Home.vue的文件，这种情况该怎么实现呢？

5.1 修改API传参方式

将传递URL具体地址的入口由new Api()转为fetch函数，即：api.js的内容：

export class Api {
    constructor() {
        this.baseUrl = 'https://jsonplaceholder.typicode.com/';
    }

    async fetch(url) {
        const response = await fetch(`${this.baseUrl}${url}`);
        return await response.json();
    }
}

Home.vue也做相应的修改，主要是用来适配api.js的修改，修改后的setup的内容为：

   setup() {
        let todos = ref([]);

        const fetchTodos = async () => {
            const api = new Api('todos');
            return await api.fetch();
        };
        onMounted(async () => {
            todos.value = await fetchTodos();
        });

        return {
            todos,
        };
    },

5.2 添加基类BaseApi

在services文件夹中创建文件BaseApi.js作为API的基类，主要存储URL中的服务器信息，并使用fetch的方式来获取服务器返回数据，内容如下：

export class BaseApi {
    constructor() {
        this.baseUrl = 'https://jsonplaceholder.typicode.com/';
    }

    async fetch(url) {
        const response = await fetch(`${this.baseUrl}${url}`);
        return await response.json();
    }
}

5.3 扩展基类使用axios查询RESTful接口

在services文件夹中创建文件AxiosApi.js，使用axios来查询RESTful接口。

import axios from 'axios';
import { BaseApi } from './BaseApi.js';

export class AxiosApi extends BaseApi {
    async fetch(url) {
        const { data } = await axios.get(`${this.baseUrl}${url}`);
        return data;
    }
}

5.4 修改api.js

接下来，需要修改api.js文件，用来调用BaseApi.js或者AxiosApi.js

import { BaseApi } from './BaseApi';

export class Api {
    constructor() {
        this.apiProvider = new BaseApi();
    }

    async fetch(url) {
        return await this.apiProvider.fetch(url);
    }
}

如果想替换成axios的方式来获取服务器数据，只需要将引入import { AxiosApi } from './AxiosApi'，并修改apiProvider的实例化方式即可。这样我们就完成参照LSP规则对演示示例的改造。

6 ISP改造

ISP规则应用在组件情形时，表示：不应该强迫组件依赖于它们不使用的属性或者方法。来回顾之前的代码，主要观察对于MyTodoRow和MyTodoCard的传参方式，是把整个todo对象传递给了这两个组件，但是对象中的userId属性在这两个组件中都没有用到，并且MyTodoCard没有使用到id这个属性。可见，当前的演示示例违反了ISP原则。

解决这个问题的两种方法：

  1. 将todo实例切分成更小的实例
  2. 向组件传递它需要的数据

这里采用第2种解决方法。分别修改MyTodoCard.vue和MyTodoRow.vue文件，将需要使用的数据属性添加到props中，然后修改Home.vue文件，修改向其传递数据的方式。

  • MyTodoCard.vue
<script>
export default {
    name: 'MyTodoRow',
    props: ['id', 'completed', 'title'],
};
</script>

<template>
    <div class="todo-list__row">
        <span>{{ $props.id }}.</span>
        <span :class="{ 'todo-list__row--completed': $props.completed }">
            {{ $props.title }}
        </span>
    </div>
</template>

<style lang="scss">
.todo-list {
    &__row {
        width: 100%;
        text-align: left;
        color: #4169e1;
        &--completed {
            text-decoration: line-through;
            color: #2e8b57;
        }
    }
}
</style>
  • MyTodoCard.vue
<script>
export default {
    name: 'MyTodoCard',
    props: ['completed', 'title'],
};
</script>

<template>
    <div class="todo-list__task">
        <span :class="{ 'todo-list__task--completed': $props.completed }">
            {{ $props.title }}
        </span>
    </div>
</template>

<style lang="scss" scoped>
.todo-list {
    &__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>
  • Home.vue
<script>
import { onMounted, ref } from 'vue';
import MyHeader from '../components/MyHeader.vue';
import MyTodoList from '../components/MyTodoList.vue';
import MyTodoCard from '../components/MyTodoCard.vue';
// import MyTodoRow from '../components/MyTodoRow.vue';
import { Api } from '../services/api.js';

export default {
    name: 'Home',
    components: {
        MyHeader,
        MyTodoList,
        MyTodoCard,
        // MyTodoRow,
    },
    setup() {
        let todos = ref([]);

        const fetchTodos = async () => {
            const api = new Api();
            return await api.fetch('todos');
        };
        onMounted(async () => {
            todos.value = await fetchTodos();
        });

        return {
            todos,
        };
    },
};
</script>

<template>
    <div>
        <MyHeader listName="代办事项列表" />
        <main>
            <MyTodoList>
                <MyTodoCard v-for="todo in todos" :key="todo.id" :title="todo.title" :completed="todo.completed" />
                <!-- <MyTodoRow
                    v-for="todo in todos"
                    :id="todo.id"
                    :key="todo.id"
                    :title="todo.title"
                    :completed="todo.completed"
                /> -->
            </MyTodoList>
        </main>
    </div>
</template>

<style lang="scss">
.container {
    padding: 1.5rem;
}
</style>

7 DIP改造

DIP规则规定：高级类（组件）不能依赖低级类（组件），他们两个都应该依赖抽象，抽象不能依赖细节，而是细节应该依赖抽象。其中：

  • 低级类用来实现基础的操作，例如：与API对接；
  • 高级类包含了复杂的业务逻辑，这些逻辑用来指导低级类进行某些操作。

参照DSP规则，修改api相关的类文件。

作者原文中使用TypeScript实现的DIP规则。JavaScript中没有接口这个功能，但是可以使用模块封装来实现类似的行为，例如：导出类或者方法。这里使用导出类的方法来实现DIP规则。

  1. 修改BaseApi.js文件，实现类似接口的功能
export class BaseApi {
    constructor() {
        this.baseUrl = 'https://jsonplaceholder.typicode.com/';
    }

    async fetch(url) {
        throw new Error('没有具体的实现方法');
    }
}
  1. 在services文件夹创建FetchApi.js文件，继承BaseApi.js方法，使用fetch方法来实现获取数据
import { BaseApi } from './BaseApi.js';

export class FetchApi extends BaseApi {
    async fetch(url) {
        const response = await fetch(`${this.baseUrl}${url}`);
        return await response.json();
    }
}
  1. 修改api.js文件，在这个文件中，可以切换AxiosApi.js和FetchApi.js文件的引用，调用不同的方式来获取服务器数据
import { AxiosApi } from './AxiosApi';

export class Api {
    constructor() {
        this.apiProvider = new AxiosApi();
    }

    async fetch(url) {
        return await this.apiProvider.fetch(url);
    }
}

8 参考

码农阿焦
关注
vue 创建前调用方法_SolidWorks中标准件库的创建及调用方法
weixin_26872803的博客
01-25 265
在使用SolidWorks进行产品设计时，常用的标准件（如螺栓、螺母、垫圈等）通常可以在安装了SolidWorksToolbox插件后调出使用，而许多标准件在Toolbox并不存在，不能从插件中直接调用。在用到这些零件时，设计人员常常因其尺寸、规格不同而进行重复设计，效率低、工作量大。针对这一问题，本文以“外六角螺丝”为例，详细介绍系列solidworks标准件库的创建方法及solidworks标...
架构师必须知道的架构设计原则
架构师波波的专栏
02-11 2215
一、前言 如果一个技术已经存在3年，比如现在很火的前端技术react和vue等，那么我能预估这个技术大致还有3年的生命期，再久就不确定了；如果一个架构或设计原则已经存在15年，例如单一职责和依赖倒置原则，我可以预期它还有15年甚至更久的生命期。原则是比具体技术更抽象，更接近事物本质，也更经得起时间考验的东西。这些原则沉淀在架构师的脑海中，最终内化成他的mindset，以潜意识方式影响和指导他的架构...
Web前端：11个让你代码整洁的原则(1)
07-17
Web前端：11个让你代码整洁的原则(1)
vue.js 3设计与实现 -- Vue.js 3 的设计思路
qq_36973122的博客
02-09 987
vue.js 3设计与实现 -- Vue.js 3 的设计思路
深入解析ESLint配置：从入门到精通的全方位指南，精细调优你的代码质量保障工具
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
06-20 5683
ESLint是一个主流的JavaScript Lint工具，用于监测JavaScript代码质量，可以帮助开发者提升编码能力。它可以很容易地统一开发者的编程风格，同时也可以通过配置文件来自定义规则。在前端开发中，ESLint可以帮助我们检查代码中的潜在问题，提高代码的可读性和可维护性。
【译PPT】尤雨溪：Vue 3.0的设计原则
weixin_46837985的博客
12-25 377
点击上方“前端进阶周刊”，选择“置顶或者星标”期待你的关注！前言2019年11月11号在Vue Toronto 2019会议上，@尤雨溪做了关于《Design Principles of...
vue 失去聚焦(软键盘消失)_如何避免在Vue应用中违反SOLID原则
weixin_39679091的博客
11-25 296
在这篇文章中，我将讨论如何在 Vue 应用中使用 SOLID 原则。SOLID 包括以下观点：单一职责原则开闭原则里氏替换原则依赖倒置原则接口隔离原则接下来我们看看如何在 Vue 实战中避免这些原则，我们从一个 TODO LIST 项目中去体会这些观点。准备用 vue cli 初始化一个 Vue 项目。vue create todo-app我们用 vue2.6.10 + typescri...
_vue-2
beifeng11996的博客
02-26 365
所以我们可以v-model进行如下改写： 这个语法糖必须是固定的，也就是说属性必须为，方法名必须为：。 知道了的原理，我们可以在自定义组件上实现 原理会将组件的 默认转化成 原生的 ，会根据标签的不同生成不同的事件和属性 ----------@----------的作用 的工作原理 相同点 都是语法糖，都可以实现父子组件中的数据的双向通信 区别点 格式不同：, : : 只能用一次；可以有多个 ----------@----------插槽 作用域插槽 ------
从设计原则，程序实现目标谈谈前端常用的10种设计模式和应用场景
前端361
07-31 1614
总括： 近几年前端技术迭代迅速，除了ES6，Vue，React，Angular，各种企业级框架也层出不穷，比如egg，umi，nuxt，next，koa等等，还有redux, vuex, Mobx, Flux，dva等状态管理库，这些给前端开发工作带来了极大的简化，同时也给开发者很大的学习挑战。但是想要在前端架构层面有一定的高度，这些都是必须要掌握的。除了这些，还要掌握工程化，自动化，服务端等。那么这些类库或者框架剥离业务之后，其背后的设计思想以及遵循的底层程序原理是怎样的呢？ 很多开发者对于知识的掌握
239_Java毕业设计管理系统_论文管理系统.rar
04-27
遵循SOLID原则，保证代码的可读性、可维护性和可扩展性。 五、性能优化与安全考虑 1. 使用分页查询减少数据库负担，避免一次性加载大量数据。 2. 对敏感信息如密码进行加密存储，保障用户数据安全。 3. 定期备份...
CQRS架构-《复杂软件设计之道：领域驱动设计全面解析与实战》笔记 - 5
马赛琦的博客
03-19 1381
在我的博客阅读本文 文章目录1. DDD的实现架构1.1. 三层架构1.2. 传统DDD分层架构1.3. 清洁（Clean）架构1.4. 六边形架构1.5. 垂直切片架构1.6. CQRS架构的特点1.6.1. 命令和查询分离1.6.2. 不同的数据访问方式1.6.3. 领域事件实现数据同步2. 各种架构总结3. 参考资料 1. DDD的实现架构 DDD的实现架构有很多种，这些架构都是一种关注点分离模式的实现，也是SOLID单一职责原则的体现，将人们关注的一个职责与其他职责分离，不要试图混合在一起。传统.
一次编写组件，到处运行。 编译为Vue，React，Solid，Liquid，Svelte等。-JavaScript开发
05-26
一次编写组件，到处运行。 编译为Vue，React，Solid，Liquid，Svelte等。 一次编写组件，到处运行。 编译为Vue，React，Solid，Liquid等。 为什么选择组件库。 管理对提供逻辑或功能的库的支持，这些逻辑或功能旨在在各种框架（例如，Material，Semantic，SDK等）中使用。 当前没有可行的解决方案可以一次性编写重要的逻辑，并立即拥有一个可在许多不同框架中正常运行的版本。 例如，当组织建立组件库时
单一职责模式例子。
12-25
设计模式6大原则之单一职责械，SIP,一个类只负责处理一个业务，
《Linux/Unix设计思想》随笔 ——Linux/Unix哲学概述...
weixin_30755709的博客
11-01 195
Standing on Shoulders of Giants “布道者”指的是那些坚定地信仰某一宗教，并且不遗余力地向人们传播此宗教的修道者。 Unix哲学概述 Unix哲学的几条准则看似简单。事实上，它们简单到会容易使人们忽略其重要性。这就是它们颇具欺骗性的地方。其实，简单的外表下掩盖着一个事实：如果人们能够始终如一的贯彻它们，这些准则可是非常行之有效的。 以下这份清单会让你对Unix...
Solid.js前端新秀框架 力压 web3.js 框架
ejinxian的专栏
12-14 682
框架本身只有7 KB大小，无需在代码中添加额外魔法或奇技淫巧就能彻底压榨运行性能。更重要的是，它是真正的响应式。函数组件只会被调用一次，也就是说，你可以用它做些前所未闻的事，比如在会变化的顶层函数中使用setInterval。Marko 会在内容加载完成后立刻推流向客户，无需等待客户端的 JavaScript 程序打包或数据请求再开始渲染。的语法，你可以用现代化的开发方式，获得性能最快的代码。是一个声明式、高效且灵活用于构建用户界面的。二、SolidJS 特点。跑到了 1.93。
每个开发者都应该知道的SOLID原则
bagc47052的博客
10-27 200
每个开发者都应该知道的SOLID原则 单一职责原则（SRP） 它为什么违反了 SRP？ 这种设计将来会带来什么问题？ 开闭原则（OCP） 如何使它（AnimalSound）符合 OCP？ 里氏替换原则（LSP） 接口隔离原则（ISP） 依赖倒置原则（DIP） 小结 每个开发者都应该知道的SOLID原则 转载自此，原作者为 Chidume Nnamdi。 面向对象编程带...
聊一聊 Solid 和 Vue 框架有啥差异性？
前端达人
11-10 568
Solid.js和Vue.js都是JavaScript框架，在开发者社区中引起了相当大的关注和采用。每个框架都满足了不同的需求和偏好，具有独特的方法论、理念和特性。本文旨在对它们进行评估，探讨它们的基本理念、架构、可用性、性能等方面。让我们从两个简短的描述开始：Solid.js依赖于一种创新的、细粒度的响应式系统，确保高效的依赖跟踪和实时UI更新。这个“响应式优先”的JavaScript框架优先考...
由浅入深，带你用JavaScript实现响应式原理（Vue2、Vue3响应式原理）
qq_52732369的博客
03-27 1681
由浅入深，带你用JavaScript实现响应式原理（Vue2、Vue3响应式原理） 目录由浅入深，带你用JavaScript实现响应式原理（Vue2、Vue3响应式原理）前言1.Object.defineProperty2.Proxy2.1.Proxy的基本使用2.2.Proxy的set和get捕获器2.3.Proxy的apply和construct捕获器2.4.Proxy所有的捕获器3.Reflect3.1.Reflect有什么作用呢？3.2.Reflect的基本使用3.3.Reflect上常见的方法3.
vue 定时器 定时任务_使用Solid协议通过Vue实施的任务管理器
cuk5340的博客
07-29 403
vue 定时器 定时任务 重点：Solid Task Manager (Focus: Solid Task Manager) Task Manager implemented with Vue using the Solid protocol to store data into a Solid POD. It is also possible to use the application off...
Vue3 Composition API：替代Mixins的高效实践
Vue3 Composition API 是Vue 3.0中引入的一个强大的特性，它旨在简化组件内部的组织和代码复用，从而替代了Vue 2.x中的混入（Mixins）机制。混入在Vue 2中用于将共享的功能如数据属性、方法或计算属性注入到多个组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值