啦啦外卖UI二次开发，啦啦外卖系统二次开发的简单介绍

摘要
前端开发的主要职能就是把网站的界面更好地呈现给用户，它涵盖的知识面非常广，既有具体的技术，又有抽象的理念。百度外卖高级前端工程师徐辛承，为我们带来关于百度外卖前端开发配置化方案的分享。

内部平台开发中的痛点
所有业务线由一个大的内部平台来完成，最后集中下放到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。