java项⽬中可以封装的组件_封装属于⾃⼰的组件库
封装属于⾃⼰的组件库 - VUE
「适合⼈：⼀起聊聊组件这件事」
「观看时间：30min」
「说明：⼀些经验分享，欢迎探讨」
前⾔
现⽬前，vue 社区下⼤⼤⼩⼩的组件库是越来越多，优秀的开源组件也越来越丰富，⽐如
PC：View ui,Element ui, BootstrapVue ,Ant Design Vue，微软的MS Design，地图的：vue-baidu-map,vue-amap，图表的vue-echarts,vue-easetable，还有其它很多很多
Mobild：Vux,Vant等，最近⽕热的Futter
那么，在框架搭建之前如何选择⼀个合适的组件库，在开发过程中如何挑选优秀的开源组件，公⽤的部分如何封装为业务组件，项⽬积累下来的功能组件如何去积累维护，是我们该去思考的
如何选择⼀个合适的组件库(选型)
不管是快餐项⽬型还是架构持续完善型的架构，在搭建架构时，选择⼀个可靠合适的 UI 组件库⾄关重要，关系着系统架构后期的维护，组件的积累，项⽬的沉淀。⼀旦选择了⼀个不成熟的组件库，整套架构就会处处踩坑。那么如何选择⼀个合适的组件库
对⽐
1.1 对⽐ github-Star 的数量，能够从侧⾯反映开源项⽬的受欢迎程度
1.2 对⽐组件美观和交互体验，快餐型架构可以选择特定业务关系相似的框架
1.3 对⽐社区，⼀个相对完善和活跃的社区对组件的维护将会越来越完善
1.4 对⽐ API 的稳定性，完善性，对于开发⼈员来说，可靠的 API 再重要不过了
实践 + 实现
2.1 不管是组件库还是⼀个功能组件，实践是检验组件是否好⽤最真实的做法，将你选择的组件⾃我使⽤体验以得到最真实的反馈
符合业务
根据⾃⾝业务去选择对应的技术⽅案，会给开发过程减少⼀些不必要的⿇烦，业务型和展⽰型的业务选择对应的 UI 框架会事半功倍
咨询
咨询⼀下⾏业⼤佬也是⼀种捷径
实例：王⼆狗在架构转型选择 UI 组件库的时候，对⽐了 iview element bootstrap 的 github-star，组件数量，组件的 API，最后也咨询了多年在前端打拼的同事，最后选择了 iview(view ui)，到⽬前未知，⼀直基于 view ui 优化完善架构，积累组件，其中⼤量业务组件依赖于view ui，若王⼆狗想要将架构转换为 element ui，就要丢弃基于 view ui 的业务组件，若两者组件库多使⽤，有可能造成⼯程庞⼤，维护困难，所以在 UI 组件库选型的时候，慎重考虑，很有可能就会成为⼀直陪伴你的伙伴了~
如何挑选优秀的开源组件
除了挑选合适的组件库之外，开发过程中遇到⼀些组件库没有的组件，就需要我们⾃⼰来想法搞这样的组件，那么其中⼀种⽅法就是优秀的开源组件，如何，先百度，再去 github 搜索，还可以去掘⾦/知乎等社区，到能够满⾜我们功能的组件后，实现出来，没有的组件就需要我们⾃⼰来编码实现，作为我们积累的功能组件
view ui框架那么众多的组件中如何挑选出符合我们要求的组件：
⾸先挑选出功能要求符合的组件列表
其次对⽐扩展性和美观，扩展性好的优先，更加友好的体验优先
最后，实践实践实践，组件好不好⽤，别⼈说了不算，放在我们项⽬实现出来
功能组件如何去积累维护
除了挑选合适的组件库之外，项⽬开发过程中，项⽬经理总会有⼀些莫名其妙的想法，⼀些奇葩的交互组件，这种情况下，有两种解决⽅法，⼀种是到替换⽅案⽤你的三⼨不烂之⾆说服项⽬经历，第⼆种就是乖乖的听话去实现。⼯作之初通常会选择第⼆种，⼯作久了通常会选择第⼀种，如果你⼯作了 1-2 年，还是处于第⼆种，那么⼤佬可以反思⼀下了
那么我们⾃⼰开发的组件究竟如何积累和维护：
怎样的组件值得维护
满⾜以下条件的组件值得维护：
较好的交互体验
社区没有满⾜我们需要的
经常使⽤的，但是不要我们具体的业务产⽣⾼耦合度
组件封装的思想理念
如果我们把⼀个组件从编码到展⽰分为展⽰层，数据处理层和 API 层
那么，我们封装组件要做的其实就是将显⽰层和数据定义给处理好，固定的数据格式对应我们的组件模板
如果我们把⼀个组件放在 MVVM 模型中(其中这⾥ VM 视图模板我把它作为了我们⽗组件的⼀种抽象控制器 Control
那么，我们封装组件要做的就是视图和模板，由⽗组件的控制器来控制我们的组件展⽰
建⽴⽂档说明
⼀个好的组件能让⾃⼰记忆更久的⽅法就是建⽴⽂档，有了⽂档也可以给到团队的其它成员共同使⽤，像常见的 UI 组件库都有⾃⼰的⽂档，那么我们如何来建⽴⾃⼰的⽂档
⽂档的内容要简单明了，组件⽰例/props 参数说明/events 监听事件说明/slot 插槽说明，如有内部事件暴漏出去，添加其它事件说明
⽂档模板，⼀，我们可以⾃⼰搭建⽂档维护说明;⼆，我们可以使⽤⽂档编写的开源项⽬;vue 官⽅推出的⼀款VuePress(我采⽤的是第⼀种，因为当时不知道有 VuePress 这个开源项⽬)，感兴趣的⾃⾏了解
vue 组件开发常⽤ protype
model, 绑定 value(⾮默认必须是包含在 props 的), 绑定事件(如果时⾃定义需要通过 emit 创建事件)
props, 我们封装组件最好把 prop 的类型和默认值都定义了并且说明清楚，验证规则 validator 实际应⽤中还没有⽤到
emit, ⾃定义事件
$refs, 获取内部暴漏的事件
slot, 插槽，我们⾃定义显⽰内容的好⽅法，数据的传递，$slots都是我们需要掌握的部分。数据的传递有新的和旧的两种写法，例⼦
// 旧写法
;
// 虚拟节点实例
;
// 新写法 注意：新的插槽节点必须叫template，⽤div不⾏...实际⽤过
;
// 虚拟节点实例
;
;
复制代码
业务组件，什么样的组件称为业务组件，我们在项⽬开发过程中，某个界⾯的详情，可以在系统各个地⽅调⽤，这样的组件需要我们封装为公共的业务组件供系统使⽤，如果有⼈问为什么不复制，那⽤ vue ⼲嘛呢？
如何判断哪些是公共的组件？
习惯，平时的开发就养成组件拆分的习惯，不管组件是否公⽤，都不会错！
在开发中，⾸先了解业务，想当咸鱼的那也没办法，靠习惯吧~了解了业务，⾃然就知道哪些组件是需要封装出来的了
在项⽬多处重复，在多处场景调⽤的组件，可以封装为公共组件
封装业务组件有什么需要注意的？
组件的⽬录存放位置要建⽴好，有其它成员的话要通知到
组件的使⽤地⽅最好能做好注释，⽅便后期运维
组件封装注意事项
注释，不管是公共组件还是其它组件，注释这个习惯的问题还是强调⼀下，最好有注释规范
命名，公共组件命名⼀般和他⼈形成统⼀的规约，⽐如⾃定义监听事件统⼀‘on-’开头，参数使⽤驼峰命名
⾃定义的图⽚路径，不要将我们的图⽚路径限制死，封装组件最好开放出来
私有样式，避免污染其它模块，当然其它组件也要注意私有样式的属性添加
组件库的发布
为什么要发布组件库，如果你在维护很多很多的项⽬，那我们这些项⽬依赖的这些⾃⼰封装的组件总不能在每个项⽬进⾏复制吧，多孬啊~虽然之初我就是这么做的...现在最常见的就是将⾃⼰的组件包发布在npm仓库，通过npm install ** 安装到⾃⼰的项⽬中
那么，组件库达到什么样的⼀个体系值得发布也是⼀个值得思考的问题。其实组件库的发布不是由组件的多少决定的，⽽是由你的思想决定的，如果你有了这种组件抽象，组件积累的思想，那么即使是⼀个⼩组件也可发布甚⾄开源~像我们平时⽤到的很多这样的⼩组件，⽐如拖拽组件/轮播/tree等开源的单个组件也是很多的，所以组件库/组件达到什么样的体系不重要，重要的是我们封装组件的这种思想
如何发布⼀个⾃⼰的组件库，封装+发布
封装：vue官⽅插件这⼀章节简单的介绍了vue插件的安装⽅法，也就是我们该如何封装; 再者，下载element ui/view ui 这种优秀的开源组件库，参考⼀下，站在巨⼈的肩膀上，我的组件库参考了view ui的封装⽅法
发布：发布就简单了，⽹上的资料也是⼀⼤堆，如何发布第⼀个属于⾃⼰的npm包，这⾥我再简单说⼀下流程和注意事项
修改package.json的⼏个重要配置项
// 包的名称
"name": "ui",
// 版本号，第⼀次发布就随便了，后⾯更新的版本号要递增
"version": "1.6.8",
// 发布出去的包默认的访问⽂件
"main": "src/index.js",
/
/ 发布的⽂件集合，可以发布多个⽂件夹
"files": ["src"],
复制代码
需要⾃⼰注册npm账号，执⾏npm publish 发布，会⾃动提⽰输⼊账号密码的
复制代码
这样你的包就发布出去了，很简单吧，验证的话，就在你的项⽬⾥，npm install ui，然后在主⽂件导⼊注册...就不细说了
组件的更新
封装的组件只有有⼈⽤了才能发现问题，⼈⽆完⼈，何况可能没有⽤过的组件呢，也有不同场景可能加⼊⼀些新的⽀持，都是需要我们来更新组件库的。这⾥主要说⼀下更新的注意事项
注意事项：
更新的版本号每次要记得修改，同样的版本号更新会提⽰你⽆法更新的，低于版本号也会提⽰⽆法更新
的
组件新增功能，新增功能的话要在原有功能不变情况新增，当然着取决于我们实际的使⽤情况，如果你的组件没有在任何地⽅⽤，那就随便更新了
组件有新增功能记得补充⽂档哦
更新记录记得补充
实践，在⽇常项⽬中，使⽤的组件不能⽀持某功能，因为没有专门的研发组，为加快进度，组件的修改直接在 node_modules 依赖包内进⾏修改，多的话做好记录，空闲之余再把内容更新⾄组件库；
结语
以上是⼯作过程中⾃⾝实践的⼀些总结，其⽬的就是提⾼开发效率，减少重复性⼯作；在平时封装⾃⼰的组件时，没有良好的指引，都是⾃⼰⼀路厮杀，尝试出来的，如果你⾝边有良好的维护环境，珍惜吧，如果没有，希望本⽂对你有帮助~⼯作中，能⽤开源的尽量⽤开源的，开源的真⾹！
本⽂使⽤ mdnice 排版

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