The answer is yes.

JSON, which stands for JavaScript Object Notation, was originally designed as a subset of JavaScript and became a common open standard data format because it was language-neutral. Although JSON is derived from JavaScript, there are libraries for JSON parsing in many programming languages, such as C, Java, Python, and so on.

Although javascript’s JSON API has two built-in methods for fast data format conversion:

  • Json.parse () converts a JSON string to a JavaScript object
  • Json.stringify () is used to convert JavaScript values to JSON strings

However, there are some limitations, such as:

  1. JSON.Stringifynonserializationfunction.Regular expression 等
  2. JSON.parseCould not deserialize withfunction.Regular expressionAnd other formats of data
  3. JSON.Stringify 和JSON.parsePerformance issues
  4. JSON.Stringify 和JSON.parseParsing errors result in puA for the entire system

We have to solve these problems from the perspective of secondary packaging.

The third problem is that the community already has a solid solution to the performance problems of JSON methods, and the core idea is structured JSON definitions. For example, the MOST commonly discussed JSON Schema, Simdjson is a good solution.

Json. Stringify and json. parse have a try catch package. The disadvantage is that each call requires a try catch package, which does not fit the simplification style of front-end er.

So with all this analysis, it’s very necessary to re-wrap the JSON API for complex business scenarios!

In the previous article, I introduced the solutions to problems 1 and 2. If you are interested, please refer to:

  • Front-end Advancements: How do I store functions in javascript?

Json parser based on the native JSON API for the upper layer encapsulation, support serialization functions, re types

  • Native JSON API calls are supportednativeStringify.nativeParse
  • Serialization and deserialization functions are supportedstringify.fastStringify.parse
  • Support for serialization and deserialization of restringify.fastStringify.parse
  • Built-in tool methods out of the box
    • Determining function typesisFunc
    • Determining the object typeisObj
    • Determining the array typeisArr
    • Determine the object or array typeisArrOrObj
    • Determine the re typeisRegExp

At the same time, the solution also solves the problems mentioned in 4 and supports the callback after operation. The method is as follows:

  1. Install xijs
yarn add xijs
Copy the code
  1. use
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};// Serialize the object
parser.stringify(door);

// The result is as follows:
/ / {
//	"a": 1,
//	"b": "__xfunc__function b() {}",
//	"c": {
// "c1": "h5-dooring",
// "c2": "__xfunc__function c2() {}"
//	}
// }

// Reverse parse json data into objects
parser.parse(parser.stringify(door));

// The result is as follows:
/ / {
//	a: 1,
//	b: function b() {},
//	c: {
// c1: "h5-dooring",
// c2: function c2() {}
//	}
// }
Copy the code

Meanwhile, XiJS continues to add more useful utility functions to make business development more efficient. The following tool functions have been integrated:

  • storeBased on thelocalStorageUpper-layer cache library that supports expiration time Settings and supports operation callbacks
  • Uuid Generates a unique ID. The length can be set
  • RandomStr generates a specified number of random strings
  • FormatDate Out of the box time formatting tool
  • Debounce anti-shock function
  • Throttling function
  • Url2obj converts the URL string into an object
  • Obj2url converts the object to an encoded URL string
  • IsPC checks whether the device type isPC

Github address: github.com/MrXujiang/x…

More recommended

  • React loading animation library developed from scratch
  • Develop a lightweight sliding verification code plug-in from scratch
  • How to design a visual platform component store?
  • Build engine from zero design visualization large screen
  • Build desktop visual editor Dooring from zero using Electron
  • (low code) Visual construction platform data source design analysis
  • Build a PC page editor pc-dooring from scratch
  • How to build building blocks to quickly develop H5 pages?