内容来源：2017年5月13日，徐辛承在“h5梦工厂”进行《前端开发配置化方案》演讲分享。it大咖说作为独家视频合作方，经主办方和讲者审阅授权发布。 阅读字数：2017 | 9分钟阅读
摘要
前端开发的主要职能就是把网站的界面更好地呈现给用户，它涵盖的知识面非常广，既有具体的技术，又有抽象的理念。百度外卖高级前端工程师徐辛承，为我们带来关于百度外卖前端开发配置化方案的分享。
内部平台开发中的痛点
所有业务线由一个大的内部平台来完成，最后集中下放到app中。这个系统的缺点就是重复性工作很多。
以banner配置为例，我们发现页面功能相似度高，重复工作较多。我们之前的开发模式在搭建基础页面时，主要靠复制另一个类似项目的代码，在此基础上进行修改来完成。同时由于一个代码可能要多人开发，代码风格难以统一。
受到了百度h5的启发，我们最终想到要通过一个平台来解决这些问题。百度h5是通过拖拽的方式来生成h5活动页面的一个平台，它的组件非常丰富。它整个页面的设计思路和现在一些组件化框架的思路很相似。它把页面中的元素拆分到以组件为最小单位，通过组件构成一个页面。
但其实它并不适合我们的业务场景。因为在这样一个平台中，我们内部平台的交互无法支持，组件也不能拓展。
我们想要的得是一个简单的平台，所有角色都能使用，拖拽界面适用度高，大家乐于接受。
我们希望任何页面都能用可视化的方式去完成。我们会提供丰富的组件库、交互的配置方式，同时也提供了自定义拓展脚本，通过配置化的方式去生成页面。
因为是我们自己的团队来开发这个项目，所以我们希望这个项目的可维护性很强。我们会用熟悉的技术栈开发，用可扩展性强的方式去挖掘技术栈底层内容，模块会拆分得很详细。
最终基于这些想法，我们开发了blocks平台。
页面配置平台blocks
1什么是blocks？
blocks是一个拖拽+配置生成的系统。组件是页面中的最小单位，blocks有拖拽形式的页面画布，可以支持组件的添加和扩展、支持自定义脚本。blocks是基于vue2.0开发。
2页面配置模块
页面配置模块主要分为组建列表、页面画布和设置组件属性。它的输出是config.js，同时会在mapconfig.js里预留事件钩子。
3脚本配置模块
因为现在还没有完全实现可视化，我们在json文件里开发扩展脚本，生成了一些事件钩子去更快地开发代码。
4页面渲染引擎
页面渲染引擎是最核心的部分。通过json配置文件生成页面，解析组件的配置和层级关系，以及解析配置文件里的自定义扩展脚本，最后渲染出页面。
平台核心设计
1核心思想
我们最初的想法是，输入是json，输出是web page。后来经过思考发现在一个json中实现输入有些困难，所以把json拆分为config.js和mapconfig.js。
2config.js
3为什么这么做？
因为virtual dom tree结构为object，代码量有明显减少。基于virtual dom的实现，它的拓展性是很强的。
4每一个节点
针对每一个virtual dom的节点，主要有三个属性。
第一个是tag，就是节点名称，也可以理解为这个节点用的组件。
第二是data，节点属性。
children是这个节点包含的所有节点。
5mapconfig.js
以前用的框架是mvc，model和view没有框架实现，它们之间的交互都是通过controller来解决。
这种命令性的开发方式会导致controller开发效率底下，容易变得臃肿和难以维护。
6脚本配置
在state里它是一个驱动应用的数据源。view以声明方式将state映射到视图。而actions是响应在view上的用户输入导致的状态变化。
但如果把代码中的事件写得很松散的话，并没有办法形成一个配置文件。所以我们运用了vuex。
vuex是专为vue.js应用程序开发的状态管理模式，也是集中管理状态的一个工具，它以相应的规则保证状态以一种可预测的方式发生变化。
vuex.store是mapconfig.js的一部分，它包含了state、getters、mutations和actions。组件属性在state里，组件预埋的钩子放在mutations和actions里，getters在需要的时候会用到。
vuex提供了辅助函数mapstate、mapgetters、mapmutations和mapactions在平台中进行执行。
目前新增了页面配置模块和脚本配置模块。
7组件的引入
对通用组件库和业务组件做了一次封装。以input组件为例，在写input组件模版的时候需要写一些相应的属性，组件配置模块把这些属性抽离出来，以可视化的模式在表单中进行填写。
每个组件中主要分为index.vue和setting.js。index.vue是渲染在画布和页面中的一个模版文件，setting.js是一个组件设置表单。
8脚本配置模块
脚本配置模块主要提供了vuex.store的开发和组建内部事件扩展，未来还会增加常规事件的可视化配置。当公司内部rd接口变多的时候，接口规范会很难做到，如果有一个平台能做到前端的交互和交互的规范，就可以反向约束rd接口的规范，更可以提高开发效率。
平台现状和规划
1收益对比
做这个平台之前，在接口上没有太多的规范。通过这个平台可以约束rd接口进行规范。有了规范之后可以极大地提高工作效率。
之前我们每个人代码风格不同，代码质量很低，难以维护。通过拖拽的方式生成，质量会很高。
原来基本所有的工作都是由研发完成的，现在部分工作可以外放，甚至当页面简单或者平台做到极致的时候，就可以实现0成本开发。
2未来要做的工作
功能：把组件库做得更丰富，尽量支持更多的组件；提供一个组合件的功能和可视化的交互配置。
易用性：增加ui设计，做一些系统交互方面的优化。
落地：对老代码做重构，用这个平台做新项目开发。
我的分享到此结束，谢谢大家！
相关推荐 推荐文章 <a href="http://mp.weixin.qq.com/s?__biz=mzixodqxmjc0ma==&mid=2247486616&idx=1&sn=9d759f9fd8d83e2318bef089c7da2a95&chksm=97ebaf33a09c2625c5db5670f032cf05d91b1419bffc7b90ca59121c35693659aef1f37af4dd&scene=21#wechat_redirect" target="_blank">阿里巴巴前端专家渚薰：h5互动的正确打开方式</a> <a href="http://mp.weixin.qq.com/s?__biz=mzixodqxmjc0ma==&mid=2247486038&idx=1&sn=71dec7ea8d97d532d97d5a919d936fab&chksm=97eba9fda09c20eb87ec245f05293e41ed96e6f3ed8247e59264a1872660f4310731994bd92f&scene=21#wechat_redirect" target="_blank">微信开发中的前后端之坑</a> <a href="http://mp.weixin.qq.com/s?__biz=mzixodqxmjc0ma==&mid=2247485093&idx=2&sn=a877646eb7543ea601cf37501cce372b&chksm=97eba50ea09c2c18bb95ae90608ef64a719f9adea31fb3393741b2a1a72244b8adbe356bd8b0&scene=21#wechat_redirect" target="_blank"></a> 近期活动 <a href="http://mp.weixin.qq.com/s?__biz=mzixodqxmjc0ma==&mid=2247486678&idx=3&sn=520dd4a59e48b45876f94465c419379a&chksm=97ebaf7da09c266b4b26362bbc27730bdf3b71ab1c06a9703d862187bfe55802b583731245d4&scene=21#wechat_redirect" target="_blank">直播 | 2017红象云腾大数据基础软件v5.0发布暨合作伙伴大会</a>