V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
这是一个专门讨论 idea 的地方。

每个人的时间,资源是有限的,有的时候你或许能够想到很多 idea,但是由于现实的限制,却并不是所有的 idea 都能够成为现实。

那这个时候,不妨可以把那些 idea 分享出来,启发别人。
tower1229
V2EX  ›  奇思妙想

前端 UI 组件复用工具

  •  
  •   tower1229 · 2017-06-25 14:59:54 +08:00 · 2785 次点击
    这是一个创建于 2468 天前的主题,其中的信息可能已经有所发展或是发生改变。

    “懒”是第一生产力。

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

    5 条回复    2017-07-11 08:50:57 +08:00
    paloalto
        1
    paloalto  
       2017-06-25 16:19:57 +08:00
    访问 http://refined-x.com/WidgetsPlayground/ 会跳转到 http://refined-x.com/WidgetsPlayground/#/login 登录界面,
    删掉后面的 login,然后回车,就进去了。

    paloalto
        2
    paloalto  
       2017-06-25 16:23:04 +08:00
    tower1229
        3
    tower1229  
    OP
       2017-06-25 17:37:54 +08:00
    @paloalto 修复了
    openefit
        4
    openefit  
       2017-07-11 05:50:03 +08:00
    React 不就可以么,问什么要搞那么复杂
    tower1229
        5
    tower1229  
    OP
       2017-07-11 08:50:57 +08:00
    @openefit react 组件如果要做到可视化管理、编辑、应用也同样需要这样一套东西,只不过这里说的前端组件是最原始的前端代码片段而已。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2002 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 16:19 · PVG 00:19 · LAX 09:19 · JFK 12:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.