Unselfish NPM | npm.io

unselfish

A high-performance js toolkit.Support for use in typescript environment.You can find what you want here ! ! !

Overview

It includes lazy loading of data, encapsulation of HTTP requests, detection of common types, acquisition of file MIME types, calculation of the number of characters based on UTF-8 standard, etc.

How wo consume this library in javascript

Support import and use in Vue, React and other frameworks
To install

npm install unselfish@latest

yarn add unselfish@latest

and in your file:

import Tools from "unselfish";
/** for Example */
const deb = Tools.debounce();
.
.
.

Support for import and use in the script tag of H5 page
To Use

<script type="module">
  /** for Example */
  import Tools from "unselfish.esm.js";
</script>

API

deepClone

This Api is used for deep copying of Javascript basic types and reference types. Parameter types include Number, String, Object, Array, Symbol, Set, Map, RegExp, Function, Date, Error, etc. You can get a clone Api that is faster than cloneDeep in lodash and more powerful than the native structuredClone Api. This Api has the performance of copying tens of thousands of data in milliseconds. as follows:

@param {any} target - Type parameter, you can pass in almost all Javascript type variables.

/** for Example */

deepClone(target);

/** Object deep copy */

const o = {name: {k: [1,2,3,4],l: {k: 9}}};
deepClone(o) // {name: {k: [1,2,3,4],l: {k: 9}}}

/** Array deep copy */

const o = [1, 2, 3, 4, {p: {j: {o: 999}}}];
deepClone(o) // [1, 2, 3, 4, {p: {j: {o: 999}}}]

/** Set deep copy */

const o = new Set([1, 2, 3, 4, {p: {j: {o: 999}}}]);
deepClone(o) // Set(5) {1, 2, 3, 4, {p: {j: {o: 999}}}}

/** Map deep copy */

const o = new Map([[1, 3], [3, { n: 888 }]]),
deepClone(o) // Map(2) ([[1, 3], [3, { n: 888 }]])

/** More complex type copy !!!*/
/** Such complex objects can also be copied deeply, and the speed is extremely fast!!! */
let o = {
        [Symbol("kkk")]: {
            name: 9999
        },
        "sss": function () {
            console.log(121)
        },
        hh: {
            jj: [1, 2, 3, 4, new Date(), new Error("ghhh")]
        },
        set: new Set([1, 2, 3, 4, new Set(["rr", "ooo", { l: 888 }]), new Map([[1, 3], [3, { n: 888 }]])]),
        map: new Map([[1, 3], [3, { n: 888 }], ["ss", new Set([1, 2, 3, 4, new Set(["rr", "ooo", { l: 888 }]), new Map([[1, 3], [3, { n: 888 }]])])]])
    }
deepClone(o) // ...
.
.
.
.
.

debounce

This is different from the traditional debounce. Two schemes are used here. One is that the first trigger will be effective, and the other is that the first trigger will not be effective. as follows:

const debounce = Tools.debounce();

@param {Function} function - Argument to function.
@param {any[]} param - Execute function body.
@param {time} time - delay time.
@param {firstEffect} firstEffect(Optional) - Is it effective for the first time. Default is true.

debounce(func, param, time, firstEffect);

throttle

The throttling function here is different from the general implementation method, Two schemes are used here. One is that the first trigger will be effective, and the other is that the first trigger will not be effective. as follows:

const throttle = Tools.throttle();

@param {Function} function - Argument to function.
@param {any[]} param - Execute function body.
@param {time} time - delay time.
@param {firstEffect} firstEffect(Optional) - Is it effective for the first time. Default is true.

throttle(func, param, time, firstEffect);

byteLength

This API is mainly used to calculate the length of strings based on UTF-8 encoding. You can use this to obtain the length of characters encoded by Concorde Unicode. as follows:

@param {string} _data - The length of the string needs to be calculated.
@return {number} - Returns the calculated length.

const _len = Tools.byteLength(_data);

/** for Example */
Tools.byteLength("china") // 5

Tools.byteLength("中国") // 6
.
.
.

checkType

This API is mainly used to detect the data type of javascript and return the lowercase type name. as follows:

@param {any} target - Data to be detected.
@return {string} - Lowercase name of return type.

const _len = Tools.checkType(_data);

/** for Example */
Tools.checkType("china") // string

Tools.checkType(Symbol("china")) // symbol

Tools.checkType({country: "china"}) // object

Tools.checkType(["china"]) // array

Tools.checkType(undefined) // undefined

Tools.checkType(null) // null

Tools.checkType(NaN) // number
.
.
.

getFileMimeType

Get the format of incoming data resources, such as pictures, audio, video, documents, zip, zip, rar, html, etc. be careful: ==The data source here must be in the ArraryBuffer format==. as follows:

@param {ArrayBuffer} buffer - Get the MIME type of the data resource.
@return {object} - Returns the type of the containing file and the MIME type name.

/** for Example */

const _data = new ArrayBuffer(557);
const _type = Tools.getFileMimeType(_data); // {filetype: 'svg', mimetype: 'image/svg+xml'}

.
.
.

lazyLoading

This API is mainly used to load visible resources and realize on-demand loading. For example: pictures, videos, etc. This function is mainly implemented using the IntersectionObserver Api of H5. Performance and compatibility are relatively objective. as follows:

@param { {lazyAttr: string,loadType: string} } lazyParams - This parameter passes in the attributes of the display and hidden phases of the resource,For example: lazy and src.
@param { {root: Element;rootMargin: string;threshold: number;} } intersectionOptions - Returns the type of the containing file and the MIME type name.

/** for Example */

lazyLoading(lazyParams, intersectionOptions);

/** Attributes of the original display, such as a small blank image, or loading.gif. */
const attr = lazyAttr || "lazy";
/** When reaching a certain threshold, you need to replace the original resources with the incoming resources, such as displaying real pictures or videos. */
const type = loadType || "src";

.
.
.

XHRRequest

The API is implemented based on XMLHttpRequest, providing more flexible and rich functions, making up for the lack of schedule control in fetch, and meeting the needs of traditional http developers. as follows:

@param {XHRParams} parameter - The incoming parameters are some parameters and data content needed to integrate traditional HTTP requests. They are easier to control and use, and are faster and more flexible than axios.

/** for Example */

XHRRequest(parameter);

/** XHRParams Type */

 type XHRParams  = {
        /** The requested base path */
        baseUrl: string,
        /** Requested file path */
        url?: string,
        /** Requested method */
        method: "GET" | "POST" | "PUT" | "DELETE" | "OPTIONS" | "TRACH" | "HEAD" | "CONNECT",
        /** Whether the status code returned by the request is strictly required to be a specific value */
        strict?: boolean,
        /**
         * Parameter transfer object
         *
         * ### `Json 'parameter is' object'`
         *
         * const _data = { name: "china"}
         *
         * ### `FormData when uploading pictures`
         *
         * const _data = new FormData();
         *
         * _data.append("img", file); // `Img 'is the' key 'field agreed with the background
         *
         * ### Use common form to transfer parameters
         *
         * const _data = "name=tong&id=1999";
         *
         */
        data: object | string | FormData,
        /** Timeout milliseconds */
        overtime?: number,
        /** `XMLHttpRequest. header ` Set object */
        headers?: { [key: string]: string }
        /**
         * Interface data response type
         * - Default ` json`
         */
        responseType: XMLHttpRequestResponseType,
        /** Whether the result of the response is serialized */
        serialization?: boolean,
        /** Successful callback  */
        success?(
            /** Response result */
            res: any,
            /** Response to original data result */
            response: XMLHttpRequest
        ): void,
        /** Failed callback */
        fail?(value: XMLHttpRequest): void,
        /** Timeout callback */
        timeout?(value: XMLHttpRequest): void,
        /** Request progress callback */
        progress?(event: ProgressEvent<XMLHttpRequestEventTarget>): void
    };
.
.
.