前端pua: JSON API还有二次封装的必要吗?

简介: JSON 是 JavaScript Object Notation 的缩写,最初是被设计为 JavaScript 的一个子集,因其和编程语言无关,所以成为了一种开放标准的常见数据格式。虽然 JSON 是源自于JavaScript,但到目前很多编程语言都有了 JSON 解析的库,如 C、Java、Python 等。

网络异常,图片无法展示
|



JSON 是 JavaScript Object Notation 的缩写,最初是被设计为 JavaScript 的一个子集,因其和编程语言无关,所以成为了一种开放标准的常见数据格式。虽然 JSON 是源自于JavaScript,但到目前很多编程语言都有了 JSON 解析的库,如 C、Java、Python 等。


虽然 javascriptJSON API 内置了两种方法方便我们快捷的处理数据格式转换:


  • JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象
  • JSON.Stringify() 用于将 JavaScript 值转换为 JSON 字符串


但也存在不少限制, 比如:


  1. JSON.Stringify 无法序列化 函数, 正则表达式
  2. JSON.parse 无法反序列化具有 函数, 正则表达式 等格式的数据
  3. JSON.StringifyJSON.parse 性能问题
  4. JSON.StringifyJSON.parse 解析出错导致整个系统 pua


这些问题我们不得不从 二次封装 的角度去解决.


第3个问题社区已经有比较可靠的解决方案可以来解决 JSON 方法的性能问题, 其核心思想就是 结构化json定义. 比如我们最常讨论的 JSON Schema, simdjson 就是一个不错的方案.


第四个问题也有解决方案, 就是在使用 JSON.StringifyJSON.parse 的地方包一层 try catch, 缺点就是每次调用都需要包 try catch, 不太符合前端 er 们的简约风.


所以分析了这么多, 针对复杂业务场景, 我们非常有必要二次封装 JSON API !

在上篇文章中我介绍了解决 1 和 2 问题的方案, 感兴趣的可以参考:



该 json 解析器基于原生JSON API进行的上层封装, 支持序列化函数, 正则类型


  • 支持原生 json api 调用方式nativeStringify, nativeParse
  • 支持序列化和反序列化函数 stringify, fastStringify, parse
  • 支持序列化和反序列化正则 stringify, fastStringify, parse
  • 内置开箱即用的工具方法


  • 判断函数类型 isFunc
  • 判断对象类型 isObj
  • 判断数组类型 isArr
  • 判断对象或数组类型 isArrOrObj
  • 判断正则类型 isRegExp


同时方案中也解决了 4 中提到的问题, 并且支持操作后的回调, 使用方法如下:


  1. 安装 xijs


yarn add xijs


  1. 使用


import { parser } from 'xijs';
const door = {
  a: 1,
  b: function () {},
  c: {
    c1: 'h5-dooring',
    c2: () => {},
    c3: {
      c: '3fvc',
      d: {
        dd: () => {},
        ee: /[a-z]/g,
      },
    },
  },
  d: /[0-9]/g,
};
// 将对象序列化
parser.stringify(door);
// 结果如下:
// {
//  "a": 1,
//  "b": "__xfunc__function b() {}",
//  "c": {
//    "c1": "h5-dooring",
//    "c2": "__xfunc__function c2() {}"
//  }
// }
// 将json数据反解析成对象
parser.parse(parser.stringify(door));
// 结果如下:
// {
//  a: 1,
//  b: function b() {},
//  c: {
//    c1: "h5-dooring",
//    c2: function c2() {}
//  }
// }


同时 xijs 还在持续扩充更有用的工具函数, 让业务开发更高效. 目前已集成了如下工具函数:


  • store 基于 localStorage 上层封装的支持过期时间设置的缓存库, 支持操作回调
  • uuid 生成唯一id, 支持设置长度
  • randomStr 生成指定个数的随机字符串
  • formatDate 开箱即用的时间格式化工具
  • debounce 防抖函数
  • throttle 节流函数
  • url2obj 将url字符串转换为对象
  • obj2url 将对象转换成编码后的url字符串
  • isPC 判断设备是否为PC类型



目录
相关文章
|
8天前
|
JSON API 数据安全/隐私保护
深度分析淘宝卖家订单详情API接口,用json返回数据
淘宝卖家订单详情API(taobao.trade.fullinfo.get)是淘宝开放平台提供的重要接口,用于获取单个订单的完整信息,包括订单状态、买家信息、商品明细、支付与物流信息等,支撑订单管理、ERP对接及售后处理。需通过appkey、appsecret和session认证,并遵守调用频率与数据权限限制。本文详解其使用方法并附Python调用示例。
|
10天前
|
JSON API 数据格式
淘宝/天猫图片搜索API接口,json返回数据。
淘宝/天猫平台虽未开放直接的图片搜索API,但可通过阿里妈妈淘宝联盟或天猫开放平台接口实现类似功能。本文提供基于淘宝联盟的图片关联商品搜索Curl示例及JSON响应说明,适用于已获权限的开发者。如需更高精度搜索,可选用阿里云视觉智能API。
|
18天前
|
JSON 缓存 API
淘宝店铺所有商品API,json数据返回
淘宝店铺所有商品API的JSON数据返回通常包含商品的基本信息、动态数据以及分页信息等。以下是一个详细的JSON数据返回示例,以及相关字段的说明
|
2月前
|
存储 JSON 关系型数据库
【干货满满】解密 API 数据解析:从 JSON 到数据库存储的完整流程
本文详解电商API开发中JSON数据解析与数据库存储的全流程,涵盖数据提取、清洗、转换及优化策略,结合Python实战代码与主流数据库方案,助开发者构建高效、可靠的数据处理管道。
|
21天前
|
JSON 算法 API
淘宝商品评论API接口核心解析,json数据返回
淘宝商品评论API是淘宝开放平台提供的数据服务接口,允许开发者通过编程方式获取指定商品的用户评价数据,包括文字、图片、视频评论及评分等。其核心价值在于:
|
2月前
|
JSON API 数据格式
Python采集京东商品评论API接口示例,json数据返回
下面是一个使用Python采集京东商品评论的完整示例,包括API请求、JSON数据解析
|
2月前
|
JSON API 数据格式
淘宝拍立淘按图搜索API,json数据返回
以下是淘宝拍立淘按图搜索API接口返回的JSON数据示例及关键字段解析
|
3月前
|
JSON API 数据格式
淘宝商品评论API接口,json数据示例参考
淘宝开放平台提供了多种API接口来获取商品评论数据,其中taobao.item.reviews.get是一个常用的接口,用于获取指定商品的评论信息。以下是关于该接口的详细介绍和使用方法:
|
3月前
|
数据采集 Java API
深度解析:爬虫技术获取淘宝商品详情并封装为API的全流程应用
本文探讨了如何利用爬虫技术获取淘宝商品详情并封装为API。首先介绍了爬虫的核心原理与工具,包括Python的Requests、BeautifulSoup和Scrapy等库。接着通过实战案例展示了如何分析淘宝商品页面结构、编写爬虫代码以及突破反爬虫策略。随后讲解了如何使用Flask框架将数据封装为API,并部署到服务器供外部访问。最后强调了在开发过程中需遵守法律与道德规范,确保数据使用的合法性和正当性。
|
11天前
|
人工智能 API 定位技术
MCP 开发实战:手把手教你封装高德地图与 arXiv API
本教程为 MCP(Model Context Protocol)开发实战第二阶段,带你从零封装第三方 API 为 AI 模型可用工具。通过高德地图地理编码与 arXiv 论文检索两个实例,涵盖项目搭建、工具声明、资源定义、错误处理等核心内容,助你快速上手 MCP 开发并集成至 Claude 使用。