闲扯
我以一个UI设计师的身份入行互联网，没错就是大家说的美工，一个艺术生做了美工那是再自然不过的事了，花了几年时间做美工，后来又做UE（产品交互），但心中总有个执念，要了解下当初那个总是瞎bb我的“前端”在干嘛；记得以前前端总是抱怨我：“这效果不能实现，那方案影响性能“，或者直接怼我:”不是你ps里简单做下动效的事……”！好吧，让我来尝试尝试。从此便开启一个美工的“前端”之路。
转行前端并不是想象的那么简单，一个连console.log都搞不明白的人刚开始就只能像松鼠一样不断的在学习笔记里摘录别人的代码片段，这段代码能实现什么，那段代码又能干嘛，啥也看不懂……，买红宝书通篇看完，还是不懂，想想是缺少实战吧，于是干脆辞职换个纯粹的前端的工作；
实话说，一路过来确实难堪，耳畔总有声音在说“是不是前端啊，x君能造你咋就造不出来？…”;就这样我厚着脸皮在无知中混过来😂
害！回归主题，今天主要想讲一下我做低代码项目的过程。
愚公
所在的部门是公司运营会员的开发部门，每天处理大堆会员运营的活动，这些活动很多都是形式雷同，只是换换UI或小小调整交互。这样的重复劳动让人枯燥乏味，我想能不能做一个配置活动的工具？说干就干，于是就有了现在线上的会员活动模版的配置；虽说项目这两年也满足了公司的成千上万次抽奖活动配置，但项目写的真不敢回头看。
来，重写吧！而且不能耽误工作,得是用业余时间。一个人陆陆续续的写了好长时间,撸完前端,撸后端,方案也被自己推翻一次又一次,终于有了大概的雏形.为了自嘲一下我这日复一日的码砖,所以我给项目起名为愚公,并将它开源,下面是地址,如果您喜欢请点个star支持,万分感谢!
愚公项目仓库地址: github.com/eightfeet/y…
编辑器: yugong.dawenxi.art/dashboard/#… 登录id:test 密码:123456
回顾一下各环节的实现思路
一个“可拖拽的”、“所见即所得”的编辑器，这里说“所见即所得”并非只是形式上长得一致，而是把真正的项目跑在编辑器中，甚至连API请求的数据都是真实的；曾经有过把页面当组件引入到编辑器中的经历，总认为做好相关隔离就OK了，事实证明那是一场灾难，所以有必要彻底割离两个端，做真正意义上的“所见即所得”。那么......如何保持两端通信？起个websocket服务？不稳定而且繁琐，还是尽量充分发挥客户端的能力，利用iframe的postmessage通信吧,这是个性价比不错的方式，再加上locastorage做本地缓存，仅在最后发布项目时才与后台发生关系，这样解决编辑器与项目通信以及数据的临时存储问题。
编辑器要有组件,组件分为两大类型: 一批基础组件如文本、图片、轮播、消息播报等等，用于满足大部分基础业务的展示定制需求。还有一批根据具体业务场景定义的组件，开放可编辑的部分，以满足公司具体业务场景。
那么问题来了，组件之间如何安全可靠的通信呢？没错EventBus
较为复杂抽奖场景: 请手机扫码访问
一个可订阅可发布的事件处理中心event Emitter，每个创建的组件实例以UUID为唯一身份向事件处理中心注册方法，所有模块组件实例都可以通过自身事件向eventEmitter订阅任何其他组件的方法，做到组件间互相作用。
那么剩下的是数据通信了，这就显得简单了，我们只要充分利用redux存储和处理好runningTime即可解决。
接下来就是样式编辑了，考虑样式问题前我必须思考一下“单位”，我认为“单位”应该可以自定义的，全局的“单位”或者是针对元素的“单位”都可以由用户自定义，它的权重应该是优先使用元素定义的单位，如果元素未定义单位那就统一使全局的单位。灵活的单位配置可以做出任何终端应用；有了独立的单位后那就需要抽出样式的数值部分来保存，这样既可以在单位之间的换算，又可以更方便地还原到编辑器中。
表单处理: 请手机扫码体验
样式解析
任何开放样式编辑能力的组件元素都可以进行样式编辑，编辑器端yugong把常用样式定义为“布局”、“文字”、“边框”、“背景”、“投影”，“变形”，“动画”等几个类别，编辑时将样式的“属性”、“值”与“单位”分别分开的存储到新的数据模型中。而客户端页面通过编译器转换为样式注入到页面中即可；关于动画部分做得很憋足，这里满足的仅仅是为某些元素提供简单的动画，用于强调元素的重要性。
动画表现：请手机扫码体验
以上便是yugong的主要思路了，这里要说明一下的是yugong的cli用的是create react app ,我这样做的目的是期望后续的升级变得简单，如果您喜欢请关注项目点个star,谢谢!
