“懒”是第一生产力。

代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现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不要客气。

前端UI组件复用工具的更多相关文章

  1. Web 前端 UI 组件库文档自动化方案 All In One

    Web 前端 UI 组件库文档自动化方案 All In One 需求 自动化 动态 好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...

  2. 基于Vue的前端UI组件库的比对和选型

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...

  3. 微信小程序mpvue项目使用WuxWeapp前端UI组件

    前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...

  4. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  5. 推荐使用Tiny Framework web开发UI组件

    TINY FRAMEWORK 基于组件化的J2EE开发框架,from:http://www.tinygroup.org/   名字 Tiny名称的来历 取名Tiny是取其微不足道,微小之意. Tiny ...

  6. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  7. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  8. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  9. ui组件库

    基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Frameworkhttps:/ ...

随机推荐

  1. 设置共享目录(主机win7,虚拟机Ubuntu)

    1.安装增强功能包 启动虚拟机后,在 设备 -> 分配光驱 选择VBoxGuestAdditions.iso增强包镜像(在virtualbox安装目录下) 在虚拟机中挂载光驱镜像: #mkdir ...

  2. vue视频学习笔记06

    video 6 vue动画vue路由--------------------------------------transition 之前 属性<p transition="fade& ...

  3. 深入理解Java虚拟机 自己编译JDK

    获取JDK源码 先明确OpenJDK和Sun/OracleJDK之间,以及OpenJDK 6.OpenJDK 7.OpenJDK7u和OpenJDK 8等项目之间是什么关系,这有助于确定接下来编译要使 ...

  4. Eclipse设置问题:字体大小、修改注释内容、修改快捷键

    一.设置字体大小,看下图,包括了设计代码字体大小和控制台输出字体大小 二.修改注释内容 选择window---->>preferences 选择Java---->>code s ...

  5. js实用方法记录-简单cookie操作

    js实用方法记录-简单cookie操作 设置cookie:setCookie(名称,值,保存时间,保存域); 获取cookie:setCookie(名称); 移除cookie:setCookie(名称 ...

  6. 《JavaScript高级程序设计》里对 call() 和 apply() 的解释 (116页)

    每个函数都包含两个非继承而来的方法:apply()和call().这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值. apply(): 方法接受两个参数:一个是在其 ...

  7. Plupload上传插件自定义图片的修改

    若自定义的一个上传图片效果,代码(可能不全),当用户再次点击所有或任意一个上传图片的input时,uploader.files已经多了客户再次上传的图片,但是你就想要最后的两张图片,这就可以使用到up ...

  8. 5.Java 加解密技术系列之 DES

    Java 加解密技术系列之 DES 序 背景 概念 基本原理 主要流程 分组模式 代码实现 结束语 序 前 几篇文章讲的都是单向加密算法,其中涉及到了 BASE64.MD5.SHA.HMAC 等几个比 ...

  9. 关于Laravel中的artisan命令

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica; color: #454545 } p.p2 { margin: 0.0p ...

  10. linux tcp中time_wait

    http://www.cnblogs.com/my_life/articles/3460873.html http://blog.csdn.net/sunnydogzhou/article/detai ...