Several common js libraries, don't repeat the wheel

At the end of the year, summarize some interesting “JS wheel” used this year (just list some interesting libraries, each title is a hyperlink, can click on their own to check) I hope to be useful to you!

Interesting wheels can be listed in the comments for discussion

color

== Function == : JavaScript library for immutable color conversion and support for CSS color strings.

npm install color
Copy the code

Var color = color (' # 7743 ce), alpha (0.5). Lighten (0.5); console.log(color.hsl().string()); / / 'hsla (262, 59%, 81% and 0.5)'. The console log (color. The cmyk (). The round () array ()); // [16, 25, 0, 8, 0.5] console.log(color.ansi256().object()); // {ansi256:183, alpha: 0.5}Copy the code

uuidjs

== Function == : uuID. js-JavaScript RFC-compatible UUID generator

// Create a version 4 (random number-based) UUID object
var objV4 = UUID.genV4();

// Create a version 1 (time-based) UUID object
var objV1 = UUID.genV1();

// Create a UUID object from a hexadecimal string
var uuid = UUID.parse("a0e0f130-8c21-11df-92d9-95795a3bcd40");

// Get string representations of a UUID object
console.log(uuid.toString());   // "a0e0f130-8c21-11df-92d9-95795a3bcd40"
console.log(uuid.hexString);    // "a0e0f130-8c21-11df-92d9-95795a3bcd40"
console.log(uuid.hexNoDelim);   // "a0e0f1308c2111df92d995795a3bcd40"
console.log(uuid.bitString);    // "101000001110000 ... 1100110101000000"
console.log(uuid.urn);          // "urn:uuid:a0e0f130-8c21-11df-92d9-95795a3bcd40"

// Compare UUID objects
console.log(objV4.equals(objV1));   // false

// Get UUID version numbers
console.log(objV4.version); // 4
console.log(objV1.version); // 1

// Get internal field values in 3 different forms via 2 different accessors
console.log(uuid.intFields.timeLow);                // 2699096368
console.log(uuid.bitFields.timeMid);                // "1000110000100001"
console.log(uuid.hexFields.timeHiAndVersion);       // "11df"
console.log(uuid.intFields.clockSeqHiAndReserved);  // 146
console.log(uuid.bitFields.clockSeqLow);            // "11011001"
console.log(uuid.hexFields.node);                   // "95795a3bcd40"

console.log(uuid.intFields[0]);                     // 2699096368
console.log(uuid.bitFields[1]);                     // "1000110000100001"
console.log(uuid.hexFields[2]);                     // "11df"
console.log(uuid.intFields[3]);                     // 146
console.log(uuid.bitFields[4]);                     // "11011001"
console.log(uuid.hexFields[5]);  
Copy the code

rc-upload

== Function == : File upload, download, and drag files and folders

var Upload = require('rc-upload');
var React = require('react');
React.render(<Upload />, container);
Copy the code

react-copy-to-clipboardAnd the clipboard

Function == : React Copy and paste

npm install --save react react-copy-to-clipboard import React from 'react'; import ReactDOM from 'react-dom'; import {CopyToClipboard} from 'react-copy-to-clipboard'; class App extends React.Component { state = { value: '', copied: false, }; render() { return ( <div> <input value={this.state.value} onChange={({target: {value}}) => this.setState({value, copied: false})} /> <CopyToClipboard text={this.state.value} onCopy={() => this.setState({copied: true})}> <span>Copy to clipboard with span</span> </CopyToClipboard> <CopyToClipboard text={this.state.value} onCopy={()  => this.setState({copied: true})}> <button>Copy to clipboard with button</button> </CopyToClipboard> {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null} </div> ); } } const appRoot = document.createElement('div'); document.body.appendChild(appRoot); ReactDOM.render(<App />, appRoot);Copy the code

numeral

== Functionality == : A javascript library for formatting and manipulating numbers.

var value = myNumeral.value(); Var myNumeral2 = numeral(' 1000 '); var value2 = myNumeral2.value(); / / 1000Copy the code

omit.js

== function == : Return the specified properties of objects in the target object; Utility function to create shallow copies of objects with some fields removed.

npm i --save omit.js

omit(obj: Object, fields: string[]): Object

var omit = require('omit.js');
omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18 
Copy the code

Moment.js

== Functionality == : A JavaScript date library for parsing, validating, manipulating, and formatting dates.

moment().format('MMMM Do YYYY, h:mm:ss a'); // December 22nd 2020, 10:55:15 am
moment().format('dddd');                    // Tuesday
moment().format("MMM Do YY");               // Dec 22nd 20
moment().format('YYYY [escaped] YYYY');     // 2020 escaped 2020
moment().format();      
Copy the code

Day.js

== Function == : Day.js is a lightweight JavaScript library that handles times and dates, keeping exactly the same API design as moment.js. If you’ve ever used moment.js, do you already know how to use day.js

Dayjs (). The format (' {YYYY} MM - DDTHH: MM: ss SSS [Z] A ') / / show dayjs (). The set (" month ", 3). The month () / / get dayjs (). The add (1, 'year') // process dayjs().isbefore (dayjs()) // queryCopy the code

milliseconds

==~~~~ function == : Converts the time to milliseconds.

var ms = require('milliseconds'); ms.seconds(2); // 2000 ms.minutes(2); // 120000 ms.hours(2); // 7200000 ms.days(2); // 172800000 ms.weeks(2); // 1209600000 ms.months(2); // 5259600000 ms.years(2); / / 63115200000Copy the code

filesize

The == function == : filesize.js provides an easy way to get human-readable file-size strings from numbers (floating point or integer) or strings.

npm i filesize filesize(500); // "500 B" filesize(500, {bits: true}); // "4 Kb" filesize(265318, {base: 10}); / / "265.32 kB" filesize (265318); // "259.1kb" filesize(265318, {round: 0}); // "259 KB" filesize(265318, {output: "array"}); / / / 259.1, "KB" filesize (265318, {output: "object"}); / / {value: 259.1, symbol: "KB", exponent: 1} filesize (1, {symbols: {B: "Б"}}); / / "1 Б" filesize (1024); // "1 KB" filesize(1024, {exponent: 0}); // "1024 B" filesize(1024, {output: "exponent"}); // 1 filesize(265318, {standard: "iec"}); Filesize (265318, {standard: "iec", fullform: true}); / / "259.1 kibibytes filesize (12, {fullform: true, fullforms: [" б а й т о kind guide"]}); / / "12 б а й т о kind guide" filesize (265318, {separator: ", "}); Filesize (265318, {locale: "de"}); 259, 1 KB "/ /"Copy the code

react-markdown

== Function == : Uses the remarks of the React Markdown component.

import { Row, Col, Menu, Affix, Anchor } from 'antd'; import ReactMarkdown from 'react-markdown/with-html'; import { isEmpty } from "lodash"; import HeadBlock from './HeadBlock'; import 'github-markdown-css/github-markdown.css' import './index.less'; const { Link } = Anchor; const articles = { '1': '/developer_guide.md', '2': '/user_manual.md'} /** ** @param lists */ export const navsToTree = (lists: any[]) => { if (isEmpty(lists)) return []; // List [0]. Level const maxLevel = lists[0]. Level; const newLists: any[] = []; lists.forEach((item: Any) => {// level at the same level if (item.level <= maxLevel) {newLists. Push (item)} else {// Non-level if (newLists[newLists. Length - 1].children) { newLists[newLists.length - 1].children.push(item) } else { newLists[newLists.length - 1].children = [item] } } }) return newLists; } const NormalTest: React.FC<any> = () => { const [currentArticle, setCurrentArticle] = useState<{ url: string, content: any }>({ url: '', content: '' }); Const [treeNavs, setTreeNavs] = useState<any[]>([]) changeCurrentArticle(articles['1']) }, UseEffect (() => {/** ** get all article titles */ // console.log(currentArticle); const markdownNavs = document.querySelectorAll('.article-nav') const navs: any[] = []; markdownNavs.forEach((item: any) => { const level = item.getAttribute('data-level'); const value = item.textContent; const nodeKey = item.id; navs.push({ level, value, nodeKey }) }) transArticleNavs(navs) }, [currentarticle.content]) // Change current document const changeCurrentArticle = async (URL: string) => {const res = await (url); const content = await res.text(); setCurrentArticle({ ... CurrentArticle, Content, url})} const menuOnClick = (e: Any) => {const url = articles[e.key] changeCurrentArticle(url)} // Any) => {// Convert to secondary navigation const treedevelopDocs = navsToTree(navs); setTreeNavs(treedevelopDocs) } return ( <> <Row className='articles'> <Col flex='200px' className="articles-list"> <Affix offsetTop={24}> <Menu defaultSelectedKeys={['1']} onClick={menuOnClick} theme='light'> <Menu.Item Development document key = "1" > < / Menu Item > <. Menu Item key = "2" > using document < / Menu Item > < Menu > / < / Affix > < / Col > < Col flex = '1' className='articles-content'> <div className='articles-content_wrpper'> <ReactMarkdown className="markdown-body" source={currentArticle.content} escapeHtml={false} renderers={{ heading: HeadBlock }} /> </div> </Col> <Col flex='200px' className="articles-menu"> <Affix offsetTop={20} > <Anchor style={{ width: 160 }}> { treeNavs.map((item: any) => { if (item.children) { return ( <Link href={`#${item.nodeKey}`} title={item.value} key={item.nodeKey}> { item.children.map((childItem: any) => ( <Link href={`#${childItem.nodeKey}`} title={childItem.value} key={childItem.nodeKey} /> )) } </Link> ) } else { return ( <Link href={`#${item.nodeKey}`} title={item.value} key={item.nodeKey} /> ) } }) } </Anchor> </Affix> </Col> </Row> </> ); }; export default NormalTest;Copy the code

import React from 'react';

const HeadBlock = (props) => {

  const { level, children } = props;
  const { nodeKey } = children[0].props;

  return (
    <>
      {React.createElement(`h${level}`, { className: 'article-nav', id: nodeKey, 'data-level': level }, children)}
    </>
  );
}

export default HeadBlock;

Copy the code

cytoscape | cytoscape-dagre

Cytoscape. Js is a fully functional library for graph theory. Do you need to model and/or visualize relational data, such as biological data or social networks? If so, cytoscape.js is what you need. Cytoscape. Js contains a theoretical model of graphics and an optional renderer for displaying interactive graphics. The library is designed to make it as easy as possible for programmers and scientists to use graph theory in their applications, whether for server-side analysis in Node.js applications or for rich user interfaces.

Lodash

== Function == : Function utility class library

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');

// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');

// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

Copy the code

patch-package node

== Function == : NPM yran patch used to change node_modules

cross-env node

== Function == : cross-env this is a script that runs cross-platform Settings and uses environment variables.

npm install --save-dev cross-env
{
  "scripts": {
    "parentScript": "cross-env GREET=\"Joe\" npm run childScript",
    "childScript": "cross-env-shell \"echo Hello $GREET\""
  }
}
Copy the code

bignumber.js

== Functionality == : A JavaScript library for arbitrary precision decimal and non-decimal arithmetic

https://mikemcl.github.io/bignumber.js/
https://juejin.cn/post/6844903704714280968#heading-7
Copy the code

QRCode.js,qrcode.vue

Function == :

npm install --save qrcode.vue npm i qrcodejs2 getBlob(base64) { const mimeString = base64.split(',')[0].split(':')[1].split('; ') [0]; // Mime type const byteString = atob(base64.split(',')[1]); // base64 decodes const arrayBuffer = new arrayBuffer (byteString.length); Const intArray = new Uint8Array(arrayBuffer); // create a view for (let I = 0; i < byteString.length; i += 1) { intArray[i] = byteString.charCodeAt(i); } return new Blob([intArray], { type: mimeString, }); }, savePicture(Url = this.qrcodeUrl) { const blob = new Blob([''], { type: 'application/octet-stream' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = Url; // eslint-disable-next-line prefer-destructuring a.download = Url.replace(/(.*\/)*([^.]+.*)/gi, '$2').split('? ') [0]; const e = document.createEvent('MouseEvents'); e.initMouseEvent( 'click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null, ); a.dispatchEvent(e); URL.revokeObjectURL(url); }, _qrcode(url) { const div = document.createElement('div'); // eslint-disable-next-line new-cap const code = new QRCode(div, { text: url, width: 500, height: 500, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.L, }); // Add the div node to the DOM tree if it needs to be displayed on the page; node.appendChild(div) const canvas = code._el.querySelector('canvas'); // Get canvas from the generated QR code and convert canvas to base64 const base64Text = canvas.todataURL ('image/ PNG '); const blob = this.getBlob(base64Text); / / base64 conversion into a blob object window. Return URL. CreateObjectURL (blob); },Copy the code

cssnano,js-beautify

== Function == : CSS JS compression tool

cors node

== Function == : CORS is a Node.js package that provides Connect/Express middleware that can be used to enable CORS with various options.

npm install cors

var cors = require('cors');
app.use(
  cors({
    origin: ['http://localhost:8000'],
    methods: ['GET', 'POST'],
    alloweHeaders: ['Conten-Type', 'Authorization'],
  })
);

Copy the code

countup.js

== Function == : Digital scroll plug-in in detail

npm i countup.js interface CountUpOptions { startVal? : number; // number to start at (0) decimalPlaces? : number; // number of decimal places (0) duration? : number; // animation duration in seconds (2) useGrouping? : boolean; // Example: 1000 vs 1000 (true) useEasing? : boolean; // ease animation (true) smartEasingThreshold? : number; // smooth easing for large numbers above this if useEasing (999) smartEasingAmount? : number; // amount to be eased for numbers above threshold (333) separator? : string; // grouping separator (',') decimal? : string; // decimal ('.') // easingFn: easing function for animation (easeOutExpo) easingFn? : (t: number, b: number, c: number, d: number) => number; formattingFn? : (n: number) => string; // this function formats result prefix? : string; // text prepended to result suffix? : string; // text appended to result numerals? : string[]; // numeral glyph substitution }Copy the code

js-base64

== Function == : Another Base64 transcoder.

npm install --save js-base64 require=require('esm')(module); import {Base64} from 'js-base64'; let latin = 'dankogai'; Let the utf8 = 'small feeding 弾 let u8s = new Uint8Array (,97,110,107,111,103,97,105 [100]). Base64.encode(latin); // ZGFua29nYWk= Base64.btoa(latin); // ZGFua29nYWk= Base64.btoa(utf8); // raises exception Base64.fromUint8Array(u8s); // ZGFua29nYWk= Base64.fromUint8Array(u8s, true); // ZGFua29nYW which is URI safe Base64.encode(utf8); // 5bCP6aO85by+ Base64.encode(utf8, true) // 5bCP6aO85by- Base64.encodeURI(utf8); // 5bCP6aO85by-Copy the code

json-bigint

== function == : Native Bigint was recently added to JS, so we added an option to exploit it instead of bignumber.js. However, parsing with native BigInt is still a backward compatible option.

var JSONbig = require('json-bigint');

var json = '{ "value" : 9223372036854775807, "v2": 123 }';
console.log('Input:', json);
console.log('');

console.log('node.js built-in JSON:');
var r = JSON.parse(json);
console.log('JSON.parse(input).value : ', r.value.toString());
console.log('JSON.stringify(JSON.parse(input)):', JSON.stringify(r));

console.log('\n\nbig number JSON:');
var r1 = JSONbig.parse(json);
console.log('JSONbig.parse(input).value : ', r1.value.toString());
console.log('JSONbig.stringify(JSONbig.parse(input)):', JSONbig.stringify(r1));
Copy the code

vuejs-datetimepicker

Function == :

npm install vuejs-datetimepicker

<template>
    <datetime format="MM/DD/YYYY" width="300px" v-model="val"></datetime>
</template>

<script>
import datetime from 'vuejs-datetimepicker';

export default {
    components: { datetime }
};
</script> 
Copy the code

vue-meta-info

== Function == : Single-page Meta Info management based on Vue 2.0

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>
Copy the code

vue-smooth-scroll

Function == : Scroll

npm install --save vue-smooth-scroll

import vueSmoothScroll from 'vue-smooth-scroll'
Vue.use(vueSmoothScroll)
Copy the code

prismjs

Prism is a lightweight, robust, elegant syntax highlighting library. This is a spin-off from Dabblet.

vuex-persistedstate

Function == :

npm install --save vuex-persistedstate import createPersistedState from 'vuex-persistedstate'; import * as Cookies from 'js-cookie'; import cookie from 'cookie'; export default ({ store, req }) => { createPersistedState({ paths: [...] , storage: { getItem: (key) => { // See https://nuxtjs.org/guide/plugins/#using-process-flags if (process.server) { const parsedCookies = cookie.parse(req.headers.cookie); return parsedCookies[key]; } else { return Cookies.get(key); } }, // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON. setItem: (key, value) => Cookies.set(key, value, { expires: 365, secure: false }), removeItem: key => Cookies.remove(key) } })(store); };Copy the code

vue-slider-component

== Function == : A highly customized slider component

$ yarn add vue-slider-component
# npm install vue-slider-component --save

<template>
  <vue-slider v-model="value" />
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  components: {
    VueSlider
  },
  data () {
    return {
      value: 0
    }
  }
}
</script>
Copy the code

CodeMirror

== Functionality == : CodeMirror is a versatile text editor implemented for browsers using JavaScript. It is dedicated to editing code and has more than 100 language modes and various plug-ins for more advanced editing capabilities. Each language comes with fully functional code and syntax highlighting to help read and edit complex code.

vue-codemirror

Function == :

<codemirror ref="editQuerySQL" @ready="onCodemirrorReady" @input="onCodemirrorInput" v-model="query.sql" :options="cmOptions" ></codemirror> import { codemirror } from 'vue-codemirror'; import { getEthdb } from '@/api'; import 'codemirror/lib/codemirror.css'; import 'codemirror/theme/idea.css'; // import 'codemirror/theme/base16-dark.css'; import 'codemirror/theme/panda-syntax.css'; import 'codemirror/addon/hint/show-hint.css'; import 'codemirror/lib/codemirror'; import 'codemirror/mode/sql/sql'; import 'codemirror/addon/hint/show-hint'; import 'codemirror/addon/hint/sql-hint'; export default { data(){ retrun { query: { sql: 'SELECT * FROM ethblock LIMIT 200', }, cmOptions: { scroll: false, tabSize: 4, lineNumbers: false, line: false, indentWithTabs: true, smartIndent: true, autofocus: false, mode: 'text/x-mariadb', theme: 'idea', hintOptions: { completeSingle: false, }, }, } }, methods:{ onCodemirrorReady(cm) { cm.on('keypress', () => { cm.showHint(); }); }, onCodemirrorInput(newQuery) { this.query.sql = newQuery; }}},Copy the code

portfinder || get-port node

== Function == : Port viewer

[sudo] npm install portfinder

portfinder.getPort({
    port: 3000,    // minimum port
    stopPort: 3333 // maximum port
}, callback);
Copy the code

regedit node

== Function == : Use Node.js and Windows script hosts to read, write, list, and handle all sorts of snappy things in the Windows registry.

lowdb

== Function == : Applies to small JSON databases for Node, Electron and browsers. Powered by Lodash. ⚡ ️

npm install lowdb
const low = require('lowdb')
const FileSync = require('lowdb/adapters/FileSync')

const adapter = new FileSync('db.json')
const db = low(adapter)

// Set some defaults
db.defaults({ posts: [], user: {} })
  .write()

// Add a post
db.get('posts')
  .push({ id: 1, title: 'lowdb is awesome'})
  .write()

// Set a user using Lodash shorthand syntax
db.set('user.name', 'typicode')
  .write()
Copy the code

cheerio node

== Function == : A fast, flexible and implementable jQuery core implementation specially customized for the server. The crawler

npm install cheerio const cheerio = require('cheerio'); const $ = cheerio.load('<h2 class="title">Hello world</h2>'); $('h2.title').text('Hello there! '); $('h2').addClass('welcome'); $.html(); //=> <html><head></head><body><h2 class="title welcome">Hello there! </h2></body></html>Copy the code

libxmljs

== Function == : Parses XML

node-fetch,got node

== Function == : Node-Ajax

ora node

== Function == : Elegant terminal spinner

const ora = require('ora');

const spinner = ora('Loading unicorns').start();

setTimeout(() => {
    spinner.color = 'yellow';
    spinner.text = 'Loading rainbows';
}, 1000);
Copy the code

node-mkdirp 、rimraf node

== Function == : Like mkdir -p UNIX command rm -rf. nodejs to create a file

var mkdirp = require('mkdirp');

mkdirp('/tmp/foo/bar/baz', function (err) {
    if (err) console.error(err)
    else console.log('pow!')
});

Copy the code

shelljs

== Function == : hellJS is a portable (Windows/Linux/OS X) implementation of Unix shell commands on top of the Node.js API. You can use it to eliminate the Unix dependency of shell scripts while still retaining its familiar and powerful commands. You can also install it globally so that you can run it from outside the Node project – say goodbye to those pesky Bash scripts!

var shell = require('shelljs'); if (! shell.which('git')) { shell.echo('Sorry, this script requires git'); shell.exit(1); } // Copy files to release dir shell.rm('-rf', 'out/Release'); shell.cp('-R', 'stuff/', 'out/Release'); // Replace macros in each .js file shell.cd('lib'); Shell. Ls (' *. Js). ForEach (function (file) {shell. Sed (' -i ', 'BUILD_VERSION', 'v0.1.2' file). shell.sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file); shell.sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, shell.cat('macro.js'), file); }); shell.cd('.. ');Copy the code

shx

== Function == : Shx is a wrapper around ShellJS Unix commands that provides a simple solution for simple Unix-like cross-platform commands in NPM package scripts

ShellJS: Good for writing long scripts, all in JS, running via NodeJS (e.g. node myScript.js).
shx: Good for writing one-off commands in npm package scripts (e.g. “clean”: “shx rm -rf out/”).

npm install shx --save-dev

package.json:
{
  "scripts": {
    "clean": "shx rm -rf build dist && shx echo Done"
  }
}

Copy the code

node-ssh

== Function == : Node-SSH is a very lightweight Promise wrapper for SSH2.

chalk

== Function == : Nest the style you want to the terminal.

const chalk = require('chalk'); const log = console.log; // Combine styled and normal strings log(chalk.blue('Hello') + ' World' + chalk.red('! ')); // Compose multiple styles using the chainable API log(chalk.blue.bgRed.bold('Hello world! ')); // Pass in multiple arguments log(chalk.blue('Hello', 'World! ', 'Foo', 'bar', 'biz', 'baz')); // Nest styles log(chalk.red('Hello', chalk.underline.bgBlue('world') + '! ')); // Nest styles of the same type even (color, underline, background) log(chalk.green( 'I am a green line ' + chalk.blue.underline.bold('with a blue substring') + ' that becomes green again! '));Copy the code

Nzh

== Function == : Applicable to the scenario where Arabic numerals and Chinese numerals need to be converted. Features are as follows:

To convert in the form of a string, no problems such as large numbers and floating point numbers (please round the original data by yourself)
Support scientific notation string conversion
Support colloquial
Support custom conversion (whether Megabyte, Beijing or centimetre can be used)
Support for supernumerals replaces the exascale with the less controversial exascale
Of course, you can also convert Chinese numerals back into Arabic numerals

npm install nzh --save var Nzh = require("nzh"); var nzhcn = require("nzh/cn"); Var NZHHK = require(" NZH /hk"); Var NZHCN = nzh.cn; // Use simplified Chinese, nzH.hk -- nzhcn.encodeS(100111); Nzhcn. encodeB(100111); NZHCN. EncodeS ("1.23456789e+21"); // Scientific notation string >> 123,45,67,899 trillion nzhcn.toMoney("100111.11"); // Transfer amount in Chinese >> RMB one hundred thousand one hundred and eleven One hundred and ten centsCopy the code

decko

Throttling and anti-shaking blog.csdn.net/qq_2955…

== Function == : Concise implementation of three of the most useful decorators:

Bind: this specifies the value of a constant in the method
@debounce: Restrict calls to methods
@memoize: Cache the return value based on the parameter

npm i -S decko
Copy the code

p-queue

== function == : useful for rate-limiting asynchronous (or synchronous) operations. For example, when interacting with REST apis or when performing CPU/memory intensive tasks.

const {default: PQueue} = require('p-queue'); const got = require('got'); const queue = new PQueue({concurrency: 1}); (async () => { await queue.add(() => got('https://sindresorhus.com')); console.log('Done: sindresorhus.com'); }) (); (async () => { await queue.add(() => got('https://avajs.dev')); console.log('Done: avajs.dev'); }) (); (async () => { const task = await getUnicornTask(); await queue.add(task); console.log('Done: Unicorn task'); }) ();Copy the code

sleep

Function == : sleep

npm i sleep

var sleep = require('sleep');
function msleep(n) {
  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, n);
}
function sleep(n) {
  msleep(n*1000);
}
Copy the code

delay

== function == : Defer commitment for a certain amount of time

npm install delay const delay = require('delay'); (async () => { bar(); await delay(100); // Executed 100 milliseconds later baz(); }) ();Copy the code

better-scroll

BetterScroll is a plug-in that focuses on various scrolling scenarios on mobile devices (supported by PC). Its core is the implementation of iscroll reference, its API design is basically compatible with IScroll, on the basis of IScroll and extended some features and do some performance optimization.

https://better-scroll.github.io/docs/zh-CN/guide/#betterscroll-%E6%98%AF%E4%BB%80%E4%B9%88
Copy the code

create-keyframe-animation

== Function == : Use javascript to dynamically generate CSS keyframe animation in the browser (no maintenance)

vconsole

== Features == : a lightweight, scalable front-end developer debug panel for mobile web.

<script SRC ="path/to/vconsole.min.js"></script> <script> // initialize var vconsole = new vconsole (); console.log('Hello world'); </script>Copy the code

Several common js libraries, don’t repeat the wheel

color

uuidjs

rc-upload

react-copy-to-clipboardAnd the clipboard

numeral

omit.js

Moment.js

Day.js

milliseconds

filesize

react-markdown

cytoscape | cytoscape-dagre

Lodash

patch-package node

cross-env node

bignumber.js

QRCode.js,qrcode.vue

cssnano,js-beautify

cors node

countup.js

js-base64

json-bigint

vuejs-datetimepicker

vue-meta-info

vue-smooth-scroll

prismjs

vuex-persistedstate

vue-slider-component

CodeMirror

vue-codemirror

portfinder || get-port node

regedit node

lowdb

cheerio node

libxmljs

node-fetch,got node

ora node

node-mkdirp 、rimraf node

shelljs

shx

node-ssh

chalk

Nzh

decko

p-queue

sleep

delay

better-scroll

create-keyframe-animation

vconsole

Related Posts

ES2018 asynchronous iterator

I’d like a lovely crumb too, huh?

13 modern CSS frameworks to help you improve your development efficiency