前端Pua: JSON API還有二次封裝的必要嗎?
作者： 徐小夕
JSON 是 JavaScript Object Notation 的縮寫，最初是被設計為 JavaScript 的一個子集，因其和編程語言無關，所以成為了一種開放標準的常見數據格式。
JSON 是 JavaScript Object Notation 的縮寫，最初是被設計為 JavaScript 的一個子集，因其和編程語言無關，所以成為了一種開放標準的常見數據格式。雖然 JSON 是源自于JavaScript，但到目前很多編程語言都有了 JSON 解析的庫，如 C、Java、Python 等。
雖然 「javascript」 的 JSON API 內置了兩種方法方便我們快捷的處理數據格式轉換:
- 「JSON.parse()」 用于將一個 JSON 字符串轉換為 JavaScript 對象
- 「JSON.Stringify()」 用于將 JavaScript 值轉換為 JSON 字符串
但也存在不少限制, 比如:
- JSON.Stringify 無法序列化 「函數」, 「正則表達式」 等
- JSON.parse 無法反序列化具有 「函數」, 「正則表達式」 等格式的數據
- JSON.Stringify 和JSON.parse 性能問題
- JSON.Stringify 和JSON.parse 解析出錯導致整個系統 pua
這些問題我們不得不從 「二次封裝」 的角度去解決.
第3個問題社區已經有比較可靠的解決方案可以來解決 JSON 方法的性能問題, 其核心思想就是 「結構化json定義」. 比如我們最常討論的 JSON Schema, simdjson 就是一個不錯的方案.
第四個問題也有解決方案, 就是在使用 JSON.Stringify 和JSON.parse 的地方包一層 try catch, 缺點就是每次調用都需要包 try catch, 不太符合前端 er 們的簡約風.
所以分析了這么多, 針對復雜業務場景, 我們非常有必要二次封裝 「JSON API」 !
在上篇文章中我介紹了解決 1 和 2 問題的方案, 感興趣的可以參考:
前端進階: 如何用javascript存儲函數?
該 json 解析器基于原生JSON API進行的上層封裝, 支持序列化函數, 正則類型
- 支持原生 json api 調用方式nativeStringify, nativeParse
- 支持序列化和反序列化函數 stringify, fastStringify, parse
- 支持序列化和反序列化正則 stringify, fastStringify, parse
- 內置開箱即用的工具方法
- 判斷函數類型 isFunc
- 判斷對象類型 isObj
- 判斷數組類型 isArr
- 判斷對象或數組類型 isArrOrObj
- 判斷正則類型 isRegExp
同時方案中也解決了 4 中提到的問題, 并且支持操作后的回調, 使用方法如下:
安裝 xijs
- yarn add xijs
使用
- 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類型
github地址: https://github.com/MrXujiang/xijs
責任編輯：武曉燕
來源：
趣談前端
