最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JSON5 解决了 JSON 的两大痛点

    正文概述 掘金(乔珂力)   2020-12-10   510

    JSON 格式可以说是目前最流行的数据传输格式了,被广泛应用于前后端通信,尤其是在 SPA 应用中,JSON 数据通过 HTTP 协议进行传输,具有体积小、易序列化、可读性好等优点。(当然,这些优点是相对的,例如体积小是相对于 XML 而言的,如果跟 protobuf 比,那体积就大多了。)

    JSON 虽好,但是仍有两大痛点让开发者苦恼不已:

    • 不能添加注释(这个不能忍)
    • 序列化之后的 key 被加上了双引号(体积变大了)

    如何添加注释

    目前的标准是不能添加注释,如果想添加的话,只能曲线救国了,例如我是这么干的:

    {
      "----------base----------": "通用模块变量定义",
      "common": {
        "object_not_exit": "对象 ${id} 不存在!",
        "invalid_username_or_password": "用户名或密码错误!"
      },
      "----------sms----------": "短信模块相关变量",
      "sms": {
        "template_missing_parameters": "模板缺少变量!",
        "param_length_limit": "参数超出长度限制!"
      }
    }
    

    总结下来一般有下面三种方法:

    • 使用约定的 key 作为注释字段:

      如以 //_comment#####—--— (#- 的个数自定) 作为注释的 key 等。

    • 使用重名 key 作为注释:

      即每个 key,使用两次,第1次做注释,第2次做实际属性。

    • 使用字段 key 加前缀做注释 key:

      常用的前缀有 #, _ 等。

    能否去掉 key 中的双引号

    序列化之后的 key 被加上了双引号,例如:

    const obj = { name: 'keliq', age: 12 }
    console.log(JSON.stringify(obj))
    // {"name":"keliq","age":12}
    

    仔细观察可以发现,对象的 key 是没有双引号的,但是序列化之后,两边都被加上了引号,导致字符数量变多了,那问题就来了:

    • 为什么要给 key 加双引号?
    • 能不能去掉 key 里面的双引号?

    这里先说一个历史背景:

    但是在 ES5 之后,保留字也是可以作为 key 的了,因此在不考虑向后兼容的情况下,如果能把 JSON 对象表示成跟 JavaScript 对象一模一样,只是把中间的空格、换行等删掉该多好呀!

    强大的 JSON5

    你想要的,它都有!这就是 JSON5 标准,它有以下特性:

    对象

    • 对象的 key 可以跟 JavaScript 中对象 key 完全一致
    • 末尾可以有一个逗号

    数组

    • 末尾可以有一个逗号

    字符串

    • 字符串可以用单引号
    • 字符串可以用反引号
    • 字符串可以用转义字符

    数字

    • 数字可以是 16 进制
    • 数字可以用点开头或结尾
    • 数字可以表示正无穷、负无穷和NaN.
    • 数字可以用加号开头

    评论

    • 支持单行和多行注释

    空格

    • 允许多余的空格

    可以看到,JSON5 比 JSON 强大很多,是 JSON 的超集,就好比 TypeScript 相较于 JavaScript。安装方法为:

    npm install json5
    # 或者 yarn add json5
    

    序列化示例:

    const JSON5 = require('json5')
    const obj = {
      name: 'keliq',
      age: 12,
    }
    const res = JSON5.stringify(obj)
    console.log(res) // {name:'keliq',age:12}
    

    反序列化示例:

    const JSON5 = require('json5')
    const json5str = `// 单行注释
    {
      name:'keliq', // 这是姓名
      age:12, /*这是年龄*/
    }`
    console.log(JSON5.parse(json5str))
    

    看到这里,不禁感叹,这才是 JSON 应该有的样子!你说呢?


    起源地 » JSON5 解决了 JSON 的两大痛点

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元