`
tower1229
  • 浏览: 10440 次
  • 性别: Icon_minigender_1
  • 来自: 烟台
最近访客 更多访客>>
社区版块
存档分类
最新评论

前端UI组件复用工具

阅读更多

“懒”是第一生产力。

 

代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现UI组件的复用。

 

通常我们所说的组件往往是包含业务逻辑的前端组件,而这类组件实际上很难实现广义上的复用,顶多能在同一条业务线上复用一下,但UI组件就不一样了,没有了业务的约束,只在UI层面上实现复用,那想象空间就很大了,所以这里我们只讨论UI组件。

 

首先界定一下,UI组件就是一个web界面的前端代码片段,虽然说不包含业务,但基本的JS效果是可以有的,比如表单验证、轮播图效果、选项卡效果等等,也就是说UI组件可以包括html\css\js。我们复用的目的并不是简单的复制粘贴,而是希望可以实现一定程度上的自定义,比如界面内容可以调整、显示样式可以调整,甚至JS效果也可以加以设置,这样才算真正有实用价值的组件复用。

 

那么我们就来构思一下如何达到以上目的。首先最核心的就是组件自定义功能,自定义意味着一个组件的html\css\js代码都可以被修改,并且编辑过程要所见即所得。这个功能我们可以借助模板引擎实现,思路是,将组件代码全部用模板语法来写,然后抽出来一份配置数据,模板引擎用这份数据解析模板,就得到了最终浏览器可以运行的代码。修改配置的过程也就是编辑配置数据的过程,编辑后实时调用模板引擎,重新解析得到新的代码,再将代码实时更新到浏览器中,就实现了编辑过程所见即所得。

 

拆解一下,这个功能大致需要实现以下几个部分:组件代码的获取、配置数据的可视化、模板引擎的调用、配置文件编辑、组件演示、组件html/css/js代码复制。

 

再延伸一下,组件代码的自动获取想必要依赖一定的组织规律,那么就要先约定好组件的管理方式。比如约定组件由一个文件夹组成,内部包含`temp.html/style.css/script.js`三个模板文件,再加上一个`config.json`配置数据文件。组件应该有一个总的存放文件夹作为组件库,为了能获取到组件的信息,组件库还需要一个目录文件,提供所有组件的列表以及每一个组件的信息,这样就可以通过这个目录获取到组件的模板、配置以及任何我们需要的信息了。

 

基于以上分析已经可以着手开发一个UI组件管理工具了,能够实现组件管理、预览、编辑、代码复制功能。

 

如果止步于此,那这个工具的实用价值不是很大。围绕前端代码复用,还可以进一步扩展功能,比如是否可以从设计环节就开始参与到前端组件管理呢?由设计师发布并维护公司内部UI组件库,在项目设计阶段,就可以从组件库中挑选基础组件加以调整,并将结果交付给前端,前端只需要将设计师的组件还原,就可以得到能直接用于项目的前端代码了。

 

回顾一下,这里面需要组件库实现的功能是,将组件的编辑结果生成一个特殊代码,这个代码用来在管理工具内还原组件的编辑现场,从而实现设计过程到前端开发的交接。这个功能的实现原理是将组件原始配置与所修改配置做合并,得到组件的修改后配置,再用于组件的渲染和展示,就可以还原设计现场了。

 

到这里我们需要的功能就基本完整了,目前这个工具已经开发完成,并在以上功能的基础上,又增加了用户管理和使用统计,有助于更好的优化组件库建设。

 

源码:[Github]

预览:http://refined-x.com/WidgetsPlayground/

 

如果项目对你有帮助,请去Github尽情的star不要客气。

分享到:
评论

相关推荐

    ViewUI组件库 v4.7.0.zip

    ViewUI组件库是一款广泛应用于前端开发的开源工具,版本号为v4.7.0,主要为开发者提供了丰富的用户界面元素和组件,便于快速构建美观且功能强大的Web应用。这个压缩包包含了该版本的全部资源,是软件工具、源码源...

    模块化前端UI框架

    2. **前端UI组件**: layui提供了一套完整的UI组件库,包括但不限于: - 表格:支持数据动态加载、排序、筛选等功能。 - 表单:包含各种输入控件和验证机制,方便创建和处理用户输入。 - 弹出层:可实现对话框、...

    淘宝开源的前端UI框架

    总的来说,淘宝开源的前端UI框架Kissy是一个强大且全面的工具,适用于各种应用场景,无论是构建复杂的企业级应用,还是快速开发小型项目,它都能提供有力的支持。通过深入学习和使用Kissy,开发者不仅可以提升开发...

    uivue前端UI框架基于vue2开发

    **UIVue前端UI框架基于Vue2开发** UIVue是一个专为Vue2构建的前端用户界面框架,旨在提供一套完整、高效且易于使用的组件库,帮助开发者快速构建现代化的Web应用程序。这个框架充分利用了Vue2的强大功能,如虚拟DOM...

    一个为TailwindCSSUI组件制作的开源网站。在这里我们可以找到几乎所有使用tailwindCSS制作的UI组件.zip

    1. **Utility-first CSS框架**:与传统的CSS框架不同,TailwindCSS 不提供预定义的UI组件,而是通过一系列可配置的CSS utility classes(工具类)来快速样式化元素。开发者可以根据需要组合这些类,实现灵活且一致的...

    基于vuejs20轻量级的ui组件库

    而"基于Vue.js 2.0的轻量级UI组件库"则是为了简化Web应用开发,通过预封装的可复用组件,让开发者可以快速搭建功能丰富的PC端网页。 这个组件库主要针对Vue.js 2.0设计,这意味着它充分利用了Vue的虚拟DOM、响应式...

    蚂蚁科技 移动开发平台 前端框架与 UI 组件 使用指南 20230208.pdf

    ### 蚂蚁科技移动开发平台前端框架与UI组件使用指南关键知识点 #### 一、文档概述 **标题**:“蚂蚁科技移动开发平台前端框架与UI组件使用指南20230208.pdf” **描述**:此文档旨在提供关于蚂蚁科技前端框架和UI...

    饿了么大数据部门常用UI组件库

    "饿了么大数据部门常用UI组件库"是一个专为饿了么大数据部门设计的前端开发资源,它基于流行的Vue.js框架中的element-ui构建。Element-UI是一个轻量级且易于使用的组件库,它为开发者提供了丰富的UI元素和交互设计,...

    为React打造的一套ionic风格的可复用UI组件库

    标题中的“为React打造的一套ionic风格的可复用UI组件库”表明这是一个专为React框架设计的用户界面(UI)组件集合,其设计灵感来源于Ionic框架,这意味着它可能具有移动优先、响应式的设计,适合构建跨平台的移动...

    基于antdmobile第二次封装的移动端的ui库并定制自己的ui组件

    5. **打包发布**:将封装后的 UI 库打包成可复用的 npm 包,这样可以在其他项目中方便地引入和使用。这通常涉及配置 Webpack 或其他打包工具,处理依赖、公共模块、按需加载等功能。 6. **文档编写**:为了便于团队...

    豆瓣阅读的UI组件库

    总结来说,豆瓣阅读的UI组件库是一个基于JavaScript和MVC架构的前端资源,它包含了用于构建阅读应用的多种预设组件。通过这个库,开发者可以高效地创建出一致性和用户体验良好的界面,同时得益于组件化的设计,代码...

    基于 Vite Vue3.0 框架的前端UI 库,前端UI,可用于各种管理平台管理功能,极具个性化 桌面UI

    **Dogstar-UI组件库特点** 1. **响应式设计**:Dogstar-UI的组件均支持响应式布局,能在不同设备上呈现良好的显示效果。 2. **易于定制**:通过提供详细的API文档和丰富的主题配置选项,开发者可以轻松调整组件...

    iView一套基于Vuejs的高质量UI组件库

    2. **iView组件**:iView提供了大量可复用的UI组件,如按钮、表单元素(输入框、选择器、日期选择器等)、布局工具、通知提示、加载状态、分页、表格、弹窗、对话框、轮播图等。这些组件遵循一致的设计风格,易于...

    UI组件资源包,images,css等

    UI组件资源包是一种用于前端开发的重要工具,它包含了一系列预设计的用户界面元素,如按钮、表单、导航栏、图标等,旨在帮助开发者快速构建美观且功能丰富的应用程序。资源包通常包括图像(images)、CSS样式文件...

    前端组件开发入门

    在前端开发领域,组件化是现代Web应用的核心概念之一,它极大地提高了代码的复用性和维护性。"前端组件开发入门"这个主题旨在帮助初学者理解并掌握如何进行有效的前端组件化开发。以下是对相关知识点的详细说明: 1...

    获取element-ui组件库源码

    Element UI 是一个基于 Vue.js 的开源前端组件库,它提供了丰富的可复用 UI 组件,如按钮、表单、表格、对话框等,为开发者构建用户界面提供了便利。要获取 Element UI 的源码,通常需要从其官方仓库进行下载或者...

    响应式蓝白ui组件模板_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    UI组件是用户界面中的可复用模块,如按钮、输入框、下拉菜单等。这个模板提供的“ui组件”可能包括了预设的各种常见组件,开发者可以根据需要直接应用或者进行定制,提高开发效率。 总结来说,这个“响应式蓝白ui...

    精美UI组件:这个项目使用Radix UI和Tailwind CSS构建了一套设计精美的组件 它为开发者提供了一套易于使用的UI

    Radix UI和Tailwind CSS是两个在前端开发领域备受推崇的工具,它们分别专注于组件库和样式框架。本文将深入探讨这两个技术,并结合它们如何共同创建一套精美的UI组件。 首先,让我们了解一下Radix UI。这是一个开源...

    590web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    《HTML手机电脑网站网页源码:打造自适应前端UI组件与H5模板》 在现代互联网开发中,HTML、CSS和JavaScript是构建网页和应用程序的基础技术。本资源包"590web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_...

    基于Vue 2.0的模块化前端 UI 组件库小结

    总结来说,AT-UI 是一款适合 Vue 2.0 项目的前端 UI 解决方案,它提供了一个完整的开发工具链,包括现代化的构建工具和精心设计的组件。无论你是初学者还是经验丰富的开发者,AT-UI 都能帮助你快速搭建界面,同时...

Global site tag (gtag.js) - Google Analytics