【前端】辅助开发工具CMP构思与实现

去年的时候，笔者总结了一篇关于神器的设想，幻想着神器能帮我们前端开发人员完成很多事情。时隔一年，经过不断地思考与实践，神器终于来了。虽然现在开发出来的功能还不是很完善，但是已经能减少很多开发工作量了，特别是对于前端设计方面的意义重大，有了神器的帮助，作为前端开发的你会用一种新的角度，一种做设计的角度来思考如何开发组件、模块，如何构建你的产品线、业务线。

       

 

关于前端开发思考的问题

1. 视觉稿一直是前端开发的生命线，每个前端开发工程师都想要做出美观的页面、绚丽的动画，优雅的实现交互逻辑。每次花费在修改视觉上面的时间很多，而且如果视觉修改一点，又需要重新调整。还有就是对于视觉稿的还原度，做出来的效果总是会有差别。
2. 页面布局是做界面程序的开发人员都会遇到的问题，然而每个开发人员喜好不同，所掌握的知识深度也不同。有的同学喜欢用这种方式实现一个页面布局，有的同学可能习惯用另外一种方式实现页面布局。虽然最终都能实现页面展示效果，但是这种不统一，或者说是不太规范的实现方式组合在一起的时候，容易出现稀奇古怪的问题。
3. 代码不规范，容易犯人为错误。与人工操作相比，我更相信机器。人类发明各种机器，虽然是机械式的操作，但是他都是按照既定程式来运作，极少或者几乎不会出现类似拼错单词这种人为错误。
4. 虽然说前端门槛很低，学一些基础知识就可以动手做一些简单的页面。但是对于像运营或者一些实习生来说，要学习企业级前端开发框架或者产品线的业务代码成本都比较高，学习周期长，难以快速上手写出合乎规范的高质量代码。如果有一些脚手架工具辅助做开发，那么上手更容易，学习路径更短。

 

解决方案 – 前端辅助开发工具（神器）

A.对于第一个问题其实很难有万全的解决方案。

经过实践与摸索，我总结的方法只有一种：模型抽象。所有的程序无非是数据+算法组成，为什么前端开发页面效果不能抽象成一组数据结构和算法呢？于是我就这么做了。
那么问题来了，如果采用数据结构来抽象，用什么样的数据结构呢？如何抽象呢？

简单的以网易新闻首页为例分析，对于展示型页面使用最多的元素是 div span img …，不同的元素有各自的css属性，一些css属性是通用的，一些css属性是特有的。那么数据抽象就至少需要两个维度，元素类型的抽象和样式的抽象。如下图所示：

有了数据模型之后，还不够。我们还需要根据数据模型计算出元素对应的展示效果，这个其实也很简单，主要是在元素中实现渲染的。这里不作多介绍，期待神器3详细介绍。

B.对于页面布局的问题
其实很早国外就有许多界面化的设计网站，用户只需要简单的操作，添加文本，拖拽位置，修改属性，就可以做出自己想要的展示界面。说实话，其实很早就想做这种了，一直拖着，因为觉得自己做不出来。做了这么久的业务，每次写视觉效果真的很烦，终于下定决心做一个界面编辑器了。之前看过bootstrap上有一个开源的界面编辑器layout，可是不够灵活，后来放弃了。自己研究了一下界面编辑器需要实现的问题其实就是页面布局，如何做页面布局呢？有什么规范化的实践方式吗？其实我也不知懂啊，只是在不断摸索。
于是我采用了最简单的一种布局模式：相对定位+绝对定位。原理如下：

其实很简单，就是最外层的包裹元素采用相对定位模式，内部所有子元素都采用绝对定位模式。无论多复杂的页面布局，只要通过这种嵌套的方式都可以实现。也就是大事化小，小事化了。对于多层嵌套可能是这样：

于是乎，另外一个重要的问题出现了，如何实现嵌套？
我的解决方案是：实现函数编程。
总结一下程序员编码过程中使用的最频繁的函数无非有三种：if函数，for循环函数和模板中常用的include或者import函数。 也就是说我只要实现这三种函数的解析模式，基本就可以实现80%以上的业务逻辑。
那么函数编程如何实现呢？我的解决方案是把函数看作为一种特殊的元素来处理，他继承自抽象元素，但是他有自己的特殊属性和自己的渲染方式。示例如下:

实现上面所有想法之后，就可以开始构建界面编辑器了，所有的操作无非都是对于数据的操作与处理。

C.代码问题
其实神器的产生就是为了解决代码的问题。我们通过界面编辑器已经实现了对于元素的编辑，那么代码无非是一个模型渲染的问题。这个实现其实类似于webpack打包，我先采用各种加载器加载出所有需要的资源，然后渲染展示出页面效果，然后你需要什么代码，我就导出什么代码。因为这一切数据都在我掌握之中，我可以根据数据模型导出js逻辑代码，可以导出渲染后的css内容，可以导出选然后的html结构。
我在代码导出这块根据教育产品部前端开发实践，定义了一些FTL和NEJ+Regular的模板，导出的时候可以根据模板直接导出代码了，使用的时候也更加灵活。
导出的实现逻辑如下：

D.神器其实是一种前端辅助开发工具，通过结合工具的开发模式，它能改变你传统的编码思想，从编辑代码转换到设计代码。当然这对于编程的门槛要求比较低的，而对于逻辑的门槛要求高一些，交互和视觉同事只要经过简单的学习，甚至可以采用这个神器来制作视觉稿和交互稿。这种输出到开发实现业务逻辑也是非常高效的。
PS: 神器中甚至还实现了常见的动画效果，主要通过简单的点击就能制作以及预览动画效果。

 

最后，神器来了

经过不断的开发实践，终于实现了这么一个前端辅助开发工具-CMP （core mapping pages，取名字真是一个头疼的问题）。大家对CMS耳熟能详，其实CMP也是类似的一款神器。它的主要设计思想我在上面已经详述过了，欢迎大家多多拍砖！（目前小部分核心功能还在开发中， 期待一下神器1.0吧）

官方主页：https://chalecao.github.io/cmp_manual/

在线尝鲜试用地址： https://chalecao.github.io/cmp/static/#/

使用手册： https://chalecao.github.io/cmp_manual/book/index.html

PS: 建议直接试用组件池功能 ，目前不是很稳定，还在完善中。

本文作者：曹欢欢，网易云课堂前端工程师

网易云原创投稿，未经许可，谢绝转载！