通天塔平台重构之思考与架构设计

《通天塔平台重构之思考与架构设计》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、通天塔平台重构之思考与架构设计—运营活动搭建页的架构变迁主讲人田盛部门平台应用产品研发部-H5开发组1往事回眸与思考————————————————2架构设计目录————————————————CONTENTS3分享一些小细节————————————————4心得体会————————————————1.往事回眸与思考1.1通天塔是什么？通天塔：http://babel.m.jd.com1.2活动搭建页有哪些特征？模版模版实例种类多数据联动样式多结构复杂数据配置项数据源多灵活分期概念验证逻辑多1.3平台蓝图平台开放一站式服务：第三方接入支国际

2、化持，技术输出，技术引入提供国际化的支持：现已提供适配多种平台中文，英文，泰语提供多版本的适配方案：无线，WQ，PC，一号店等通天塔平台提供基础服务：可视化活动编辑，数据查询，3端页面输出1.4为什么要重构？代码臃肿重复性工作太多结构混乱开发效率低系统可扩展性低数据流混乱第三方难接入分层不清晰业务UI耦合技术栈不统一组件无法复用代码风格不统一1.5小目标1.开发效率能提高一点2.逻辑层次清晰一点3.第三方可接入1.6怎么做？组件化抽象可配置逻辑分层2.架构设计2.1技术选型基础设施本地调试构建工具JNPMGitLabkoaJ-oneMoni

3、tormiddlewareRAPWebpack核心库GulpReactRedux+SagaReact-RouterImmutablereselect2.2层次划分StoreService层数据处理层UI层APIServiceSceneComponentReducerValidationServicePageComponent控制层TransformServiceReduxSagaFeatureSharedErrorService2.3术语约定视口viewport属性面板proppanel视图模版viewtemplate属性区段propsec

4、tion视图实例viewinstance2.4页面结构EditorPageViewTemplateListViewPortPropPanelViewTemplateViewInstanceGeneralCustomViewTemplateViewInstancePropPanePropPaneViewTemplateViewInstance2.4.1ViewTemplateMetaToolspropdefinitionbabel-coretemplatejsonstylustemplate（JSX）clean-csstemplatesjso

5、nstyle（Stylus）js-yaml2.4.2数据结构定义viewtemplatemetatemplatestyleviewinstanceviewtemplatepropertiesdefaultPropertiestypeidcustomPanenamerawData…iconsmetaparentKeymeta……由reselect组合在一起2.4.3示例2.5ViewInstanceStore2.5.1ViewInstance-模版渲染datadataSourceJSXtools2.5.2ViewInstance-样式处理2.

6、5.3ViewInstance-icon处理离线在线Stylebackground：$$tip_2icon图片_mapIcons2stylespritesmithicon信息表+雪碧图生成背景样式2.6PropPanel咋整？2.6.1配置表映射2.6.2组件设计PropPanelGeneralCustomPropPanePropPaneSectionSectionSectionGeneralCustomPropPane➕PropertyCustomPropertyCustomPropertyPropFieldPropPropPropert

7、y2.6.3属性的更新与验证PropPaneConfigurationReduxStoreGeneralPropPane…ReduxReducerReduxSagaSectionSectionPropFieldPropFieldValidationPropFieldPropFieldService2.6.4属性更新val=data_i.getIn(name.split(‘.’))onChange(name,val)配置文件GeneralPropPanePropertyname:configData.price获取映射的数据触发更新事件Red

8、ucerPageReduxStore合并更新操作更新数据dict.setIn([ins.key,‘rawData’].concat(ins.propName.split(‘.’)