2.x 编辑器 渐进化改造方案 意见征求

[tocque]

需求&&目标

• 目前的2.x编辑器正在非常高速的新增和完善各项功能，与此同时，各个部分代码也在激增，在一年前，2.x编辑器的可读性就显著比样板差， 在2.6重构以及完善文档的辅助下, 这个差距更加明显
• 以五图层插件为代表, 2.x编辑器开始探索编辑器扩展性, 但是目前仍然限于与样板一样的hack处理, 由于编辑器可读性更差, 这样的扩展难度相当高
• 在mota-js整体功能完善后， 出现了更多想要制作非魔塔的需求， 在这种情况下，除了扩展编辑器，移除已有的编辑组件也是需要考虑的(可插拔)
• (出于私心)3.0编辑器报废后，遗留了大量的可复用模块，对其进行重用可以完善一些编辑器功能

解决方案

• 完善编辑器的jsdoc, 并使用// @ts-check 进行类型检查
• 引入框架

AMEF.js是一个半MVVM框架， 其支持大部分vue语法, 可以用来兼容3.0的视图层组件库 同时其中附带了import和export的运行时转译，使得代码可以在具备充分高亮的情况下进行模块化

AMEF具备组件化开发的能力， 可以将每个视图层组件的相关代码(HTML, js, css)封装在一起，提高可读性和可修改性 AMEF的另一个重要意义是将视图层渲染变为单向的监听, 这样, 视图层与内部数据不再耦合，可以简单的从视图树上去除任意组件而不会报错，以满足可插拔性 另外一方面，相对于传统上依赖虚拟dom的MVVM框架， AMEF仍然是直接进行DOM操作， 并提供了对应的封装函数，这样，学习成本相对低，而且目前的开发范式仍然可以继续使用

大概的路线

• 编写编辑器jsdoc

• 引入AMEF.js，在此基础上完成一个单独组件， 推荐代码编辑器(3.0已经完成的模块)

• 顺次将所有非主要视图组件 组件化，如blockly， 弹出层，这些组件不在主要的DOM树上，可以简单处理

• 顺次对左侧面板组件化

• 表格组件化