面向对象开发DialogComponent组件

2023-03-08 09:46 由 FE小鑫同学发表于 #前端开发

🎄Hi~ 大家好，我是小鑫同学，一位长期从事前端开发的编程爱好者，我将使用更为实用的案例输出更多的编程知识，同时我信奉分享是成长的唯一捷径，在这里也希望我的每一篇文章都能成为你技术落地的参考~

🚀技术&代码分享

我在 IT200 总结技术学习；
我在 1024Code 在线编写代码；
我在掘金分享技术文章；
我在 Github 参与开源学习；

😇推荐几个好用的工具

var-conv 适用于VSCode IDE的代码变量名称快速转换工具
generator-vite-plugin 快速生成Vite插件模板项目
generator-babel-plugin 快速生成Babel插件模板项目

进入正题

在各种场景的开发中Dialog组件的出现频率都是非常高的，Dialog组件作为一个容器组件受容器内业务代码复杂度的影响，代码行数、变量及函数的定义可能会很多，这样的组件就一定要考虑封装使用，以保证主流程代码的简洁。下面一起来看一下如何利用面向对象的思想来封装它吧~

技术选型

Vuejs3.x + Typescript + <script setup> 是目前编写SFC组件的推荐方式，相比直接使用setup函数编码体验会更好，AntdV组件库的使用频率相比ElementUI要高，推荐新项目直接选用AntdV，完整代码可以在1024Code直接Fork或导出到本地。

代码分析

下面的代码来自AntdV组件库Model组件的示例，Model需要一个visible属性来控制是否显示和隐藏，由button的click事件来触发修改visible属性显示，并且可以通过ok事件的触发来表示对Model内业务逻辑的认可。

从这个示例来看代码当然是没有拆分组件的必要的，当但代表主流程业务的button和由modal包裹的业务流程变得多起来的时候，script里面的代码可读性将大大降低。

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref<boolean>(false);

const showModal = () => {
  visible.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  visible.value = false;
};
</script>

<template>
  <a-button type="primary" @click="showModal">Open Modal</a-button>
  <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

<style scoped>
</style>

普通的组件拆分

常规的组件拆分大家按习惯来做一定是考虑通过Props传递visible参数来控制子组件中Model组件的显示，但是你是没有办法直接将Props的visible属性绑定到Model，因为在关闭弹窗是涉及到了修改变量，这样的做法在Vuejs中认为是危险的（父子组件单向数据流），所以必须要通过子组件重新定义变量来接收后使用；

另一个问题就是父组件在给子组件传visible参数时在父组件也有属性定义，这个属性在改为true后同样因单向数据流的限制是无法在Model关闭时动态变更为false，这样的Model就只能被打开一次，合理的解决范式就是通过emit在Model关闭时通知（回调）父组件，由父组件主动修改它定义的变量。

这样拆分组件不仅定义了多份控制显示/隐藏的变量，并且还需要在回调中专门处理，这给组件的开发和使用都造成了一定的麻烦，所以我不推荐这种拆分方式。

面向对象拆分组件

面向对象的第一大概念就是封装，所以只要涉及封装就完全可以用面向对象的思想来做，在案例中控制显示隐藏的visible属性和ok事件都是属于这个组件对象自己的，只能定义在子组件中。操作Model显示隐藏的方式不能通过Props传递，同样需要由组件对象自己提供，在使用了<script setup>后，组件默认为关闭状态，需要使用defineExpose函数将需要暴露的函数暴露给父组件使用。前面提到的emit在这里还是比不可少了，但是仅仅是作为将业务处理的结果传递给父组件。

<script setup lang="ts">
import { ref, defineExpose, defineEmits } from 'vue'

const visible = ref<boolean>(false);

const open = () => visible.value = true;
const close = () => visible.value = false;

defineExpose({
  open,
})

const emit = defineEmits<{
  (e: 'complete', code: number): void
}>()

const handleOk = (_) => {
  close();
  emit('complete', 200);
};
</script>

<template>
  <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

<style scoped>
</style>

面向对象使用组件

在面向对象封装时并不需要过多的考虑显示隐藏状态变化的传递，属于组件本身的属性、函数有组件自己控制包括是否对外暴露等，那么在使用的时候也是非常简洁的。在父组件中只关注Model什么时候需要打开和关闭后回调的数据处理即可。

<script setup lang="ts">
import { ref } from 'vue';
import BusinessDialog from './components/BusinessDialog.vue';

const businessDialogRef = ref<InstanceType<typeof BusinessDialog>>();

const showModal = () => {
  businessDialogRef.value?.open();
}

const onComplete = (e: any) => {
  console.log(e);
}
</script>

<template>
  <a-button type="primary" @click="showModal">Open Modal</a-button>
  <BusinessDialog ref="businessDialogRef" @complete="onComplete" />
</template>

<style scoped>
</style>

总结

文中介绍的关于DialogComponent组件的封装思想是我所推荐的，因为它不仅开发子组件是不需要过多外部的干扰，在使用子组件是也不需要过多的考虑，这也是封装的意义所在，在其中使用到了defineExpose()、defineEmits()，对于很少使用<script setup>方式的小伙伴也是不熟悉的，可以通过Vuejs文档学习，最后在父组件定义子组件的ref时使用的InstanceType属于Typescript中的类型编程，感兴趣的也可以了解一下。好了，今天就说这么多，下次见~

PS：完整代码见1024Code；

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~