关键词：
内容概览：
- 组件化的目的
- 哪些逻辑需要组件化
- 基于现有场景，如何设计组件，提高开发效率
组件化的目的
组件化的概念或者描述有很多，在此就不列举了。工作中，我们会遇到很多功能相近的业务场景和高频控件，这里我们就需要对这些大量重复但不完全一致的代码进行分析、总结、抽象，最后封装成组件，便于进行统一、升级，减少代码复制、粘贴，提高项目代码的可读性，降低维护成本和开发成本。
除此之外，有时候也会将一个大的业务场景拆分成多个小模块，减少单文件的体积或是多人协作开发。
总而言之，组件化的目的就是减少开发成本、提高开发效率。
哪些逻辑需要组件化
参考一些现有的UI库，再加上日常工作遇到的情况，我喜欢把组件分为三类：基础功能组件、多业务模块复用逻辑组件、 业务模块拆分组件。
基础功能组件：按钮、分页、列表、图表、时间选择器之类。
多业务模块复用逻辑组件：这类组件通常指的是在特定的业务范围内在多个业务场景中出现，这类组件通常是在基础功能组件的基础上结合特定数据或接口二次封装组合而成。例如通用的人员下拉选择，通用的的类型下拉选择、通用的视图节点下拉选择。
业务模块拆分组件：有的业务场景内容比较多，如果都放在一起会代码过多很难管理，也不利于多人协同开发，例如Dashboard之类的展示页、订单、人员调配之类的操作页
基于现有场景设计组件，提高开发效率
之前的参与的项目由于人力不足以承担自研UI，通常都是借助于第三方UI组件库。所以在设计组件时，更多的是在UI组件基础结合特性进行二次开发。以我之前参与的项目为例（vue+element-ui）。业务中有大量的列表和图表。列表方面除去几个特殊类型，大都是常见的展示列+操作列模式，我的处理方式是将column以配置传入组件内，减少模板内容。图表主要依靠echarts实现，为了避免每次在业务代码中使用都经历一遍初始化、绑定size监听、组件销毁时注销实例的过程，我将这些统一封装到图表组件内部去处理，对外暴露options属性，用来负责传递数据变化。
（未完待续...）
感想与回顾
第一部分：结缘计算机选择软件工程对我更多的是一个意外吧，当时也没多想，第一志愿也不是它----选它可能和赛博朋克的一些印象有关。我觉得条件还是可以，但可能对数学更感兴趣一些，遇到一些问题的时候很难用所谓“... 查看详情
❤️工作半年前端的一些思考|共勉
...那么本篇和大家聊聊自己工作半年对于前端的理解与一些感想，谈谈那些卑微的经历，仅个人愚见，若与你的观点不一致&#x 查看详情
❤️工作半年前端的一些思考|共勉
...那么本篇和大家聊聊自己工作半年对于前端的理解与一些感想，谈谈那些卑微的经历，仅个人愚见，若与你的观点不一致&#x 查看详情
node.js的一些个人感想
作为一个初学者而言node.js是一门很强大的后端语言和PHP相比的话个人感觉node要更加直观一些node.js因为有很多的组件支持让其运用起来更加简单和快捷对于现在这个时间就是金钱的社会开发更快，效率更高的工具才是王道constexpr... 查看详情
自动化测试的一些思考
...测软件第二层：通用自动化测试工具第三层：组件抽取（组件化）：基础公共组件库业务模块公共组件业务模块组件库第四层：业务逻辑第五层：测试数据2自动化测试脚本质量要求：稳定性：失败重试、恢复机制、监控重试等... 查看详情
react在工作中对于customreacthooks一些思考(代码片段)
...大佬们封装的自定义hook。于是，今天就自己来总结一下对于CustomReactHooks一些思考。自定义Hook以下来自React官网关于自定义Hook的介绍：与React组件不同的是，自定义Hook不需要具有特殊的标识。我们可以 查看详情
react在工作中对于customreacthooks一些思考(代码片段)
...大佬们封装的自定义hook。于是，今天就自己来总结一下对于CustomReactHooks一些思考。自定义Hook以下来自React官网关于自定义Hook的介绍：与React组件不同的是，自定义Hook不需要具有特殊的标识。我们可以 查看详情
重新思考vue组件的定义
...在实际应用中，组件常常被组织成层层嵌套的树状结构。对于Vue开发经验不多的我来说，起初我只是简单的把一个组件当作一个页面，也并没有把页面中太多的可以独立划分的地方写成组件。所以，我之前很多时候都是违背了Vue... 查看详情
关于计算机的信息表示&对于数字的一些思考
对计算机而言，没有数字，只有数值类型。在计算机眼中一切都是离散的，因为物理上它只拥有有限的位数：比如说有32个开关，计算机只知道其中哪些是打开的、哪些是关闭的，并不知道背后的含义。是人类给这32个开关的开... 查看详情
组件化开发的一些思考
看了limboy和Casa的文章，关于组件化开发，整理了一下思路。1.为什么要进行组件化开发？ 一个产品，在最开始的时候，由于业务简单，一般是直接在一个工程里开发。这种方式，在产品起步阶段，是没有问题的，也能够有效... 查看详情
面向对象课程的感想
...下是我对于学习面向对象后对于面向对象基本概念的一些感想。 面向对象编程不同于面向过程编程，在需求分析、算法设计上都有很大的不同。面向过程着重于解题步骤，将解决问题的方法拆分成许多小步骤，并设计相应的... 查看详情
由重构react组件引发的函数式编程的思考(代码片段)
对于高阶组件的使用场景如果有相关经验的或者有不同的见解的希望能够在我的博客下面留言最近在重构react组件时，学习了一些高阶组件的编写思路，其实是由高阶函数沿伸而来。一般情况我们编写一个react组件大致样子如下... 查看详情
获奖感想
首先我要感谢牛老师和助教华哥能给我这次机会在我仅仅是一个刚踏入计算机领域萌新的时候能给与我领跑衫，领跑衫可能对于那些计算机领域的专家来说可能已经不算什么，但对于我这种处在计算机学习阶段的新... 查看详情
对于编程的一些思考
注意理解一些重要概念 一本程序设计的书看到的无非就是变量、函数、条件语句、循环语句等概念，但要真正能进行编程应用，需要深入理解这些概念，在理解的基础上应用，不要只简单地学习语法、结构，而要吃... 查看详情
react学习关于react框架使用的一些细节要点的思考
...意想不到的收获的）这篇文章主要是写关于学习react中的一些自己的思考：1.setState到底是同步的还是异步的？2.如何在子组件中改变父组件的state3.context的运用，避免“props传递地狱”4.组件类里有私有变量a，它到底改放在this.a中... 查看详情
acm新手赛感想
对于一位初学C++的人来说，这次新手赛肯定是存在一定难度的。我觉得如果脱离了书本，自己对于一些代码的理解还不够到位，对于很多细节记的不够清楚。那么肯定会导致错误，一个个小错误堆积起来就会变成大错误。 ... 查看详情
原型设计工具axure简介以及一些对原型设计的思考
...大幅度提升。如果能够针对这些库和自定义控件另行制定组件化规范，必然能够更进一步的提升开发效率。但是，Axure也并非集所有优点于一身。在设置交互的时候，必须先选中组件，然后到属性面板上去筛选目标页面（如图）... 查看详情
对于编程的一些思考
首先要确定你的目标：你是要加入程序员的队伍？亦或仅仅是处于兴趣想了解一下编程？ 我这里只想说说第一种考虑，因为这时候你就需要开始要弄明白自己是不是适合编程？ 其实编程跟写作，画画，写歌曲一样是... 查看详情