表单编辑器开发工作笔记

[abeet]

基本思路：

1、表单工具使用MVVM框架实现是合适的，目前的MVVM框架只有Avalon.js兼容IE6，体积也小巧，就用Avalon了。 3、参考现有成熟在线表单制作工具，主要参考其交互方式。 4、如果调研的在线表单制作工具中有基于MVVM的实现，代码亦可参考。

代码实现

• Avalon里各个vm必须有唯一id，先要考虑哪些做成普通vm，哪些设计成组件。插入到表单区的表单项当然是要设计成组件的，Avalon1.5以后组件的实现方式改了，先学一下。
• 刚开始Avalon用的是1.5.4，结果组件的配置传不进去，坑！向作者提交了bug，作者作了修正，才正常。小框架的问题是没有经过严密的测试，优点倒是直接和作者交流，反馈快。
• 拖拽相关的操作用jquery UI，开始用jquery 1.11.4，draggable方法的appendTo参数没有正常生效，坑！！没想到知名框架也有这样的bug，退回jqueryUI到1.10.4，终于正常。jQueryUI作者我可交流不了，要么换版本，要么自己改bug吧。
• 各组件的实现代码有很多相似的，但为了代码层级少、结构清晰，并没有合并。我认为代码可读可维护与代码量上作取舍时，优先代码可读可维护。
• ZCMS中的校验控件、日期控件在bootstrap推荐的样式下，需要作一些调整，以符合bs的风格。判断页面有没有引用bootstrap相关样式，我认为比较可靠的是测试form-control-feedback是不是绝对定位 if($('').appendTo(document.body).css('position')=='absolute'){} 如果要判断是否有引用bootstrap的组件js，我觉得用 if($.event.special.bsTransitionEnd)
• 把常用表单组件实现后，再用avalon实现一个等级星控件，代码量很少，不错，可作示例给同事们讲讲MVVM。
• 实现组件拖拽设计表单后，呈现表单是个问题，应该作为配置传入，在此对数据结构作了较大调整，在编码之前如能够多考虑一下，组件在编辑与呈现两种状态下的如何初始化为佳。
• 新建表单时，如果从已有模板开始，表单设计工作量会少很多，在前面的工作基础上准备一些表单构建数据即可。
• 一个小坑，记一下，avalon修改元素的data-xxxx属性值后，用jquery.data('xxxx')取的仍然是原来的值，需要用jauery.attr('data-xxxx')才能取到新值。

三、最终效果 1、编辑

2、模板选择

3、预览