iview表单设计器开发总结
使用到的库
vuedraggable——基于SortableJS的vue库,表单设计器拖拽设计功能的核心。
iview——核心UI框架,大部分组件都基于iview组件库
开发思考
字段写活后,代码书写逻辑中并不知晓代码运行时传入的字段,只能通过增加额外的固定的字段来告知书写逻辑运行时传入的活字段是什么。
异步问题。所有的后端数据都要通过异步的ajax请求获取,当有同步需求时,使用async和await。值得注意的是await只能在async内部使用,即async函数只能return出一个promise而无法将await的值return出来。
在Array.prototype.map方法中使用async函数做为回调,想要等待所有promise返回值后再进行下一步的操作,应使用promise.all方法。也可以尝试promise的一个库——bluebird,这个库中有异步处理map等数组遍历的方法。
vue生命周期相关。mounted与updated钩子函数不会承诺所有子组件也被挂载,若要等视图渲染完成后执行某代码逻辑,应将该逻辑放在mounted或updated中的vm.$nextTick回调中。
computed计算属性set的妙用。通常如果后端数据库中保存的值与前端表单中要双向绑定的值不同时,我们会在异步获取数据时将后端值转为前端值,在提交逻辑中再将前端值转为后端值。这种情况下,前后端值不一致的区间是从获取开始直到提交给后端结束,这样的代码逻辑在写业务时确实没有问题,但是在字段写活的情况下,获取数据与提交表单的逻辑中并不知道哪些字段前端所需要值与后端值不一致需要处理,而唯一知道当前字段是谁,是否需要做处理的地方只有表单双向绑定的地方,因此允许前后端值不一致的地方仅剩表单中双向绑定时的一个时间点了,而不是一个很大的区间。那么我们要使前后端值不一致一区间最小化,即只在表单中双向绑定的地方允许前后端值不一致,其他时候都是使用后端值。这就要用到computed计算属性了,双向绑定中不再绑定后端传过来的值,而是绑定一个后端值转为前端值的计算属性,这是计算属性的get,光有get只能实现双向绑定的回填,无法实现双向绑定的修改,那么重点就是计算属性的set,在计算属性的set中写一个函数,将双向绑定值再次转回为后端要求的格式,这样就实现了前后端值不一致区间的最小化,仅剩双向绑定时的一个点。