专题系统组件管理

来源: Qunar技术沙龙 作者: 郭继友 | 发布时间: 2019-03-06 09:30:00

专题系统是Qunar大住宿事业部综合业务团队运营组开发的用于快速搭建专题活动页面的平台。本文将进行专题系统组件管理的详细介绍。

个人介绍:郭继友,2014年7月入职 Qunar,目前在大住宿事业部综合业务组从事前端开发工作。主要负责专题系统组件开发与系统维护,以及相关拓展系统的设计与开发。个人对产品与UI设计有浓厚的兴趣,喜欢通过技术提高工作效率。


专题系统组件模板管理

背景介绍

系统简介

专题系统是Qunar大住宿事业部综合业务团队运营组开发的用于快速搭建专题活动页面的平台。想当年运营活动页面的制作从运营到设计再到开发再到运营再到开发再到设计再到开发再到运营……怎么说一个简单的活动需求前期也得在开发这里徘徊2,3天的样子,更何况还有后期的迭代。后来被逼无奈之下,开发出了几套活动页面的HTML模板。但是由于运营同学学习编写代码的成本较高,简单的模板无法适应复杂的页面构成,后来便有了针对专题活动页面制作的平台 - 专题系统。 专题系统的主要思想,是将专题活动页面组件化。运营可以使用几个简单的组件如通用布局、通用导航、通用产品拼装出活动页面,然后通过配置各组件的内容,实现专题活动页面的定制。使用可视化的配置,所见即所得的交互方式,使运营同学可以自主搭建活动页面。

系统组件

庞大的系统离不开系统代码高效的组织,专题系统前端的代码组织是通过不同的功能模块进行设计的,具体的模块层次如下:

视图层(View Layer): 负责管理端、展示端页面渲染与用户交互。

命令层(Command Layer): 负责用户编辑状态的管理以及专题数据的自动更新。

控制层(Controller Layer): 负责用户操作与系统工具方法API的调度。

组件层(Component Layer): 管理系统组件,包括组件注册、创建、加载等。

服务层(Service Layer): 负责数据传输、系统配置加载等。

附属功能(Extra Layer): 资源位管、数据查询、专题模板管理等。

其中,专题系统组件承担着活动页面制作中极其重要的角色。随着活动页面组成部分越来越多样,组件的类型也在不断的丰富,组件的功能也在不断的迭代。同类的组件不断的增加,同时同一个组件的主题样式也在不断的丰富适应更多的 UI 设计。 面对组件类型、主题的不断丰富,专题系统使用了两种方式解决组件多样性的问题。 一种是通过创建新组建,解决组件间的逻辑的差异。如:导航类组件。

另一种是通过为组件添加不同的主题,解决组件结构与主题的差异。如产品列表的卡片样式:

专题系统的诞生,将开发工作从制作专题活动页面的工作中解脱出来,而已专注于如何规划与设计系统组件,以及提供主题模板。但是伴随着需求不断提升,专题活动玩法、与主题风格迭代越来越快。新的问题也渐渐浮现出来。

新问题的产生

当有一天想要为导航添加一个通用的功能,需要修改这么多组件,并且每个组件对同种需求的实现方式还有细节的调整,才发现这么多导航组件,连个基类都没有。 当有一天想要再添加一种产品卡片的模板样式,才发现这个组件的卡片样式已经有这么多了,并且一直存在于系统中。 当有一天想要开放一条配置的配置,才发现就连改一个文案,都需要经过创建分支,修改文案,项目提测,项目发布的过程,导致活动等了一两天才能够正常上线 当组件更新出现问题,已经影响到线上活动时,却要伴随着上一次系统修改同时回滚的尴尬境地。 从以上现实问题中,分析专题系统组件管理存在以下问题: (1)组件通用的逻辑没有合理复用 (2)组件的主题没有按需加载 (3)系统组件的开发依附于专题系统,不利于组件的快速迭代与维护。 那么该如何解决这些问题呢?

组件模板平台的产生

经过对系统组件原有功能的调研,设计出一套独立于专题系统的组件模板平台,专门用于为专题系统提供组件与主题。 组件模板平台主要对原有的系统组件做以下几方面调整:

组件与系统分离

将组件从专题系统中分离出来,专题系统只保留组件类的容器,实际组件实例,从组件模板平台中获取。 具体如何实现的呢?先让我们看下专题系统组件的构成:

  1. /nav/singleNav

  2. ├── _style.scss                      // 组件的主题样式

  3. ├── config.js                        // 组件的可配置数据以及默认值

  4. ├── formConfig.mustache              // 配置面板的模板

  5. ├── index.js                         // 组件的入口文件,组织组件的功能逻辑以及生命周期管理

  6. └── template.mustache                // 组件Dom结构模板

将组件从系统中分离出后,系统将只作为容器存在,去除了组件的实际逻辑与配置。所以只保留了部分文件。

  1. /game/miniGame

  2. ├── config.js                        // 容器配置

  3. ├── formConfig.mustache              // 容器配置模板

  4. └── index.js                         // 组件模板加载与转换器

组件的配置信息也做了极大的缩减。 原组件:

  1. {

  2.    properties: {

  3.        'mPageSize': '4',//单页显示数量

  4.        'mPaddingTop': '0px',//上边距

  5.        'mPaddingBottom': '0px',//下边距

  6.        'isShowListImg':0,

  7.        'mListImage':'',

  8.        'mBgImage': '', // 背景图

  9.        'areaColor':'#fff',//商圈文字颜色

  10.        'areaBgColor':'#000',//商圈背景颜色

  11.        'btnFontSize': '14px',//购买按钮字体大小

  12.        'btnColor': '#ff4500',//购买按钮背景颜色

  13.        'btnFontColor':'#fff',//购买按钮字体颜色

  14.        'hoverColor': '#DE3E03',//购买按钮虚浮颜色

  15.        'priceColor': '#fff',//价格背景颜色

  16.        'priceFontColor': '#ff4500',//价格字体颜色

  17.        'changeFontSize': '16px',//换批按钮字体大小

  18.        'changeBgColor': '#ff4500', // 换批按钮背景色

  19.        'changeFontColor': '#fff', // 换批按钮字体颜色

  20.        'changeBtnValue': '更换一批', //换批按钮内容

  21.        'boxImg':'',//上下页__框架背景图

  22.        'boxColor':'#fff',//上下页__框架颜色

  23.        'boxPaddingTop':'20px',//上下页__框架上边距

  24.        'boxPaddingBottom':'40px',//上下页__框架下边距

  25.        'preText':'上一页',//上下页__上一页文案

  26.        'nextText':'下一页',//上下页__下一页文案

  27.        'preOrNextBtnWidth':'100px',//上下页__按钮宽度

  28.        'preOrNextBtnHeight':'30px',//上下页__按钮高度

  29.        'preOrNextBtnBorderColor':'#a94442',//上下页__按钮边框颜色

  30.        'preOrNextBtnBorderRadius':'4px',//上下页__按钮圆角

  31.        'preOrNextBtnColor':'#ff4500',//上下页__按钮背景颜色

  32.        'preOrNextBtnFontColor':'#fff',//上下页__按钮字体颜色

  33.        'preOrNextBtnImg':'',//上下页__按钮背景图片

  34.        'preOrNextBtnFontSize':'14px',//上下页__按钮字体大小

  35.        'preOrNextBtnMargin':'20px',//上下页__按钮间距

  36.        'preOrNextBtnHoverColor':'#ff4500',//上下页__按钮悬浮颜色

  37.        'preOrNextBtnHoverFontColor':'#fff',//上下页__按钮悬浮字体颜色

  38.        'preOrNextBtnHoverBgImg':'',//上下页__按钮悬浮背景图片

  39.        'moreBtnFontSize': '16px',//"跳转查看更多"按钮字体大小

  40.        ……

  41.    }

  42. }

新组件:

  1. {

  2.    properties: {

  3.        _templateIdList: [], // 临时保存活动模板Id列表

  4.        gameTemplateId: ''   // 当前游戏模板Id

  5.    }

  6. }

组件实例化过程

这种实现方式基本可以解决之前分析的大多数问题。比如: --组件开发与系统开发相互独立,便于组件快速创建、组件的快速更新迭代以及版本控制。 --专题系统保留简化的组件类容器,使系统更为轻量。同时也可以实现组件的按需加载。 --便于管理组件间的继承关系,实现基本逻辑复用。

组件配置动态生成

组件从专题系统分离出来够,将面临的一个问题是,如何动态解析组件配置信息,创建配置面板。 组件的配置信息同组件模板一样,在组件模板平台维护。专题系统编辑专题活动时,将动态加载组件的配置信息生成配置面板,对接专题系统组件的定制化。

实现组件模板中的配置信息:

  1. {

  2.  "prizeConfig": {

  3.    "label": "游戏配置",

  4.    "type": "group",

  5.    "value": {

  6.      "prizeDurationStart": {

  7.        "label": "抽奖开始时间",

  8.        "type": "datetime",

  9.        "value": ""

  10.      },

  11.      "prizeDurationEnd": {

  12.        "label": "抽奖结束时间",

  13.        "type": "datetime",

  14.        "value": ""

  15.      },

  16.      "prizeDrawCount": {

  17.        "label": "用户抽奖次数",

  18.        "type": "text",

  19.        "value": 1

  20.      },

  21.      "countType": {

  22.        "label": "计数方式",

  23.        "type": "boolean",

  24.        "text1": "日次数",

  25.        "text2": "总次数",

  26.        "value": "true"

  27.      }

  28.    }

  29.  }

  30. }

到专题活动编辑页配置面板的转化:

规划总结

专题系统组件分离的初步尝试算基本完成。但是同样有一些可以调整的点,开发效率的提升以及优化也是开发不断思考的问题。

组件模板便捷开发

目前专题系统组件模板的开发使用的是可视化输入面板,即使添加了代码高亮,但不合适开发进行便捷开发与调试。结合 Git 的与平台搭配使用,详细能够实现跟便捷更高效的开发流程。

版本控制与发布管理

组件模板平台的实现,可以使组件的版本独立于系统单独维护,同样相信结合 Git 版本控制,能够实现更完美的本版本控制。同时建立完善的组件测试与发布体系也将是未来的实践方向。

组件使用监控

我们都说要拿数据来说话,组件添加使用情况的统计数据也是未来必不可少的功能之一。更好的检测组件的使用现状与效率往往能给予组件优化更准确的参考。

公众号导航