Front-end advanced teaching you to use javascript storage function

Preface

Any SaaS company needs to have its own low-code platform. In the process of visual low-code front-end development, many interesting technical requirements are found. In the process of solving these requirements, it often brings a lot of gains to oneself. Today, let's share the front-end technical problems encountered in the process of developing Dooring - javascript function storage.

Background

We all know that to build a front-end page, we need the following three elements:

• Elements (UI)
• Data
• Event/Interaction

In the era of data-driven views, the relationship between these three elements is often as shown below:

The design ideas of the visual construction platform are often based on the above process. We need to provide an editor environment for users to create views and interact. The final product saved by the user may be like this:

{
    "name": "Dooring Form",
    "bgColor": "#666",
    "share_url": "http://xxx.cn",
    "mount_event": [
        {
            "id": "123",
            "func": () => {
                // Initialization logic GamepadHapticActuator();
            },
            "sourcedata": []
        }
    ],
    "body": [
        {
            "name": "header",
            "event": [
                {
                    "id": "123",
                    "type": "click",
                    "func": () => {
                        // Component custom interaction logic showModal();
                    }
                }
            ]
        }
    ]
}

So the question is, we can save json strings (through JSON.stringify serialization), but how to save the function together? After saving the function, how can we make js run this function normally when the page is rendered?

Implementation plan thinking

We all know that converting js objects to json can be achieved using JSON.stringify, but it also has limitations, such as:

1. If the value has a toJSON() method, then toJson() defines what value will be serialized.
2. The properties of non-array objects are not guaranteed to appear in a specific order in the serialized string.
3. The wrapped objects of Boolean values, numbers, and strings are automatically converted into their corresponding original values ​​during serialization.
4. undefined, arbitrary function, and symbol values ​​are either ignored during serialization (when appearing in a property value of a non-array object) or converted to null (when appearing in an array). When functions and undefined are converted separately, undefined will be returned, such as JSON.stringify(function(){}) or JSON.stringify(undefined)
5. All properties with symbol as their key will be completely ignored, even if they are mandatory in the replacer parameter.
6. Date calls toJSON() to convert it to a string (same as Date.toISOString()), so it will be treated as a string.
7. NaN and Infinity format values ​​and null are treated as null.
8. Other types of objects, including Map/Set/WeakMap/WeakSet, only serialize enumerable properties

We can see in item 4 that if there is a function in the object we serialize, it will be ignored! So it is common sense that we cannot save the function using JSON.stringify, so is there any other way?

You may think of converting the function into a string first, then serializing it with JSON.stringify and saving it to the backend, and finally converting the string into a function with eval or Function when the component is used. The general process is as follows:

Yes, the ideal is beautiful, but the reality is _______.

Next, let's analyze how the key links func2string and string2func are implemented.

js storage function solution design

Friends who are familiar with JSON API may know that JSON.stringify supports 3 parameters, and the second parameter replacer can be a function or an array. As a function, it has two parameters, key and value, both of which are serialized. The function needs to return the value in a JSON string, as shown below:

• If a Number is returned, it is converted into a corresponding string and added to the JSON string as the attribute value.
• If a String is returned, the string is added to the JSON string as the property value
• If a Boolean is returned, "true" or "false" is added to the JSON string as the property value.
• If any other object is returned, that object is recursively serialized into a JSON string, calling the replacer method for each property. Unless the object is a function, in which case it will not be serialized into JSON strings.
• If undefined is returned, the property value will not be output in the JSON string.

So we can convert the data whose value type is a function in the second function parameter. as follows:

const stringify = (obj) => {
    return JSON.stringify(obj, (k, v) => {
      if(typeof v === 'function') {
          return `${v}`
      }
      return v
    })
}

In this way, we seem to be able to save the function to the backend. Next, let's see how to deserialize the json with the function string.

Because we converted the function into a string, we need to know which strings need to be converted into functions when we deparse them. If we don't do anything with the function, we may need to manually identify it.

The disadvantage of human flesh recognition is that we need to use regular expressions to extract strings with function characteristics, but there are many ways to write functions, and we need to consider many situations. There is no guarantee that a string with function characteristics is definitely a function.

So I changed to a simpler way to extract the function without writing complex regular expressions. The method is to inject identifiers when the function is serialized, so that we can know which strings need to be parsed as functions, as follows:

stringify: function(obj: any, space: number | string, error: (err: Error | unknown) => {}) {
        try {
            return JSON.stringify(obj, (k, v) => {
                if(typeof v === 'function') {
                    return `${this.FUNC_PREFIX}${v}`
                }
                return v
            }, space)
        } catch(err) {
            error && error(err)
        }
}

this.FUNC_PREFIX is the identifier we defined, so that we can quickly parse the function when using JSON.parse. JSON.parse also supports a second parameter, which is similar to the second parameter of JSON.stringify. We can convert it as follows:

parse: function(jsonStr: string, error: (err: Error | unknown) => {}) {
        try {
            return JSON.parse(jsonStr, (key, value) => {
                if(value && typeof value === 'string') {
                    return value.indexOf(this.FUNC_PREFIX) > -1 ? new Function(`return ${value.replace(this.FUNC_PREFIX, '')}`)() : value
                }
                return value
            })
        } catch(err) {
            error && error(err)
        }
    }

New Function can convert a string into a js function. It only accepts string parameters. Its optional parameters are the input parameters of the method, and the required parameters are the method body content. A vivid example:

The content of the function body in the above code is:

new Function(`return ${value.replace(this.FUNC_PREFIX, '')}`)()

The reason for return is to restore the original function intact. You can also use eval, but for public opinion, it is better to use it with caution.

The above solution can already realize the function of front-end storage function, but in order to be more engineering and robust, a lot of additional processing and optimization are needed, so that more people can use your library out of the box.

at last

In order to allow more people to use this function directly, I encapsulated the complete json serialization solution into a class library.

Support functions are as follows:

• stringify supports serialization functions and error callbacks based on native JSON.stringify
• parse supports deserialization functions and error callbacks based on native JSON.parse
• funcParse serializes the functions in the js object with one click and keeps the js object type unchanged

The installation method is as follows:

# or npm install xijs
yarn add xijs

use:

import { parser } from 'xijs';

const a = {
    x: 12,
    b: function() {
      alert(1)
    }
 }
 
 const json = parser.stringify(a);
 const obj = parser.parse(json);
 //Call method obj.b();

Summarize

This is the end of this article about using javascript to store functions. For more relevant content about using javascript to store functions, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!