首页 / 更多教程 / 50 个让你高效编程的前端轮子
50 个让你高效编程的前端轮子
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了50 个让你高效编程的前端轮子，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含29120字，纯文字阅读大概需要42分钟。
内容图文
总结下今年用到的一些有意思的《js轮子》（只是大概列出些比较有意思的库，每个标题下都是超链接，可点击自行查阅） 希望能对您有用！如有意思的 轮子 可以在评论列出一起讨论下
color
https://www.npmjs.com/package/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?}
“我自己是一名从事了6年web前端开发的老程序员，今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程（视频+源码+笔记+项目实战），从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理，打包给每一位前端小伙伴，这里是前端学习者聚集地，欢迎初学和进阶中的小伙伴（所有前端教程关注我的微信公众号：web前端学习圈，关注后回复“web”即可领取）。
uuidjs
https://www.npmjs.com/package/uuidj
==功能==：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://www.npmjs.com/package/rc-upload
==功能==：文件上传下载拖拽文件 及文件夹等
var?Upload?=?require('rc-upload');
var?React?=?require('react');
React.render(<Upload?/>,?container);
react-copy-to-clipboard
https://www.npmjs.com/package/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
http://numeraljs.com/
==功能==：一个用于格式化和处理数字的javascript库。
var?value?=?myNumeral.value();
//?1000
var?myNumeral2?=?numeral('1,000');
var?value2?=?myNumeral2.value();
//?1000
omit.js
https://www.npmjs.com/package/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
https://momentjs.com/
==功能==：一个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://github.com/iamkun/dayjs/blob/HEAD/docs/zh-cn/README.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://github.com/HenrikJoreteg/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
https://www.npmjs.com/package/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
https://www.npmjs.com/package/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?(
????<>
??????<Row?className='articles'>
????????<Col?flex='200px'?className="articles-list">
??????????<Affix?offsetTop={24}>
????????????<Menu?defaultSelectedKeys={['1']}?onClick={menuOnClick}?theme='light'>
??????????????<Menu.Item?key="1">开发文档</Menu.Item>
??????????????<Menu.Item?key="2">使用文档</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;
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
https://www.npmjs.com/package/cytoscape
==功能==：Cytoscape.js是功能齐全的图论库。您是否需要对关系数据进行建模和/或可视化，例如生物数据或社交网络？如果是这样，Cytoscape.js就是您所需要的。Cytoscape.js包含一个图形理论模型和一个用于显示交互式图形的可选渲染器。该库旨在使程序员和科学家尽可能轻松地在其应用程序中使用图论，无论是用于Node.js应用程序中的服务器端分析还是用于丰富的用户界面。
Lodash
https://www.npmjs.com/package/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
https://www.npmjs.com/package/patch-package
==功能==：npm yran 补丁,用于改node_modules
cross-env node
https://www.npmjs.com/package/cross-env
==功能==：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://www.npmjs.com/package/bignumber.js
==功能==：一个用于任意精度十进制和非十进制算术的JavaScript库
https://mikemcl.github.io/bignumber.js/
https://juejin.cn/post/6844903704714280968###heading-7
QRCode.js、 qrcode.vue
https://www.npmjs.com/package/qrcodejs2
https://www.npmjs.com/package/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,
????????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、js-beautify
https://www.npmjs.com/package/cssnano
https://www.npmjs.com/package/js-beautify
==功能==：css js 压缩工具
cors node
https://www.npmjs.com/package/cors
==功能==：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://www.npmjs.com/package/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
https://www.npmjs.com/package/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
https://www.npmjs.com/package/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
https://www.npmjs.com/package/vuejs-datetimepicker
==功能==：
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>?
vue-meta-info
https://www.npmjs.com/package/vue-meta-info
==功能==：基于Vue 2.0 的单页面 meta info 管理.
<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>
vue-smooth-scroll
https://www.npmjs.com/package/vue-smooth-scroll
==功能==：Scroll
npm?install?--save?vue-smooth-scroll
import?vueSmoothScroll?from?'vue-smooth-scroll'
Vue.use(vueSmoothScroll)
prismjs
https://www.npmjs.com/package/prismjs
==功能==：Prism是一个轻量，健壮，优雅的语法高亮库。这是Dabblet的衍生项目。
vuex-persistedstate
https://www.npmjs.com/package/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
https://github.com/NightCatSama/vue-slider-component/blob/master/README-CN.md
==功能==：一个高度定制化的滑块组件
$?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>
CodeMirror
https://www.npmjs.com/package/codemirror
==功能==：CodeMirror是使用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并具有100多种语言模式和各种插件，可实现更高级的编辑功能。每种语言都带有功能齐全的代码和语法高亮显示，以帮助阅读和编辑复杂代码。
vue-codemirror
https://www.npmjs.com/package/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
https://www.npmjs.com/package/portfinder
https://www.npmjs.com/package/get-port
==功能==：端口查看器
[sudo]?npm?install?portfinder
portfinder.getPort({
????port:?3000,????//?minimum?port
????stopPort:?3333?//?maximum?port
},?callback);
regedit node
https://www.npmjs.com/package/regedit
==功能==：使用node.js和Windows脚本宿主对Windows注册表进行读取，写入，列出和处理各种时髦的事情。
lowdb
https://www.npmjs.com/package/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
https://github.com/cheeriojs/cheerio/wiki/Chinese-README
==功能==：为服务器特别定制的，快速、灵活、实施的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
https://github.com/libxmljs/libxmljs/wiki
==功能==：解析xml
node-fetch、 got node
https://github.com/node-fetch/node-fetch
https://github.com/sindresorhus/got###readme
==功能==：node-ajax
ora node
https://www.npmjs.com/package/ora
==功能==：优雅的终端旋转器
const?ora?=?require('ora');
?
const?spinner?=?ora('Loading?unicorns').start();
?
setTimeout(()?=>?{
????spinner.color?=?'yellow';
????spinner.text?=?'Loading?rainbows';
},?1000);
node-mkdirp 、rimraf node
https://github.com/substack/node-mkdirp
https://www.npmjs.com/package/rimraf
==功能==：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://www.npmjs.com/package/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
https://www.npmjs.com/package/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/").
npm?install?shx?--save-dev
package.json:
{
??"scripts":?{
????"clean":?"shx?rm?-rf?build?dist?&&?shx?echo?Done"
??}
}
node-ssh
https://github.com/steelbrain/node-ssh###readme
==功能==：Node-SSH 是 ssh2的一个非常轻量级的 Promise 包装器。
chalk
https://github.com/chalk/chalk
==功能==：给终端嵌套您想要的样式。
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://blog.whyoop.com/nzh/docs/###/
==功能==：适用于需要转换阿拉伯数字与中文数字的场景。特点如下:
-
以字符串的方式转换，没有超大数及浮点数等问题(请自行对原数据进行四舍五入等操作)
-
支持科学记数法字符串的转换
-
支持口语化
-
支持自定义转换(不论是兆,京还是厘都可以用)
-
对超大数支持用争议教少的万万亿代替亿亿
-
当然,你还可以把中文数字再转回阿拉伯数字
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://github.com/developit/decko
节流 防抖https://blog.csdn.net/qq_2955...==功能==：三个最有用的装饰器的简洁实现：
-
@bind：this在方法内使常量的值
-
@debounce：限制对方法的调用
-
@memoize：根据参数缓存返回值
npm?i?-S?decko
p-queue
https://github.com/sindresorhus/p-queue###readme
==功能==：对限制速率的异步（或同步）操作很有用。例如，在与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://www.npmjs.com/package/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
https://github.com/sindresorhus/delay###readme
==功能==：将承诺推迟一定的时间
npm?install?delay
const?delay?=?require('delay');
(async?()?=>?{
????bar();
????await?delay(100);
????//?Executed?100?milliseconds?later
????baz();
})();
better-scroll
https://github.com/ustbhuangyi/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
https://github.com/HenrikJoreteg/create-keyframe-animation
==功能==：使用JavaScrip在浏览器中动态生成CSS关键帧动画（不维护了）
vconsole
https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md
==功能==：一个轻量、可拓展、针对手机网页的前端开发者调试面板。
<script?src="path/to/vconsole.min.js"></script>
<script>
??//?初始化
??var?vConsole?=?new?VConsole();
??console.log('Hello?world');
</script>内容总结
以上是互联网集市为您收集整理的50 个让你高效编程的前端轮子全部内容，希望文章能够帮你解决50 个让你高效编程的前端轮子所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。