转自: https://segmentfault.com/a/1190000040853541https://segmentfault.com/a/1190000040853541

写的不错！ 

通过在github上对该开源组件库项目进行clone或download后，项目的目录结构与我们日常开发的项目的目录结构有不同之处。几个核心的结构如下：

Button组件源码解析

一个组件的封装，从基本点来看。关注组件自身的输出、输入，这里的输入、输出指的是自身的属性、行为或从父级传递传递过来的属性、行为。

我们可以在components/button目录下看到button组件封装的结构，结构如下：

接下来，根据我们日常项目开发过程中使用该button组件的情况，从以下几个问题去阅读源码：

从ant-design-vue的官网可以看到，Button组件有'default', 'primary', 'ghost', 'dashed', 'link', 'text'这6种类型。当我们设置不同的type的时候，Button组件的外观也会随着进行改变。

打开button.tsx文件，可以看到如下代码：

接下来看下buttonTypes.ts文件的相关代码：

- 第1行代码：import { tuple } from '../_util/type';从_tuil的type文件中导入了tuple函数，该函数声明定义如下，types.ts的第4行：

export const tuple = (...args: T) => args;利用了ts中的泛型约束了泛型T的类型只能是字符串数组(也就是该数组中的元素只能是字符串类型)，函数的返回字是某个具体的字符串元素。

- 第7行代码：const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');，定义了一个元组类型的变量ButtonTypes，该元组中包含了6个元素。

- 第8行代码：export type ButtonType = typeof ButtonTypes[number];，这里定义了ButtonType这种类型并进行导出;

- 第23行代码：定义了一个buttonProps函数，也就是整个Button组件的props属性结合，函数代码如下：

可以看出type这里通过vue-types这个插件来约束只能为上面提到了6种之一。从上面的分析我们能够得出，Button组件的type的由来，接下来看它是怎么与Button组件的样式进行对应关联的。比如设置type: danger，那么Button组件的背景就是红色、文字是白色。这种联系关系内部是怎么处理的？

返回到Button.tsx中的代码。第75行定义了一个计算属性classes。代码如下：

这里就可以看出type的不同，按钮样式表现的不同点，主要在于pre及type这两个变量，其中pre表示对应组件的class类名的前缀，如button组件的前缀ant-btn。

最后看下Button组件的return返回了一个方法，157行，代码如下：

该方法中buttonProps对象类型的变量，该对象中用一个class属性来接收自身的class属性及上述提到的classes计算属性；然后定义了buttonNode一个node节点，该node节点的内容是html中button标签，并通过jsx语法将buttonProps进行解构处理。

如上面A这个按钮组件，我们可以知道它的类名是:ant-btn ant-btn-primary。

在结合style文件夹下，编写的对应样式。就可以知道了type的不同对应的Button组件外观不同。

Button组件的icon属性

我们在使用Button组件的时候，比如该组件需要展示图标与文字的结合，我们的可能可能是这样写：

那么该组件内部是怎样去处理这种代码的？

对上述Button组件的type属性进行分析后，发现该组件的所有属性的定义处理都是在buttonTypes.ts中，因此我们先来看这个文件中关于icon相关的代码。

可以看到，该函数返回的对象中有一个icon属性，其类型是PropTypes对象上VNodeChild类型，那么这个VNodeChild具体是个什么东西呢？最终在vue-types文件夹下有一个type.ts文件，定义了VueNode的类型。

所以最终可以知道icon就是Vuejs中的一个虚拟子节点或者是JSX中的一个元素。

接下来回到button.tsx组件本身。

可以看到对该组件进行定义的时候，通过vuejs自身的slots属性接收了icon这个元素。

接着看return返回的方法里面的代码：

const icon = getPropsSlot(slots, props, 'icon'); ??这里返回的是一个对象还是？

该方法里面定义了icon变量，接下来看下getPropsSlot方法的作用是什么？在_util/props-util文件里，可以看到该方法的实现，代码如下：

可以看出该方法的作用用于对slot的处理。如果props上存在对应的prop则直接返回，否则从slots取到对应的prop进行方法的执行，最后返回一个数组，数组中是对应的虚拟节点元素，元素的属性大致如下：

接下来就是：

定义了一个icon节点，并在buttonNode节点中直接通过slot的方式将该icon节点作用于button标签中(成为button标签的一个子元素)。

所以从以下分析看出，Button组件对于icon的处理主要是结合vuejs的slots或props属性对对应符合条件的prop进行虚拟化(生成一个虚拟子节点)。

Button组件的loading属性

在项目开发过程中，对于Button组件的使用频率是非常之高的，比如通过其点击事件向后端传递一些数据经过处理后存储在数据库中。这是一个很常见的业务开发点，但如果我们在1或2s内连续点击多次按钮，若不做任何处理的话，数据库中最终会存储很多重复的数据。要解决这个问题，就得使用到javascript中的节流这个知识点来处理，但ant-design-vue中对于button的处理内部封装了节流的处理，只要我们在使用该组件的时候，加上一个loading属性就可以了。那在其组件内部的封装是怎么实现的呢？

依然先看buttonTypes.ts这个文件与loading相关的代码，代码如下：

可以看到在buttonProps这个方法返回的对象中，有一个loading属性、及一个onClick方法。

接下来回到button.tsx组件本身。

在该文件的第22行有一个类型的定义type Loading = boolean | number;定义了Loading的类型为布尔或是数值类型

然后在setup方法中定义了一个变量，第46行const innerLoading: Ref = ref(false); innerLoading变量是一个值为布尔或数值的响应式变量。那么定义这个变量的作用是什么呢？继续看与其相关的代码。

在第52行定义了一个loadingOrDelay计算属性。用来接收loading这个prop的更新

在第58行通过watch对计算属性loadingOrDelay进行值改变的监听，并进行相关逻辑的处理：

如果loadingOrDelay的值是number类型，则设置一个定义，在loadingOrDelay秒后把loadingOrDelay最新的值赋值给innerLoading变量。反之直接将loadingOrDelay的值赋值给innerLoading。

const delayTimeoutRef = ref(undefined);

由于设置了定时器，所以在该组件将要被销毁(卸载)的时候，需要对定时器进行清除操作。

最后在第121行对点击事件进行了逻辑的处理：

可以看出ant-design-vue对Button组件中的loading的实现其实是比较巧妙和简单的。通过props接收到loading属性，并没有直接通过该属性去进行一系列的值改变的处理。而是内部定义了一个innerLoading变量和loadingOrDelay计算属性去进行相应逻辑的处理，这是因为loading是在外部组件传递过来的，不能直接对其进行修改。

Button组件的引用

方式一，可以直接引入该Button.tsx组件进行使用，但只能在项目内部使用。另一种可以通过vuejs给组件提供的install方法对组件进行处理。

相关知识tips

TypeScript中的元组

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象

let tom: [string, number] = ['Tom', 25];

防抖与节流

节流：假如你是一个7岁的孩子，一天你妈妈正在做巧克力蛋糕。但这蛋糕不是给你的而是给客人的，这时你一直问她要蛋糕。最终她给了你一块，但是你继续问她要更多的蛋糕。她同意给你更多的蛋糕，前提是一个小时后给你一块。这是你依然继续问她要蛋糕，但她这时没理会你。终于一个小时以后，你得到了更多的蛋糕。如果你要得到更多的蛋糕，无论要多少次，你都会在一个小时后才得到更多蛋糕。

防抖：考虑相同的蛋糕示例。这一次你不断地向你妈妈要蛋糕，她很生气，并告诉你，只有你保持沉默一小时，她才会给你蛋糕。这意味着如果你不断地问她，你就得不到蛋糕——你只会在上次问后一小时得到蛋糕。

子组件prop校验

可以看到，在整个ant-design-vue组件中，关于子组件props的校验都是通过vue-types这个插件去处理的。第一点是减少了代码量，第二点是有利于阅读及扩展。

vue-types插件提供了createTypes方法，我们可以通过该方法来扩展更多的类型，如ant-design-vue中的做法如下：

组件封装规则

封装的组件给别人用

对于封装的公共组件，在封装组件的时候，要考虑到怎样让别人做到引入使用。目前较为流行的做法是将组件库通过npm进行管理，然后使用者可针对对应的组件进行按需引入使用。这就需要在封装组件的时候对某个组件进行"安装"及"导出"操作。