是时候统一一波编辑器标准了! /框架推荐

做UI --- 看似没有太高深的技术含量, 但是确实整个前后端最烦人的任务, 尤其是web应用, 里面有各种控件和文本框, 除此之外还要合理的用UI表现数据的状态和关系, 暗示用户操作等待, 我每次考虑倒着写细节的时候都非常不开森.

在介绍我最爱的json-editor之前先来思考几个问题:

有没有思考过, 几乎所有的表单/编辑器都是一个json?

比如这个:

其中输入框/大文本框/(日期, 颜色)选择器/dataset(可输入可选)/都是string类型, 数字输入框/滑块都可以是number类型, switch/开关是boolean类型(也可以是null), 多选按钮/add&remove按钮则是array类型, 整个编辑器的输出就是一个object类型.

所以说, 用户登录框可以表示为:

{
    username:'Jim',
    password:'123'
}

账户信息编辑界面可以是:

{
    ID:'JinHengyu',
    age:22,
    married:false,
    skills:['javascript','node.js','mongodb']
}

在线写文章的:

{
    title:'how to use json-editor?',
    author:'Jim',
    date:1550300733224,
    class:null,
   content:'ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent',
    tags:['json','UI','web','original']
}

我一直认为JavaScript对软件行业最大的贡献是JSON, json是一个'文档', 它用string描述任何一个事物, string类型是在网络传输以及外部存储都风雨无阻的存在, 所以json就这样流行开来了...

为何要辛辛苦苦设计每一个控件, 最后再一条条读出来呢?

为啥不设计一个json对象的GUI编辑器框架,模拟上述'表单', 以一个原始json为输入, 以编辑好的json为输出?

当然, 这个编辑器肯定不能是代码编辑器, 比如这个:

 虽然json代码很简单, 但暴露给用户就会带来很大的安全隐患, 而且也没人愿意直接编辑json代码, 许多批量操作的功能没法实施, 那如果是这样就好多了:

嗯, 这种UI是我们开发者比较熟悉的简易对象编辑器, 它出现在浏览器的开发者工具以及IDE当中, 但对外行的用户来说还是不够友好, 所以依然不能拿来用.

最主要的原因是对于同一个数据类型有多种控件模式, 比如string类型可以使文本框也可以是select选择器, 不同的模式不仅能提高效率, 也能在view层面上对数据进行的约束, 所以编辑器模式是必不可少的.

选择最优雅的编辑模式

json-editor对每一种数据列行提供许多内置模式, 每一个模式又可以定制样式:

除了图形化, json-editor也提供了代码编辑器, 支持多种编程语言, 就不展开讲了.

 

JSON Schema

JSON Schema是一个正在进行中的草案, 旨在通过另一个json来描述并约束这个json的结构和类型, JOSN Schema提供了一套非常简单的描述语法比如:

{ "type": "string" }

json-editor当然也遵循了这个标准, 利用schema渲染编辑器, 有了标准的支持, 我们就可以正大光明的使用这个框架了! 使用了一段时间后, 我发现它的确没让我失望, 很精简很强大.

其实github上不止我推荐的这个框架, 还有其他竞争的JSON编辑器框架也同样遵守json schema, 我选择的这个虽然只有不到1k的star, 但它并不是私人项目, 而是有一个orgnization, 所以心理上感觉有保障(也许是矫情吧)

 

再增强 --- Promise化

JavaScript/typescript中一切都是promise, 即使完全同步的代码都可以封装成一个特殊的promise, 基于这一点, 可以将整个用户操作封装成一个promise:

首先将json-editor放在对话框中(主界面和对话框的生命周期形成一种栈结构);

对话框上至少2个按钮,一个是'Cancel', 另一个是'OK'或者'Submit'

editor打开的那一刻promise诞生, editor输入待编辑的JSON;

用户点击Cancel的时候对话框消失, promise被rejected然后销毁;

用户点击OK, promise被resolved, 解析值为editor的输出json;

封装完后json-editor就正式模块化了, 但前提是editor必须是临时生成的, 否则不需要模块化成promise.

--- 玩 ---