给json字段加上注释，或者更好

MySQL加入了JSON支持，NoSQL的特性，让我们多了一种应对业务快速增长的方法，不过使用JSON后，就不能像表字段那样方便的加入注释，对于团队协作开发、后期维护无疑是个障碍。最近发现利用 json schema 技术可以给JSON加上注释，甚至可以生成可视化UI编辑器，对于需要手动维护JSON字段的人来说简直就是福音。说了这么多，还不知是何物，不如一起来看看。

json-editor

图中，最右边是我们存储在数据表中的格式，中间是自动生成的编辑UI，而最左边就是需要额外定义的 json schema。举个例子，假如储存这样的结构在表中：

{
  "histories": {
    "tv":[
      {"title": "切尔诺贝利", "type": "美剧", "cur": 3, "at_time": "18m14s"},
      {"title": "爵迹临界天下", "type": "国产剧", "cur": 19,  "at_time": "42m54s"}
    ],
    "area": "CN" 
  }
}

我们不能给其中的JSON字段加上注释，比如 cur 、at_time表达的意思并不清晰，协同工作时，必然会增加额外的沟通成本。当修改JSON对象的某个值时，手动编辑json也很容易出错，毕竟JSON也只是阅读方便，大量编辑起来也很容易出错。

设想一下，我们的JSON数据有个图形可编辑界面，可以将每个字段的具体含义显示出来，并且便于编辑和保存，就最好不过了。用传统的方式实现，需要为每个不同的JSON结构设计用户界面，还得将各个字段正确的显示在界面上……开发成本过高，还不如手动修改简便，毕竟我们更想用一种方式解决这件事。但是，如果不用我们设计界面，只写配置，就能自动生成UI，再实现读写数据库，建立数据与配置的对应关系，就能实现我们的设想，用一种方式达到目的，倒也挺划算。让我们看看自动生成的UI效果

使用json-editor效果

看起来不错，不过界面上完全隐藏了真实的JSON字段，如果我们需要明确JSON字段，也完全可以通过调整配置达到目的。

通过title与description增强对应关系

这完全达到我的预期，现在只需要编辑 json-schema 就能制定出各种JSON结构的UI，至于 json-schema 的格式就像这样。

{
    "type": "object",
    "title": "当JSON遇上UI",
    "properties": {
        "histories": {
            "title": "histories",
            "type": "object",
            "description": "编辑用户历史",
            "properties": {
                "tv": {
                    "title": "tv",
                    "type": "array",
                    "format": "table",
                    "description": "电视剧",
                    "uniqueItems": true,
                    "items": {
                        "type": "object",
                        "properties": {
                            "title": {
                                "type": "string",
                                "title": "title 名称",
                                "options": {
                                    "inputAttributes": {
                                        "placeholder": "爵迹临界天下"
                                    }
                                }
                            },
                            "type": {
                                "type": "string",
                                "title": "type 类型",
                                "default": "国产剧",
                                "enum": [
                                    "美剧",
                                    "国产剧"
                                ]
                            },
                            "cur": {
                                "title": "cur 更新至",
                                "type": "integer",
                                "mininum": 1,
                                "default": 1
                            },
                            "at_time": {
                                "title": "at_time 播放至",
                                "type": "string",
                                "options": {
                                    "inputAttributes": {
                                        "placeholder": "10m32s"
                                    }
                                }
                            }
                        }
                    }
                },
                "area": {
                    "title": "area",
                    "description": "所在地区",
                    "type": "string",
                    "default": "CN"
                }
            }
        }
    }
}

现在，我再也不需要为JSON注释和编辑烦恼，json-editor 让我解脱（已飘

PS：汉化请修改 json-editor/src/default.js，我自译的土味英语就不分享了。

// 复制一份 JSONEditor.defaults.languages.en 并翻译到字符串中
JSONEditor.defaults.languages.zh = {
  /**
   * When a property is not set
   */
  error_notset: "必须设置属性",
  /**
   * When a string must not be empty
   */
  error_notempty: "必填值",
  // ...
}

// 翻译完别忘记修改默认语言
// Translation strings and default languages
JSONEditor.defaults.default_language = 'zh';

// grunt 编译后就是汉化版了

Bye~