npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

unselfish

v1.0.123

Published

A high-performance js toolkit

Downloads

21

Readme

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

or

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
    };
.
.
.