前端学堂
学有所用

前端开发神器cmp设计思想

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

关于前端开发思考的问题

a. 视觉稿一直是前端开发的生命线,每个前端开发工程师都想要做出美观的页面、绚丽的动画,优雅的实现交互逻辑。每次花费在修改视觉上面的时间很多,而且如果视觉修改一点,又需要重新调整。还有就是对于视觉稿的还原度,做出来的效果总是会有差别。

b. 页面布局是做界面程序的开发人员都会遇到的问题,然而每个开发人员喜好不同,所掌握的知识深度也不同。有的同学喜欢用这种方式实现一个页面布局,有的同学可能习惯用另外一种方式实现页面布局。虽然最终都能实现页面展示效果,但是这种不统一,或者说是不太规范的实现方式组合在一起的时候,容易出现稀奇古怪的问题。

c. 代码不规范,容易犯人为错误。与人工操作相比,我更相信机器。人类发明各种机器,虽然是机械式的操作,但是他都是按照既定程式来运作,极少或者几乎不会出现类似拼错单词这种人为错误。

d. 虽然说前端门槛很低,学一些基础知识就可以动手做一些简单的页面。但是对于像运营或者一些实习生来说,要学习企业级前端开发框架或者产品线的业务代码成本都比较高,学习周期长,难以快速上手写出合乎规范的高质量代码。如果有一些脚手架工具辅助做开发,那么上手更容易,学习路径更短。

解决方案 – 前端辅助开发工具(神器)

a. 对于第一个问题其实很难有万全的解决方案。
经过实践与摸索,我总结的方法只有一种:模型抽象。所有的程序无非是数据+算法组成,为什么前端开发页面效果不能抽象成一组数据结构和算法呢?于是我就这么做了。
那么问题来了,如果采用数据结构来抽象,用什么样的数据结构呢?如何抽象呢?
前端开发神器cmp设计思想
简单的以网易新闻首页为例分析,对于展示型页面使用最多的元素是 div span img …,不同的元素有各自的css属性,一些css属性是通用的,一些css属性是特有的。那么数据抽象就至少需要两个维度,元素类型的抽象和样式的抽象。如下图所示:
前端开发神器cmp设计思想
有了数据模型之后,还不够。我们还需要根据数据模型计算出元素对应的展示效果,这个其实也很简单,主要是在元素中实现渲染的。这里不作多介绍,期待神器3详细介绍。

b.对于页面布局的问题
其实很早国外就有许多界面化的设计网站,用户只需要简单的操作,添加文本,拖拽位置,修改属性,就可以做出自己想要的展示界面。说实话,其实很早就想做这种了,一直拖着,因为觉得自己做不出来。做了这么久的业务,每次写视觉效果真的很烦,终于下定决心做一个界面编辑器了。之前看过bootstrap上有一个开源的界面编辑器layout,可是不够灵活,后来放弃了。自己研究了一下界面编辑器需要实现的问题其实就是页面布局,如何做页面布局呢?有什么规范化的实践方式吗?其实我也不知懂啊,只是在不断摸索。
于是我采用了最简单的一种布局模式:相对定位+绝对定位。原理如下:
前端开发神器cmp设计思想
其实很简单,就是最外层的包裹元素采用相对定位模式,内部所有子元素都采用绝对定位模式。无论多复杂的页面布局,只要通过这种嵌套的方式都可以实现。也就是大事化小,小事化了。对于多层嵌套可能是这样:
前端开发神器cmp设计思想
于是乎,另外一个重要的问题出现了,如何实现嵌套?
我的解决方案是:实现函数编程。
总结一下程序员编码过程中使用的最频繁的函数无非有三种:if函数,for循环函数和模板中常用的include或者import函数。 也就是说我只要实现这三种函数的解析模式,基本就可以实现80%以上的业务逻辑。
那么函数编程如何实现呢?
我的解决方案是把函数看作为一种特殊的元素来处理,他继承自抽象元素,但是他有自己的特殊属性和自己的渲染方式。示例如下:
前端开发神器cmp设计思想
实现上面所有想法之后,就可以开始构建界面编辑器了,所有的操作无非都是对于数据的操作与处理。

c.代码问题
其实神器的产生就是为了解决代码的问题。我们通过界面编辑器已经实现了对于元素的编辑,那么代码无非是一个模型渲染的问题。这个实现其实类似于webpack打包,我先采用各种加载器加载出所有需要的资源,然后渲染展示出页面效果,然后你需要什么代码,我就导出什么代码。因为这一切数据都在我掌握之中,我可以根据数据模型导出js逻辑代码,可以导出渲染后的css内容,可以导出选然后的html结构。
我在代码导出这块根据教育产品部前端开发实践,定义了一些FTL和NEJ+Regular的模板,导出的时候可以根据模板直接导出代码了,使用的时候也更加灵活。
导出的实现逻辑如下:
前端开发神器cmp设计思想
d. 神器其实是一种前端辅助开发工具,通过结合工具的开发模式,它能改变你传统的编码思想,从编辑代码转换到设计代码。当然这对于编程的门槛要求比较低的,而对于逻辑的门槛要求高一些,交互和视觉同事只要经过简单的学习,甚至可以采用这个神器来制作视觉稿和交互稿。这种输出到开发实现业务逻辑也是非常高效的。
PS: 神器中甚至还实现了常见的动画效果,主要通过简单的点击就能制作以及预览动画效果。
前端开发神器cmp设计思想

最后,神器来了

经过不断的开发实践,终于实现了这么一个前端辅助开发工具-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: 建议直接试用组件池功能 ,目前不是很稳定,还在完善中)
前端开发神器cmp设计思想

谢谢!

转载请注明出处://fed123.oss-ap-southeast-2.aliyuncs.com/2017/01/18/2017_cmp2/
欢迎关注皓眸学问公众号(扫描左侧二维码),每天好文、新技术!任何学习疑问或者工作问题都可以给我留言、互动。T_T 皓眸大前端开发学习 T_T

赞(1) 打赏
未经允许不得转载:前端学堂 » 前端开发神器cmp设计思想

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏