前端Pua: JSON API還有二次封裝的必要嗎?
JSON 是 JavaScript Object Notation 的縮寫，最初是被設(shè)計(jì)為 JavaScript 的一個(gè)子集，因其和編程語(yǔ)言無(wú)關(guān)，所以成為了一種開放標(biāo)準(zhǔn)的常見數(shù)據(jù)格式。雖然 JSON 是源自于JavaScript，但到目前很多編程語(yǔ)言都有了 JSON 解析的庫(kù)，如 C、Java、Python 等。
雖然 「javascript」 的 JSON API 內(nèi)置了兩種方法方便我們快捷的處理數(shù)據(jù)格式轉(zhuǎn)換:
- 「JSON.parse()」 用于將一個(gè) JSON 字符串轉(zhuǎn)換為 JavaScript 對(duì)象
- 「JSON.Stringify()」 用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串
但也存在不少限制, 比如:
- JSON.Stringify 無(wú)法序列化 「函數(shù)」, 「正則表達(dá)式」 等
- JSON.parse 無(wú)法反序列化具有 「函數(shù)」, 「正則表達(dá)式」 等格式的數(shù)據(jù)
- JSON.Stringify 和JSON.parse 性能問題
- JSON.Stringify 和JSON.parse 解析出錯(cuò)導(dǎo)致整個(gè)系統(tǒng) pua
這些問題我們不得不從 「二次封裝」 的角度去解決.
第3個(gè)問題社區(qū)已經(jīng)有比較可靠的解決方案可以來解決 JSON 方法的性能問題, 其核心思想就是 「結(jié)構(gòu)化json定義」. 比如我們最常討論的 JSON Schema, simdjson 就是一個(gè)不錯(cuò)的方案.
第四個(gè)問題也有解決方案, 就是在使用 JSON.Stringify 和JSON.parse 的地方包一層 try catch, 缺點(diǎn)就是每次調(diào)用都需要包 try catch, 不太符合前端 er 們的簡(jiǎn)約風(fēng).
所以分析了這么多, 針對(duì)復(fù)雜業(yè)務(wù)場(chǎng)景, 我們非常有必要二次封裝 「JSON API」 !
在上篇文章中我介紹了解決 1 和 2 問題的方案, 感興趣的可以參考:
前端進(jìn)階: 如何用javascript存儲(chǔ)函數(shù)?
該 json 解析器基于原生JSON API進(jìn)行的上層封裝, 支持序列化函數(shù), 正則類型
- 支持原生 json api 調(diào)用方式nativeStringify, nativeParse
- 支持序列化和反序列化函數(shù) stringify, fastStringify, parse
- 支持序列化和反序列化正則 stringify, fastStringify, parse
- 內(nèi)置開箱即用的工具方法
- 判斷函數(shù)類型 isFunc
- 判斷對(duì)象類型 isObj
- 判斷數(shù)組類型 isArr
- 判斷對(duì)象或數(shù)組類型 isArrOrObj
- 判斷正則類型 isRegExp
同時(shí)方案中也解決了 4 中提到的問題, 并且支持操作后的回調(diào), 使用方法如下:
安裝 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,
- };
- // 將對(duì)象序列化
- parser.stringify(door);
- // 結(jié)果如下:
- // {
- // "a": 1,
- // "b": "__xfunc__function b() {}",
- // "c": {
- // "c1": "h5-dooring",
- // "c2": "__xfunc__function c2() {}"
- // }
- // }
- // 將json數(shù)據(jù)反解析成對(duì)象
- parser.parse(parser.stringify(door));
- // 結(jié)果如下:
- // {
- // a: 1,
- // b: function b() {},
- // c: {
- // c1: "h5-dooring",
- // c2: function c2() {}
- // }
- // }
同時(shí) xijs 還在持續(xù)擴(kuò)充更有用的工具函數(shù), 讓業(yè)務(wù)開發(fā)更高效. 目前已集成了如下工具函數(shù):
- 「store」 基于 localStorage 上層封裝的支持過期時(shí)間設(shè)置的緩存庫(kù), 支持操作回調(diào)
- 「uuid」 生成唯一id, 支持設(shè)置長(zhǎng)度
- 「randomStr」 生成指定個(gè)數(shù)的隨機(jī)字符串
- 「formatDate」 開箱即用的時(shí)間格式化工具
- 「debounce」 防抖函數(shù)
- 「throttle」 節(jié)流函數(shù)
- 「url2obj」 將url字符串轉(zhuǎn)換為對(duì)象
- 「obj2url」 將對(duì)象轉(zhuǎn)換成編碼后的url字符串
- 「isPC」 判斷設(shè)備是否為PC類型
github地址: https://github.com/MrXujiang/xijs
