封装类与封装函数

目录结构

src/

├── utils/

│ ├── test.js

│ ├── Calculator.js

├── views/

│ ├── Home.vue

├── App.vue

共同点：模块导出与模块引入

封装函数

场景

简单、轻量级和性能敏感的场景，适合快速开发和维护。

优

可维护性： 相关的功能和数据集中在一个单元内，使得修改和维护代码更加容易，降低了修改一处代码可能引发的连锁错误风险
可读性： 封装将复杂的逻辑隐藏在内部，通过清晰的接口提供简洁的使用方式，提高了代码的可读性
**灵活性：**封装可以通过修改内部实现而不影响外部调用，为代码的扩展和修改提供了灵活性。

缺

缺乏封装性： 函数封装难以将相关的功能和数据组织在一起，代码的模块化程度较低。
扩展性差： 函数封装的代码在扩展时可能需要大量修改，不如类封装灵活。

实战

javascript 复制代码

// utils-test.js
// 定义一个函数来计算两个数的和
export function addNumbers(a, b) {
    return a + b;
}

javascript 复制代码

//home.vue
<template>
  <h1>调用封装函数，5+3的结果：{{ result }}</h1>
</template>

<script setup>
import { addNumbers } from '引入路径'
import { onMounted, ref } from "vue";

const result =ref(null);
onMounted(() => {
  console.log("组件挂载，开始执行函数");
  result.value=addNumbers(5, 3); //页面输出  调用封装函数，5+3的结果：8
})

</script>

<style></style>

实战效果

封装类：

场景

高度封装、模块化和面向对象编程的场景，适合处理复杂的功能和数据。

优

数据隐藏： 封装类可以将类的内部数据成员设为私有，只通过公共方法进行访问和修改，实现数据的隐藏和保护。
代码组织和复用： 将相关的功能和数据组织在一个类中，便于代码的管理和复用。
解耦和独立性： 封装类使得类与外部的依赖减少，提高了类的独立性，降低了不同部分代码之间的耦合度。
接口规范： 封装类通过定义明确的公共接口，规范了外部与类的交互方式。

缺

复杂性： 学习难度也高**，** 编写过渡抽象**，**代码难以理解和维护。
过度设计: 可能会导致代码过于复杂冗余，反而降低了可维护性。

实战

javascript 复制代码

// Calculator.js
// 定义一个类来计算两个数的和
class Calculator {
    constructor() {
        // 可以在这里初始化一些属性
    }

    // 定义一个方法来计算两个数的和
    addNumbers(a, b) {
        return a + b;
    }
}
export default Calculator;

javascript 复制代码

//home.vue
<template>
  <h1>调用封装类，5+3的结果：{{ result }}</h1>
</template>

<script setup>
import Calculator from '引入路径'
import { onMounted, ref } from "vue";

const result =ref(null);
onMounted(() => {
  const calculator = new Calculator();
  result.value=calculator.addNumbers(5, 3); //页面输出  调用封装类，5+3的结果：8
})

</script>

<style></style>