搭建前端UI组件库（⼀）——构思
本⽂讲述了搭建组件库前期的准备⼯作。主要是为了更了解UI组件库相关的知识。
前端ui框架是什么意思这是⾃⼰边看边想边构思写的⽂档（俗话说知⼰知彼才能百战百胜嘛）所以先了解⼀下组件库的相关知识。开发的⼲货在第⼆章（还没放上来，写好了会第⼀时间放上来哒嘻嘻）⾥噢！
先讲讲⾃⼰的⼼路历程吧（其实就是个地⽅诉说⼀下，啊哈哈哈~），有点⼉啰嗦。⼤家可以直接忽略进⼊正题。
从⼤四⼀直开始⼯作的公司是做教育的（下⽂中⽤B代替），和我以前实习的公司（下⽂中⽤A代替）完全不同。怎么说呢，A做安全相关的，⼀个组可能连续⼏个⽉就做⼀个产品，迭代就更慢了，就⽐如我刚进去的时候就正好在做半年前的产品的迭代，也主要做⼀些⽤户体验的优化，功能的升级。B是做教育的，产品需求变化快，⼀周⼀次迭代，⼀周⼀次发版，也就意味着可能上周做好的⼀个产品功能下周就要迭代，在疯狂的迭代中对于开发来说会出现⼀些重复性的迭代⼯作，虽然我们也使⽤了Antd的组件库，但随着公司的发展，Antd基本能满⾜于后台平台的使⽤，但是对于⾯向⽤户的前端页⾯，要更体现出公司的⽂化，满⾜公司将来业务的发展⽅向，光是Antd已经不够了。这个时候组件库的想法就来了。我⽐较幸运的是能加⼊到这个队列中，跟着⼤佬⼀起学习从0开始，让我这个⼩⽩学到了很多。从那时起我就想着⾃⼰也要搞⼀套组件库，作为⼀名前端⼯作者，这是⼀件多么有意义的事情呀。我⼀直对⾃⼰
⼯作的这两家公司⼼怀感激，A公司的同事都很好相处，每个⼈都当我是⼩妹妹⼀样帮助我。B公司让我真正意义上的体验到了作为⼀家互联⽹公司⾼速的⼯作状态，虽然刚刚开始的时候我及其不适应常常感觉压⼒太⼤跟不上⼤佬的节奏⽽感到焦虑，但是公司的⼤佬⼈都超级nice啊，从带着我做项⽬，慢慢的开始让我独⽴做⼀些项⽬，在这个过程中⾃⼰学习到了很多也成长很多嘿嘿~
今年疫情的原因，年后的很多规划也停滞了，天天宅在家⾥不能出门（就开始恍恍惚惚哈哈哈哈~），刚刚开始的那段时间我这个平⽇⾥的乐天派也是深受精神上的折磨恍如世界末⽇⼀般整⽇惶恐不安难以⼊睡，好在⾃⼰和家⼈⼀起慢慢调整好了⾃⼰的⼼态（相信⼀定会等到春暖花开的⽇⼦，那个时候定要摘掉⼝罩在⼤马路上狂奔撒欢）。想着趁着这个时间段⾃⼰些事情来做，好好规划接下来的⽇⼦，正好也可以适当的转移⼀下⾃⼰的注意⼒。所以搭建组件库的这件事情被提上⽇程了。花了⼀天的时间在⽹上看了⼀些资料，写了⼀篇前期的规划⽂档，⼤致明确了⾃⼰的想法，定好了⾥程碑。也给⾃⼰留了锻炼休息的时间，劳逸结合呀，现在特殊时期也是要注意多锻炼啊（其实就是怕啦怕啦）。总之，这件事情就安排上了，并且随着这篇⽂章的产⽣已经开始进⼊正轨了~加油吧⼩同志！
对了，在准备搭建组件库的时候⾸先要明确⾃⼰的⽬标（可衡量的技术⽬标），制定⾥程碑（最好是以能看到效果为⼀个节点）督促⾃⼰按时完成（实习的时候养成了做⾥程碑的习惯啦，不过真是好可以约束⾃⼰的玩⼉⼼，⾃⼰定的⽬标哭着也要⾛完呀）
现在进⼊正题————————————————————————————————————————————————
先了解以下⼏个问题......
为什么需要组件库？
什么是组件库？
组件和插件的区别？
业务型组件和基础组件？
组件库的设计思路？
确定技术⽅案？
为什么需要组件库？
想这个问题的时候脑⼦⾥想起就是：那还不是因为产品天天变，奇葩需求改不完。⼀般随着公司的发展，产品在⾯向⽤户的时候需要更体现出公司的特⾊由此产⽣的基于公司⽂化的组件库产⽣了。再加
上公司⼤了，需要更多的⼯具才能满⾜需求了，后台系统变多，功能也增多了，很多的基础模块也能复⽤了，当Antd这种组件库已经满⾜不了产品的奇葩需求后，我们就需要搞⼀点⼉事情了。这个事情就是搞组件库啊，其实说⽩了就是降低代码的冗余，规范代码使后期维护迭代也更⽅便了。好管理，好维护，好迭代，这么多好处何乐⽽不为呢，最重要的是我们不⽤搬⼀些重复的砖头了嘛，减少了⼀些⼯作量了嘿！（咱搬砖也要搬的有志⽓啊）
什么是组件库？
说起组件库我脑⼦⾥就浮出了Antd，element ui，iview，这三⼤组件库是我⽬前接触到的，不得不承认是真的很强⼤啊，基本上能满⾜⼤多的业务场景了（奈何产品千千万，需求只有你想不到不准你做不到）有些时候我想，把Antd，element ui，iview这类组件库看成最⼩单元，那么可以认为通过这些⼩单元来拼凑成⼀些逻辑⼩版块，⽽这些⼩版块能更好的满⾜公司的业务场景。
但是，到底什么是组件库呢，⽹上解释的实在太多了，我在⼀篇⽂章上看到了这样的说法
组件
它的核⼼意义在于代码复⽤。功能相对单⼀或者独⽴，在整个系统的代码层次上位于最底层，被其他代码所依赖
组件库
组件的集合
我觉得说的很nice啊，通俗易懂（我咋就说不出来这样的话呢？），我常常这样想我们前端的⼯作就像是搭积⽊，我们需要各种各样的⼩单元最后完成这个积⽊的搭建。这些⼩单元我们可以认为他是基础组件，我们⽤这些基础组件⼜拼成了⼀些模块，最后这些模块完成了积⽊的搭建。我觉得也可以认为他是插件，这样⼀来问题⼜来了，那组件和插件有什么区别呢？嘿嘿，莫慌，继续往下看~
组件和插件的区别？
组件：我理解为，组件就是模块。我们将⼀个⽹页拆分成多个模块（组件）。组件之间是独⽴的，组件可依赖于宿主。
插件：就是独⽴的⼀个apk。我认为它的重⼼更偏向于实现某个独⽴的功能。(⽐如游戏⾥的某个⽪肤)
这⾥引⼊学习的⼀篇⽂章，我觉得讲的很清楚 ，点击 ->
业务型组件和基础组件？
记得在公司的时候，mentor问了我⼀句话，你是想做业务型组件还是基础组件？当时我就是⿊⼈问号脸啊，这有啥区别吗？不都是组件吗？当时模模糊糊的阐述了⼀下⾃⼰对这两个概念的理解，然后让我⾃⼰下来再多学习了解⼀下然后组织⼀个会议和⼤家讨论。于是乎⼜开始热⽕朝天的翻资料写
先上⼀张图来说说它们之间的关系：
再来说说，业务型组件其实是和公司的业务⾼度相关的，可以说业务型组件是体现公司的⽂化，更加符合公司产品的⽤户体验，也是根据产品经理对于产品未来的规划所产⽣的通⽤的部分。可能某些模块的存在，对于公司多个项⽬来说都会⽤到，可能它不如类似Form表单这种基础表单的普遍性⾼，但是它确实有抽离成组件的意义。
组件库的设计思路？
开发组件库⽬的在于实现降低代码冗余，抽离出复⽤性更⾼的模块。所以本着更容易维护和扩展的原则：
统⼀的代码风格和规范
具备可扩展性
按需引⼊
覆盖测试⽤例
完整的开发⽂档
确定技术⽅案
因为是想在Antd的基础上做⼆次扩展，本着第⼀次尝试不增加太⼤难度，然后发布到npm上即可。重于学习组件库的细节，原理以及框架的类⽐，所以这次开发是直接把Antd的源码拉下来，然后在沿着Antd做⼆次扩展。希望在这个过程中能够摸清Antd的原理哒。
前期主要就是做了这些准备，明确⾃⼰的⽬标，了解相关理论知识，才能更好的进⼊开发阶段啊。冲冲冲！
如有什么不当的地⽅，欢迎各位⼤佬指正，⼩⼥⼦虚⼼接受，在此谢过啦~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。