Vue3从0到1开发组件前戏(下):组件分类|8月更文挑战

803 阅读7分钟

本专栏的组件大分类

前言

这篇文章将是Vue3从0到1开发组件的最后一篇铺垫文章。

在这里,主要是铺垫一下在这个系列当中,我定义的几个组件的大分类。

另外提一句,在该系列中,并非单纯的去学习、分享如何从0到1的开发一个组件,同时也会拓展分享一下,在我的个人项目中,我是如何应用这些组件的。

因为我预期的组件库会作为一个独立的项目进行开源,所以会基于自己开发的这个通用组件库进行组件的二次封装。

那么这在我对组件库和项目的构思中,就产生了几个冲突点。

是的,组件库还没开发完,我没法给自己打广告了,但是不要紧,分享文章、参加活动最要紧。

这个组件库的开发更多还是以学习为主要目标,所以我会尽快在后面的更文中提前开源,再慢慢完善。(是的,我还是想骗star)

一、风格冲突:

我预期的组件库更倾向于走简约清新风,而我的个人项目更倾向于仿掘金的主题,所以在风格上,两者虽然不至于是天差地别,但是也需要做出一些风格上的调整。

不过,既然是因为项目而开发的组件库,那么其本身的风格基调还是和项目相仿的,本身就有掘金珠玉在前,又有学习的开源组件库的代码作为参考。所以需要改的只是一些在组件库中不大通用的风格样式,会在项目中进行二次封装,微调样式。

二、功能冲突

这里的功能冲突其实用词也不大准确,应该用相左会好点,但是主要是表达其中意思。

部分组件的功能因为是想着日后完善了就开源出去,所以会参考市场上比较流行的一些组件库,功能尽量更通用一点。

而项目中的使用会更倾向于结合项目需求实现自己的一些想法。

类似于实际工作中,会结合项目的一些功能特点,对组件进行二次封装,让组件更适用于自己的项目。

分类一:基础组件

基础组件这个词是我自己对这一类组件的总结,当然并不是我首创,只是我很少会去关注这方面,所以就没有过多是参考市面上的叫法,只是我自己的一个总结, 基础组件类似于遮罩图标库表单组件等诸如此类的颗粒较小的组件。

我对于基础组件的理解是,用来作为其他组件的组成模块。例如在loading组件中会有黑色的遮罩层,而这遮罩层在其他几个组件中也会用到,没必要每个组件都去写一次,那么就可以用到基础组件中开发好的遮罩Mask组件,在Mask组件中留下一个slot插槽用于开发loading组件时传入loading动画

这边是我对这类组件的总称,“基础组件”,用于特定组件开发时,减少重复劳动的地基部分

分类二、布局组件

前面的基础组件主要是类似系统消息表单等颗粒比较小的组件,而布局组件则是囊括了类似于表格轮播图进度条等这类颗粒较大,在界面中自称版块的一些组件。

而此类组件通常是我在实际开发中,二次封装调整功能最多的一类组件。因为其本身比较明显,对用户的反馈是最直接的,所以根据开发需求进行功能的调整是比较多且重要的。

分类三、界面组件

这类组件更是我比较个人的一个概念了。 这类组件并不会出现在组件库中,最少在我预期的组件库是没有的。

只是因为项目开发的需求,而进行封装的一个组件,例如掘金首页的文章列表与个人中心的文章列表肉眼可见的相似,但是如果因为是两个界面,重复去写就没必要的。

毕竟在开发这一块是有一个原则的:Don't repeat yourself. 不要重复自己,那么这里就可以把列表封装成一个组件,而这个组件出了遍历渲染文章意外,布局肯定是会用到布局组件卡片Card的。

诸如此类结合各个界面,将类似的布局进行封装,通过传递属性来控制细节的操作,可以极大的提高我们的开发效率。当然这有个很重要的前提,即我们要甄别两个目测相似的组件是否有封装的必要,有时候会碰到看着差不多,但实际实现还是有一定差别的设计,这时候就需要慎重选择了。

界面组件因为是非常依赖于项目的组件,所以并不会出现在开源的组件库中,更像是一个开发人员的经验。

而我讲在专栏中,去分享我是如何在项目开发中,对界面中的相似布局进行封装的。

当然,我这样一个职场新人是无论如何也不敢讲讲解这样的词的,所以只是分享一下我的经验,希望能给一些刚刚入门的同行们一点点经验,也希望大手子们可以指出不足之处,帮助小弟进行改进。

分类四:系统组件

虽然听起来是很高大上,但是我得泼一盆冷水了,并不是触及到底层的那个系统组件,只是在项目中,替代系统功能的一些组件。例如浏览器自带alert弹窗,prompt对话框等系统弹出,但是因为其“简约”的风格,往往和我们的项目是相北的,并且会阻拦程序的进程。

那么系统组件就是我对这一类组件的概括了,他们代替了浏览器默认的一些功能,例如模态框Modal组件替代了alert弹窗,模态框Modal+input输入框替代了prompt对话框,此外Message消息组件、Notice通知组件也是交互功能中必不可少的一类。

最后

虽然我在这里对组件分了四大类,但是如果能开源并且写一个项目地址作为demo展示的话,我肯定还是会按照市面上的分类去处理,例如表单组件,反馈组件等。

所以目前的这个分类是我自己对组件的一个概括,市面上的组件则对于组件的分类更加细致。当然我不可能按照开源的分类去写我的文章。

在这里铺垫我自己总结的四大类组件,一是作为我的组件开发顺序,因为他们是包容的关系的,布局组件肯定是会用到基础组件的,而界面组件又会用到布局组件。 此外独立于布局组件界面组件之外的系统组件也是会需要用到一部分的基础组件的,所以,基础组件写的好,开发速度慢不了

好了,哔哔完了我对组件的四大分类,铺垫也就做完了, 从下篇文章开始,将会正式进入组件的开发中,同时会参照我目前定下的分类,先从基础组件开始,毕竟另外三类组件都会需要基础组件来做个基调。那么,分享顺序也就不好反其道行之了。

希望能勾引起读者老爷的兴趣。