å¹´åºäºï¼æ»ç»ä¸ä»å¹´ç¨å°çä¸äºæææçã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
==åè½==ï¼UUID.js-JavaScriptçRFCå ¼å®¹UUIDçæå¨
// Create a version 4 (random number-based) UUID objectvar objV4 = UUID.genV4();
// Create a version 1 (time-based) UUID objectvar objV1 = UUID.genV1();
// Create a UUID object from a hexadecimal stringvar uuid = UUID.parse("a0e0f130-8c21-11df-92d9-95795a3bcd40");
// Get string representations of a UUID objectconsole.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 objectsconsole.log(objV4.equals(objV1)); // false
// Get UUID version numbersconsole.log(objV4.version); // 4console.log(objV1.version); // 1
// Get internal field values in 3 different forms via 2 different accessorsconsole.log(uuid.intFields.timeLow); // 2699096368console.log(uuid.bitFields.timeMid); // "1000110000100001"console.log(uuid.hexFields.timeHiAndVersion); // "11df"console.log(uuid.intFields.clockSeqHiAndReserved); // 146console.log(uuid.bitFields.clockSeqLow); // "11011001"console.log(uuid.hexFields.node); // "95795a3bcd40"
console.log(uuid.intFields[0]); // 2699096368console.log(uuid.bitFields[1]); // "1000110000100001"console.log(uuid.hexFields[2]); // "11df"console.log(uuid.intFields[3]); // 146console.log(uuid.bitFields[4]); // "11011001"console.log(uuid.hexFields[5]);
rc-upload
==åè½==ï¼ æä»¶ä¸ä¼ ä¸è½½ææ½æä»¶ åæä»¶å¤¹ç
var Upload = require('rc-upload');var React = require('react');
React.render( , container);
react-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 (
this.setState({value, copied: false})} />
this.setState({copied: true})}>
Copy to clipboard with span
this.setState({copied: true})}>
{this.state.copied ? Copied. : null}
);
}
}
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render( , appRoot);
==åè½==ï¼ä¸ä¸ªç¨äºæ ¼å¼ååå¤çæ°åç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 ammoment().format('dddd'); // Tuesdaymoment().format("MMM Do YY"); // Dec 22nd 20moment().format('YYYY [escaped] YYYY'); // 2020 escaped 2020moment().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); // 2000ms.minutes(2); // 120000ms.hours(2); // 7200000ms.days(2); // 172800000ms.weeks(2); // 1209600000ms.months(2); // 5259600000ms.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 = () => {
const [currentArticle, setCurrentArticle] = useState<{ url: string, content: any }>({ url: '', content: '' });
const [treeNavs, setTreeNavs] = useState([])
// åå§ä¸ºå¼åææ¡£
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 (
<>
{
treeNavs.map((item: any) => {
if (item.children) {
return (
{
item.children.map((childItem: any) => (
))
}
)
} else {
return (
)
}
})
}
>
);
};
export default NormalTest;
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,
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
==åè½==ï¼ 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
==åè½==ï¼
npm install vuejs-datetimepicker
vue-meta-info
==åè½==ï¼åºäºVue 2.0 çåé¡µé¢ meta info 管ç.
...
vue-smooth-scroll
==åè½==ï¼Scroll
npm install --save vue-smooth-scrollimport vueSmoothScroll from 'vue-smooth-scroll'Vue.use(vueSmoothScroll)
prismjs
==åè½==ï¼Prismæ¯ä¸ä¸ªè½»éï¼å¥å£®ï¼ä¼é çè¯æ³é«äº®åºãè¿æ¯Dabbletçè¡ç项ç®ã
vuex-persistedstate
==åè½==ï¼
npm install --save vuex-persistedstateimport 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
CodeMirror
==åè½==ï¼CodeMirroræ¯ä½¿ç¨JavaScript为æµè§å¨å®ç°çå¤åè½ææ¬ç¼è¾å¨ãå®ä¸é¨ç¨äºç¼è¾ä»£ç ï¼å¹¶å ·æ100å¤ç§è¯è¨æ¨¡å¼ååç§æä»¶ï¼å¯å®ç°æ´é«çº§çç¼è¾åè½ãæ¯ç§è¯è¨é½å¸¦æåè½é½å ¨ç代ç åè¯æ³é«äº®æ¾ç¤ºï¼ä»¥å¸®å©é 读åç¼è¾å¤æä»£ç ã
vue-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 portfinderportfinder.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 defaultsdb.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('Hello world
');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();//=> Hello there!
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 dirshell.rm('-rf', 'out/Release');
shell.cp('-R', 'stuff/', 'out/Release');
// Replace macros in each .js fileshell.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/").
npm install shx --save-devpackage.json:
{ "scripts": { "clean": "shx rm -rf build dist && shx echo Done"
}
}
node-ssh
==åè½==ï¼Node-SSH æ¯ ssh2çä¸ä¸ªé常轻é级ç Promise å è£ å¨ã
chalk
==åè½==ï¼ ç»ç»ç«¯åµå¥æ¨æ³è¦çæ ·å¼ã
const chalk = require('chalk');const log = console.log;// Combine styled and normal stringslog(chalk.blue('Hello') + ' World' + chalk.red('!'));// Compose multiple styles using the chainable APIlog(chalk.blue.bgRed.bold('Hello world!'));// Pass in multiple argumentslog(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));// Nest styleslog(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 --savevar 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 sleepvar 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 delayconst 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
==åè½==ï¼ä¸ä¸ªè½»éã坿å±ãéå¯¹ææºç½é¡µçå端å¼åè è°è¯é¢æ¿ã
" title="" data-original-title="å¤å¶" style="box-sizing: border-box; appearance: button; cursor: pointer; display: block; float: left; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjQiIGhlaWdodD0iMTYiPjxkZWZzPjxwYXRoIGlkPSJhIiBkPSJNMCAwaDE2djE2SDB6Ii8+PG1hc2sgaWQ9ImIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgeD0iMCIgeT0iMCIgZmlsbD0iI2ZmZiIgbWFza0NvbnRlbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIG1hc2tVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPjx1c2UgeGxpbms6aHJlZj0iI2EiLz48L21hc2s+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTM0IDJ2MTNoMTF2MUgzM1YyaDF6bTktMnY1aDR2OUgzNVYwaDh6bS0yIDZoLTF2MmgtMnYxaDJ2MmgxVjloMlY4aC0yVjZ6bTMtNmwzIDRoLTNWMHpNMzEgM3YxM0gyMFYzaDExem0tMy0zdjJoLTFWMWgtOXYxMmgxdjFoLTJWMGgxMXptLTEgMTJoLTV2MWg1di0xem0xLTJoLTZ2MWg2di0xem0wLTJoLTZ2MWg2Vjh6bTEtMmgtN3YxaDdWNnoiLz48dXNlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLWRhc2hhcnJheT0iMSIgc3Ryb2tlLXdpZHRoPSIyIiBtYXNrPSJ1cmwoI2IpIiB4bGluazpocmVmPSIjYSIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik03IDl2NEgzVjloNHptNiAwdjRIOVY5aDR6TTcgM3Y0SDNWM2g0em02IDB2NEg5VjNoNHptNTEtM3YxNmgtM3YtMWgyVjFoLTJWMGgzek01MSAwdjFoLTJ2MTRoMnYxaC0zVjBoM3ptMTAgM3YxMEg1MVYzaDEwem0tMiA3aC00djFoNHYtMXptLTEtMmgtNXYxaDVWOHptMS0yaC00djFoNFY2em0tMS0yaC01djFoNVY0eiIvPjwvZz48L3N2Zz4="); height: 16px; width: 16px; background-size: auto 16px; margin: 4px 5px; opacity: 0.5; background-position: -16px 0px !important;">

