摘要：代码复用总是程序员喜闻乐见的，前端组件化的最终目的就是复用，今天我们就将深入探讨如何实现组件的复用。
“懒”是第一生产力。
代码复用总是程序员喜闻乐见的，前端组件化的最终目的就是复用，今天我们就将深入探讨如何实现UI组件的复用。
通常我们所说的组件往往是包含业务逻辑的前端组件，而这类组件实际上很难实现广义上的复用，顶多能在同一条业务线上复用一下，但UI组件就不一样了，没有了业务的约束，只在UI层面上实现复用，那想象空间就很大了，所以这里我们只讨论UI组件。
首先界定一下，UI组件就是一个web界面的前端代码片段，虽然说不包含业务，但基本的JS效果是可以有的，比如表单验证、轮播图效果、选项卡效果等等，也就是说UI组件可以包括htmlcssjs。我们复用的目的并不是简单的复制粘贴，而是希望可以实现一定程度上的自定义，比如界面内容可以调整、显示样式可以调整，甚至JS效果也可以加以设置，这样才算真正有实用价值的组件复用。
那么我们就来构思一下如何达到以上目的。首先最核心的就是组件自定义功能，自定义意味着一个组件的htmlcssjs代码都可以被修改，并且编辑过程要所见即所得。这个功能我们可以借助模板引擎实现，思路是，将组件代码全部用模板语法来写，然后抽出来一份配置数据，模板引擎用这份数据解析模板，就得到了最终浏览器可以运行的代码。修改配置的过程也就是编辑配置数据的过程，编辑后实时调用模板引擎，重新解析得到新的代码，再将代码实时更新到浏览器中，就实现了编辑过程所见即所得。
拆解一下，这个功能大致需要实现以下几个部分：组件代码的获取、配置数据的可视化、模板引擎的调用、配置文件编辑、组件演示、组件html/css/js代码复制。
再延伸一下，组件代码的自动获取想必要依赖一定的组织规律，那么就要先约定好组件的管理方式。比如约定组件由一个文件夹组成，内部包含temp.html/style.css/script.js三个模板文件，再加上一个config.json配置数据文件。组件应该有一个总的存放文件夹作为组件库，为了能获取到组件的信息，组件库还需要一个目录文件，提供所有组件的列表以及每一个组件的信息，这样就可以通过这个目录获取到组件的模板、配置以及任何我们需要的信息了。
基于以上分析已经可以着手开发一个UI组件管理工具了，能够实现组件管理、预览、编辑、代码复制功能。
如果止步于此，那这个工具的实用价值不是很大。围绕前端代码复用，还可以进一步扩展功能，比如是否可以从设计环节就开始参与到前端组件管理呢？由设计师发布并维护公司内部UI组件库，在项目设计阶段，就可以从组件库中挑选基础组件加以调整，并将结果交付给前端，前端只需要将设计师的组件还原，就可以得到能直接用于项目的前端代码了。
回顾一下，这里面需要组件库实现的功能是，将组件的编辑结果生成一个特殊代码，这个代码用来在管理工具内还原组件的编辑现场，从而实现设计过程到前端开发的交接。这个功能的实现原理是将组件原始配置与所修改配置做合并，得到组件的修改后配置，再用于组件的渲染和展示，就可以还原设计现场了。
到这里我们需要的功能就基本完整了，目前这个工具已经开发完成，并在以上功能的基础上，又增加了用户管理和使用统计，有助于更好的优化组件库建设。
源码：Github
预览：http://refined-x.com/WidgetsPlayground/
如果项目对你有帮助，请去Github尽情的star不要客气。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83647.html
摘要：从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的框架，这个状况会大有改观。框架的理念是把前端按照职责分层，每一层都相对比较独立，有自己的价值，也有各自发挥的余地。 简介: MV框架又是为什么兴起的呢？它的出现，伴随着一些 Web 产品逐渐往应用方向发展，遇到了在 C/S 领域相同的问题：由于前端功能的增强、代码的膨胀，导致不得不做前端的架构这个事情了。经常有人质疑...
摘要：介绍微信风格的，与客户端体验一致，这个自己去微信上看吧，略。微信调试一件套，网页授权模拟集成代理远程调试。这些在微信开发者中心有介绍，略。年微信开发经验的人，终于又成为了零年开发经验的人，重新走上了踩坑之路。 showImg(https://segmentfault.com/img/bVtEd1);活动地址：http://fequan.com/2016/ 注意：英文不好，小记也带有自己...
阅读 1045·2023-04-25 23:22
阅读 1434·2023-04-25 20:04
阅读 2380·2021-11-22 15:24
阅读 2557·2021-11-11 16:54
阅读 1717·2019-08-30 14:03
阅读 1378·2019-08-29 16:35
阅读 1536·2019-08-26 10:29
阅读 2048·2019-08-23 18:01
