50 个让你高效编程的前端轮子
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®);
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
vue-meta-info
https://www.npmjs.com/package/vue-meta-info
==功能==:基于Vue 2.0 的单页面 meta info 管理.
…
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
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”
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(‘
Hello world
’);
$(‘h2.title’).text(‘Hello there!’);
$(‘h2’).addClass(‘welcome’);
$.html();
//=>
Hello there!
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 以及做了一些性能优化。
50 个让你高效编程的前端轮子相关推荐
- 【笔记】《C#高效编程改进C#代码的50个行之有效的办法》第1章C#语言习惯(1)--属性的特性以及索引器(SamWang)...
************************************************************************** 书名:<C#高效编程改进C#代码的50个行之 ...
- C#高效编程:改进C#代码的50个行之有效的办法(第2版)(奋斗的小鸟)_PDF 电子书
下载地址:http://pan.baidu.com/share/link?shareid=1689099661&uk=721744522 QQ:2864670220 (提供电子书提取密码) ...
- 如何高效的学习前端的网页设计?
如何高效的学习前端的网页设计? 那我就针对"高效"为你做一些推荐. 如果你喜欢看图文类的教程 那么推荐你菜鸟教程这个网站 https://www.runoob.com/ 对新手入门 ...
- 提高Python编程的效率技巧你知道哪些?收藏必备系列,阿里表哥推荐!Python高效编程技巧
Python高效编程技巧 工作中经常要处理各种各样的数据,遇到项目赶进度的时候自己写函数容易浪费时间. Python 中有很多内置函数帮你提高工作效率! 一:在列表,字典中根据条件筛选数据 1.假设有 ...
- 我今年50岁了,还在干前端
程序员圈流传着这样一个段子:35岁之后,干前端去送外卖:搞后端去开滴滴:运维就去买保险-- 招人不要35岁的,裁人清理35岁的,不知道什么时候开始,35岁成了职业生涯的拐点,中年危机逐渐扩散成为整个圈 ...
- c语言除法加速,干货!C语言高效编程与代码优化
原标题:干货!C语言高效编程与代码优化 译文链接:http://www.codeceo.com/article/c-high-performance-coding.html 英文原文:https:// ...
- c语言函数除法代码,C语言高效编程与代码优化~
原标题:C语言高效编程与代码优化~ 译文链接:http://www.codeceo.com/article/c-high-performance-coding.html 英文原文:https://ww ...
- 我的高效编程的秘诀:自动化你的编程工作
我的高效编程的秘诀:自动化你的编程工作 2015-08-05 cheungmine, all rights reserved. 软件工业的目标就是把人类的生产活动流程化,自动化和智能化.作为一个程序开 ...
- 编程入门--前端和后端
一.前端开发(Frontend Development) 1.前端开发就是开发网页上的内容展示与用户的交互 1.1 内容展示指的是在网页上看到的图片.文字.视频.数字等信息 1.2用户交互指用户在页面 ...
最新文章
- Oracle结构设计技巧(访问数据库象访问内存一样 快)
- 数组元素的地址计算问题(一维到高维)
- 《Reids 设计与实现》第九章 事件
- R中与数据挖掘相关的package
- 3项目里面全局用less变量 cli vue_vue-cli3全局载入scss变量或less变量配置
- android 使用shell模拟触屏_Appium常用操作之「微信滑屏、触屏操作」
- wpf treeview使用expanded事件出错的问题
- 阿里云和域名怎么备案?
- freemarker word模板导出图片循环
- 易语言5.8袖珍绿色免安装
- 三阶魔方中心互换_魔方中的数学2-置换的定义
- jquery跳转、刷新页面大全
- 史上最全vue优化方案
- 随笔小记-广告拦截,卸载猎豹后,仍然弹出广告
- 小白终是踏上了这条不归路----小文的mysql学习笔记(22)--------函数
- SQLServer中用户 'sa' 登录失败解决办法
- source insight下载安装教程
- matlab 随机数产生
- Win7重新受到用户追捧,竟然因为勒索病毒!
- 谷粒商城一介绍及基本架构todo
热门文章
- 多系统如何共享蓝牙设备?
- Python保存TXT文件
- TSINGSEE车载监控平台的城市渣土车监管解决方案
- [论文翻译] Deep Learning
- 安装SQL Server和SQL Server Management Studio(SSMS)
- python 方差齐性检验_Python数据科学:正态分布与t检验
- 【算法】一致性哈希算法原理详解
- 滴滴开源 LogicFlow:专注流程可视化的前端框架
- java if中的continue_java中break和continue源码解析
- 四轴自适应控制算法的一些尝试开源我的山猫飞控和梯度在线辨识自适应等算法