web 前端培训 50 个高效编程的前端轮子

作者：@零度

2022 年 6 月 13 日
本文字数：11301 字
阅读完需：约 37 分钟

color

==功能==：JavaScript 库，用于不可变的颜色转换和对 CSS 颜色字符串的支持。

npm install color

var color = Color('###7743CE').alpha(0.5).lighten(0.5);

console.log(color.hsl().string()); // 'hsla(262, 59%, 81%, 0.5)'

console.log(color.cmyk().round().array()); // [ 16, 25, 0, 8, 0.5 ]

console.log(color.ansi256().object()); // { ansi256: 183, alpha: 0.5 }

uuidjs

==功能==：UUID.js-JavaScript 的 RFC 兼容 UUID 生成器

// 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]);

rc-upload

==功能==：文件上传下载拖拽文件及文件夹等

var Upload = require('rc-upload');

var React = require('react');

React.render(<Upload />, container);

react-copy-to-clipboard

==功能==：react 复制粘贴

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);

numeral

==功能==：一个用于格式化和处理数字的 javascript 库。

var value = myNumeral.value();

// 1000

var myNumeral2 = numeral('1,000');

var value2 = myNumeral2.value();

// 1000

omit.js

==功能==：返回在目标对象中 omit[删除; 忽略] 指定属性的对象; 实用程序功能，用于创建删除了某些字段的对象的浅表副本_前端培训。

npm i --save omit.js

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

var omit = require('omit.js');

omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18

Moment.js

==功能==：一个 JavaScript 日期库，用于解析，验证，操作和格式化日期。

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();

Day.js

==功能==：Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js

dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 展示

dayjs()

.set('month', 3)

.month() // 获取

dayjs().add(1, 'year') // 处理

dayjs().isBefore(dayjs()) // 查询

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); // 63115200000

filesize

==功能==：filesize.js 提供了一种简单的方法来从数字（浮点数或整数）或字符串中获取人类可读的文件大小字符串。

npm i filesize

filesize(500); // "500 B"

filesize(500, {bits: true}); // "4 Kb"

filesize(265318, {base: 10}); // "265.32 kB"

filesize(265318); // "259.1 KB"

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"}); // "259.1 KiB"

filesize(265318, {standard: "iec", fullform: true}); // "259.1 kibibytes"

filesize(12, {fullform: true, fullforms: ["байтов"]}); // "12 байтов"

filesize(265318, {separator: ","}); // "259,1 KB"

filesize(265318, {locale: "de"}); // "259,1 KB"

react-markdown

==功能==：使用备注的 React 的 Markdown 组件。

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 [];

// 提取第一个 level 为最大 level 后续比他大的一律为同级

const maxLevel = lists[0].level;

const newLists: any[] = [];

lists.forEach((item: any) => {

// 一级同级

if (item.level <= maxLevel) {

newLists.push(item)

} else {

// 非同级

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[]>([])

// 初始为开发文档

useEffect(() => {

// console.log(1);

changeCurrentArticle(articles['1'])

}, [])

// 这里是根据文档修改进行获取目录

useEffect(() => {

/**

获取所有的文章标题

// 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])

// 更改当前文档

const changeCurrentArticle = async (url: string) => {

const res = await fetch(url);

const content = await res.text();

setCurrentArticle({ ...currentArticle, content, url })

}

// 书籍导航点击

const menuOnClick = (e: any) => {

const url = articles[e.key]

changeCurrentArticle(url)

}

// 转换为文章右侧目录

const transArticleNavs = (navs: any) => {

// 转换为二级导航

const treedevelopDocs = navsToTree(navs);

setTreeNavs(treedevelopDocs)

}

return (

<Menu.Item key="1">开发文档</Menu.Item>

<Menu.Item key="2">使用文档</Menu.Item>

</Menu>

</Affix>

</Col>

<ReactMarkdown

className="markdown-body"

source={currentArticle.content}

escapeHtml={false}

renderers={{

heading: HeadBlock

}}

</div>

</Col>

{

treeNavs.map((item: any) => {

if (item.children) {

return (

{

item.children.map((childItem: any) => (

))

}

</Link>

)

} else {

return (

)

}

})

}

</Anchor>

</Affix>

</Col>

</Row>

</>

);

};

export default NormalTest;

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;

cytoscape | cytoscape-dagre

==功能==：Cytoscape.js 是功能齐全的图论库。您是否需要对关系数据进行建模和/或可视化，例如生物数据或社交网络？如果是这样，Cytoscape.js 就是您所需要的。Cytoscape.js 包含一个图形理论模型和一个用于显示交互式图形的可选渲染器。该库旨在使程序员和科学家尽可能轻松地在其应用程序中使用图论，无论是用于 Node.js 应用程序中的服务器端分析还是用于丰富的用户界面_前端视频。

Lodash

==功能==：函数工具类库

// 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');

patch-package node

==功能==：npm yran 补丁,用于改 node_modules

cross-env node

==功能==：cross-env 这是一款运行跨平台设置和使用环境变量的脚本。

npm install --save-dev cross-env

{

"scripts": {

"parentScript": "cross-env GREET="Joe" npm run childScript",

"childScript": "cross-env-shell "echo Hello $GREET""

}

bignumber.js

==功能==：一个用于任意精度十进制和非十进制算术的 JavaScript 库

https://mikemcl.github.io/bignumber.js/

https://juejin.cn/post/6844903704714280968###heading-7

QRCode.js、 qrcode.vue

==功能==：

npm install --save qrcode.vue

npm i qrcodejs2

getBlob(base64) {

const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime 类型

const byteString = atob(base64.split(',')[1]); // base64 解码

const arrayBuffer = new ArrayBuffer(byteString.length); // 创建缓冲数组

const intArray = new Uint8Array(arrayBuffer); // 创建视图

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,

false,

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,

});

// 这里如果需要在页面上展示的话，就将 div 节点给添加到 dom 树上去；node.appendChild(div)

const canvas = code._el.querySelector('canvas'); // 获取生成二维码中的 canvas，并将 canvas 转换成 base64

const base64Text = canvas.toDataURL('image/png');

const blob = this.getBlob(base64Text); // 将 base64 转换成 blob 对象

return window.URL.createObjectURL(blob);

cssnano、js-beautify

==功能==：css js 压缩工具

cors node

==功能==：CORS 是一个 node.js 软件包，用于提供可用于通过各种选项启用 CORS 的 Connect / Express 中间件。

npm install cors

var cors = require('cors');

app.use(

cors({

origin: ['http://localhost:8000'],

methods: ['GET', 'POST'],

alloweHeaders: ['Conten-Type', 'Authorization'],

})

);

countup.js

==功能==：数字滚动插件使用方法详解

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: 1,000 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

}

js-base64

==功能==：另一个 Base64 转码器。

npm install --save js-base64

require=require('esm')(module);

import {Base64} from 'js-base64';

let latin = 'dankogai';

let utf8 = '小飼弾'

let u8s = new Uint8Array([100,97,110,107,111,103,97,105]);

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-

json-bigint

==功能==：Native Bigint 是最近添加到 JS 的，因此我们添加了一个利用它的选项，而不是 bignumber.js。但是，使用本机 BigInt 进行解析仍然是向后兼容的选项。

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));

vuejs-datetimepicker

==功能==：

vue-meta-info

==功能==：基于 Vue 2.0 的单页面 meta info 管理.

...

</template>

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>

vue-smooth-scroll

==功能==：Scroll

npm install --save vue-smooth-scroll

import vueSmoothScroll from 'vue-smooth-scroll'

Vue.use(vueSmoothScroll)

prismjs

==功能==：Prism 是一个轻量，健壮，优雅的语法高亮库。这是 Dabblet 的衍生项目。

vuex-persistedstate

==功能==：

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);

};

vue-slider-component

==功能==：一个高度定制化的滑块组件

$ yarn add vue-slider-component

npm install vue-slider-component --save

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

</template>

import VueSlider from 'vue-slider-component'

import 'vue-slider-component/theme/antd.css'

export default {

components: {

VueSlider

data () {

return {

value: 0

}

</script>

CodeMirror

==功能==：CodeMirror 是使用 JavaScript 为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并具有 100 多种语言模式和各种插件，可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法高亮显示，以帮助阅读和编辑复杂代码。

vue-codemirror

==功能==：

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

}

portfinder || get-port node

==功能==：端口查看器

[sudo] npm install portfinder

portfinder.getPort({

port: 3000, // minimum port

stopPort: 3333 // maximum port

}, callback);

regedit node

==功能==：使用 node.js 和 Windows 脚本宿主对 Windows 注册表进行读取，写入，列出和处理各种时髦的事情。

lowdb

==功能==：适用于 Node，Electron 和浏览器的小型 JSON 数据库。由 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()

cheerio node

==功能==：为服务器特别定制的，快速、灵活、实施的 jQuery 核心实现. 爬虫

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>

libxmljs

==功能==：解析 xml

node-fetch、 got node

==功能==：node-ajax

ora node

==功能==：优雅的终端旋转器

const ora = require('ora');

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

setTimeout(() => {

spinner.color = 'yellow';

spinner.text = 'Loading rainbows';

}, 1000);

node-mkdirp 、rimraf node

==功能==：Like mkdir -p UNIX 命令 rm-rf . nodejs 新建创建文件

var mkdirp = require('mkdirp');

mkdirp('/tmp/foo/bar/baz', function (err) {

if (err) console.error(err)

else console.log('pow!')

});

shelljs

==功能==：hellJS 是在 Node.js API 之上的 Unix shell 命令的可移植（Windows / Linux / OS X）实现。您可以使用它消除 shell 脚本对 Unix 的依赖，同时仍然保留其熟悉而强大的命令。您还可以全局安装它，以便可以从 Node 项目外部运行它-告别那些讨厌的 Bash 脚本！

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('..');

shx

==功能==：Shx 是一个包装 ShellJS Unix 命令的包装器，为 npm 包脚本中简单的类 Unix 跨平台命令提供了一个简单的解决方案

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/").node-ssh

==功能==：Node-SSH 是 ssh2 的一个非常轻量级的 Promise 包装器。

chalknpm install shx --save-dev

package.json:

{

"scripts": {

"clean": "shx rm -rf build dist && shx echo Done"

}

==功能==：给终端嵌套您想要的样式。

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!'

));

Nzh

==功能==：适用于需要转换阿拉伯数字与中文数字的场景。特点如下:

以字符串的方式转换，没有超大数及浮点数等问题(请自行对原数据进行四舍五入等操作)支持科学记数法字符串的转换支持口语化支持自定义转换(不论是兆,京还是厘都可以用)对超大数支持用争议教少的万万亿代替亿亿当然,你还可以把中文数字再转回阿拉伯数字 npm install nzh --save

var Nzh = require("nzh");

var nzhcn = require("nzh/cn"); //直接使用简体中文

var nzhhk = require("nzh/hk"); //繁体中文

var nzhcn = Nzh.cn; // 使用简体中文, 另外有 Nzh.hk -- 繁体中文

nzhcn.encodeS(100111); // 转中文小写 >> 十万零一百一十一

nzhcn.encodeB(100111); // 转中文大写 >> 壹拾万零壹佰壹拾壹

nzhcn.encodeS("1.23456789e+21"); // 科学记数法字符串 >> 十二万三千四百五十六万万七千八百九十万亿

nzhcn.toMoney("100111.11"); // 转中文金额 >> 人民币壹拾万零壹佰壹拾壹元壹角壹分

decko

节流防抖https://blog.csdn.net/qq_2955...==功能==：三个最有用的装饰器的简洁实现：

@bind：this 在方法内使常量的值 @debounce：限制对方法的调用 @memoize：根据参数缓存返回值 npm i -S decko

p-queue

==功能==：对限制速率的异步（或同步）操作很有用。例如，在与 REST API 交互时或在执行 CPU /内存密集型任务时。

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');

})();

sleep

==功能==：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);

}

delay

==功能==：将承诺推迟一定的时间

npm install delay

const delay = require('delay');

(async () => {

bar();

await delay(100);

// Executed 100 milliseconds later

baz();

})();

better-scroll

==功能==：BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

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

create-keyframe-animation

==功能==：使用 JavaScrip 在浏览器中动态生成 CSS 关键帧动画（不维护了）

vconsole==功能==：一个轻量、可拓展、针对手机网页的前端开发者调试面板。

// 初始化

var vConsole = new VConsole();

console.log('Hello world');

</script>

文章来源于程序员成长指北

发布于: 刚刚阅读数: 3

@零度

关注

关注尚硅谷，轻松学IT 2021.11.23 加入

IT培训 www.atguigu.com

发布

暂无评论

创作场景

web 前端培训 50 个高效编程的前端轮子

npm install vue-slider-component --save

@零度

评论