几个常用js库,别再重复造轮子了

Chase620 等级 485 0 0

年底了,总结下今年用到的一些有意思的《js轮子》(只是大概列出些比较有意思的库,每个标题都是超链接,可点击自行查阅)
希望能对您有用!

如有意思的 轮子 可以在评论列出一起讨论下


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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fuuidjs)
----------------------------------------------------------------------------------------

\==功能==: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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Frc-upload)
----------------------------------------------------------------------------------------------

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

var Upload = require('rc-upload'); var React = require('react'); React.render(, container);


[react-copy-to-clipboard](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-copy-to-clipboard) 、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 (

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


* * *

[numeral](https://links.jianshu.com/go?to=http%3A%2F%2Fnumeraljs.com%2F)
------------------------------------------------------------------------

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

var value = myNumeral.value(); // 1000

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

var value2 = myNumeral2.value(); // 1000


* * *

[omit.js](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fomit.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](https://links.jianshu.com/go?to=https%3A%2F%2Fmomentjs.com%2F)
--------------------------------------------------------------------------

\==功能==:一个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](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fiamkun%2Fdayjs%2Fblob%2FHEAD%2Fdocs%2Fzh-cn%2FREADME.zh-CN.md)
----------------------------------------------------------------------------------------------------------------------------------

\==功能==: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](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FHenrikJoreteg%2Fmilliseconds)
-------------------------------------------------------------------------------------------------------

\==~~~~功能==:用于将时间转换为毫秒。

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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Ffilesize)
--------------------------------------------------------------------------------------------

\==功能==: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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Freact-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 = () => {

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 defaultSelectedKeys={['1']} onClick={menuOnClick} theme='light'> <Menu.Item key="1">开发文档</Menu.Item> <Menu.Item key="2">使用文档</Menu.Item>

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

`````` 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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fcytoscape) | cytoscape-dagre
----------------------------------------------------------------------------------------------------------------

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

[Lodash](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Flodash)
----------------------------------------------------------------------------------------

\==功能==:函数工具类库

// 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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fpatch-package) node
-----------------------------------------------------------------------------------------------------------

\==功能==:npm yran 补丁,用于改node\_modules

[cross-env](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fcross-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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fbignumber.js)
----------------------------------------------------------------------------------------------------

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

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


[QRCode.js](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fqrcodejs2)、 [qrcode.vue](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fqrcode.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, 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, }); // 这里如果需要在页面上展示的话,就将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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fcssnano)、[js-beautify](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fjs-beautify)
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

\==功能==: css js 压缩工具

[cors](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fcors) 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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fcountup.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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fjs-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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fjson-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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvuejs-datetimepicker)
--------------------------------------------------------------------------------------------------------------------

\==功能==:

npm install vuejs-datetimepicker


[vue-meta-info](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-meta-info)
------------------------------------------------------------------------------------------------------

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

[vue-smooth-scroll](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-smooth-scroll)
--------------------------------------------------------------------------------------------------------------

\==功能==:Scroll

npm install --save vue-smooth-scroll

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


[prismjs](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fprismjs)
------------------------------------------------------------------------------------------

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

[vuex-persistedstate](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvuex-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](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FNightCatSama%2Fvue-slider-component%2Fblob%2Fmaster%2FREADME-CN.md)
-----------------------------------------------------------------------------------------------------------------------------------------------------

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

$ yarn add vue-slider-component

npm install vue-slider-component --save


[CodeMirror](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fcodemirror)
------------------------------------------------------------------------------------------------

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

[vue-codemirror](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-codemirror)
--------------------------------------------------------------------------------------------------------

\==功能==:

<codemirror ref="editQuerySQL" @ready="onCodemirrorReady" @input="onCodemirrorInput" v-model="query.sql" :options="cmOptions" >

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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fportfinder) || [get-port](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fget-port) node
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

\==功能==:端口查看器

[sudo] npm install portfinder

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


[regedit](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fregedit) node
-----------------------------------------------------------------------------------------------

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

[lowdb](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Flowdb)
--------------------------------------------------------------------------------------

\==功能==:适用于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](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fcheeriojs%2Fcheerio%2Fwiki%2FChinese-README) node
----------------------------------------------------------------------------------------------------------------------

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

npm install cheerio const cheerio = require('cheerio'); const $ = cheerio.load('

Hello world

');

$('h2.title').text('Hello there!'); $('h2').addClass('welcome');

$.html(); //=>

Hello there!


[libxmljs](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Flibxmljs%2Flibxmljs%2Fwiki)
-------------------------------------------------------------------------------------------------

\==功能==:解析xml

[node-fetch](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fnode-fetch%2Fnode-fetch)、 [got](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fsindresorhus%2Fgot%23readme) node
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

\==功能==:node-ajax

[ora](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fora) node
---------------------------------------------------------------------------------------

\==功能==:优雅的终端旋转器

const ora = require('ora');

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

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


[node-mkdirp](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fsubstack%2Fnode-mkdirp) 、[rimraf](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Frimraf) 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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fshelljs)
------------------------------------------------------------------------------------------

\==功能==: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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fshx)
----------------------------------------------------------------------------------

\==功能==: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/").

npm install shx --save-dev

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


[node-ssh](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fsteelbrain%2Fnode-ssh%23readme)
-----------------------------------------------------------------------------------------------------

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

[chalk](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fchalk%2Fchalk)
---------------------------------------------------------------------------------

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

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](https://links.jianshu.com/go?to=https%3A%2F%2Fblog.whyoop.com%2Fnzh%2Fdocs%2F%23%2F)
------------------------------------------------------------------------------------------

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

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

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://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fdevelopit%2Fdecko)
-------------------------------------------------------------------------------------

节流 防抖  
[https://blog.csdn.net/qq\_2955...](https://links.jianshu.com/go?to=https%3A%2F%2Fblog.csdn.net%2Fqq_29557739%2Farticle%2Fdetails%2F96430431)

\==功能==:三个最有用的装饰器的简洁实现:

*   @bind:this在方法内使常量的值
*   @debounce:限制对方法的调用
*   @memoize:根据参数缓存返回值

npm i -S decko


[p-queue](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fsindresorhus%2Fp-queue%23readme)
-----------------------------------------------------------------------------------------------------

\==功能==:对限制速率的异步(或同步)操作很有用。例如,在与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](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fsleep)
--------------------------------------------------------------------------------------

\==功能==: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](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fsindresorhus%2Fdelay%23readme)
-------------------------------------------------------------------------------------------------

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

npm install delay const delay = require('delay');

(async () => { bar();

await delay(100);

// Executed 100 milliseconds later
baz();

})();


[better-scroll](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fustbhuangyi%2Fbetter-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](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FHenrikJoreteg%2Fcreate-keyframe-animation)
---------------------------------------------------------------------------------------------------------------------------------

\==功能==:使用JavaScrip在浏览器中动态生成CSS关键帧动画(不维护了)

[vconsole](https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FTencent%2FvConsole%2Fblob%2FHEAD%2FREADME_CN.md)
----------------------------------------------------------------------------------------------------------------------

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

```

最后

最近断断续续整理了一些阿里、腾讯、字节等等大厂的面试题,目的是想了解一下大厂招聘的技术热点,不断提升学习。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等,免费分享给大家,还在持续整理收集整理中,有需要的朋友【点击我】免费获取。

篇幅有限,仅展示部分内容

几个常用js库,别再重复造轮子了

几个常用js库,别再重复造轮子了

几个常用js库,别再重复造轮子了

本文转自 https://www.jianshu.com/p/a14e7bb9836e,如有侵权,请联系删除。

收藏
评论区

相关推荐

项目实战之---AES 加密
ajax/index.js import axiosApi from '../js/fetch'; import { baseUrl, headerParams } from '../js/baseUrl'; // import引用AES源码js import CryptoJS from 'cryptojs/cryptojs'; console.lo
教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
前端高效开发必备的 js 库梳理
前端高效开发必备的 js 库梳理 之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, 从而不断的制造大家的焦虑感.
面试之手撕 JS 继承
提到JS继承,你首先想到的什么? 面试 继承方式 优缺点...,js继承作为曾经的苦主,我看了忘,忘了看,看了又忘,OMG,都0212年了面试官还不放过我。 ok
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
几个常用js库,别再重复造轮子了
年底了,总结下今年用到的一些有意思的《js轮子》(只是大概列出些比较有意思的库,每个标题都是超链接,可点击自行查阅) 希望能对您有用! 如有意思的 轮子 可以在评论列出一起讨论下 color(https://links.jianshu.com/go?tohttps%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fco
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
js异步的5种样式
js异步的5种样式 1.定时器 2.AJAX 3.Promise 4.Generator 5.asyns和awite  1.定时器     setTimeout() : 延时器        可以传入三个分别是            1)code:必
「组件」返回顶部按钮
样式如图1:在components文件夹下新建BackTop.vue js<template <div class"backTopBtn" <a href"javascript:;" <div vif"btnFlag" class"btn" @click"backTop"TOP</div
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
js删除表格中的某一行
点击表格中的内容,删除某一行正文js代码如下 function removeTd(obj) { obj.parentNode.parentNode.remove();}
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
彻底搞懂 JS 中的 prototype、__proto__与constructor
1\. 前言作为一名前端工程师,必须搞懂JS中的prototype、proto与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点,proto属性的两边是各由两个下划线构成(这里为了方便大家看清,在两下划线之间加入了一个空格: proto ,读作“dunder pr
前端 - 常见的异常捕获方法
前端异常捕获在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。回归正题,我们该如何在程序异常发生
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(