年末了,總結下今年用到的一些有意思的《js輪子》(只是大概列出些比較有意思的庫,每一個標題都是超連接,可點擊自行查閱)
但願能對您有用!
若有意思的 輪子 能夠在評論列出一塊兒討論下javascript
==功能==:JavaScript庫,用於不可變的顏色轉換和對CSS顏色字符串的支持。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 }
==功能==:UUID.js-JavaScript的RFC兼容UUID生成器html
// 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]);
==功能==: 文件上傳下載拖拽文件 及文件夾等前端
var Upload = require('rc-upload'); var React = require('react'); React.render(<Upload />, container);
==功能==:react 複製粘貼vue
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);
==功能==:一個用於格式化和處理數字的javascript庫。java
var value = myNumeral.value(); // 1000 var myNumeral2 = numeral('1,000'); var value2 = myNumeral2.value(); // 1000
==功能==:返回 在目標對象中 omit[刪除; 忽略] 指定屬性的對象; 實用程序功能,用於建立刪除了某些字段的對象的淺表副本。node
npm i --save omit.js omit(obj: Object, fields: string[]): Object var omit = require('omit.js'); omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18
==功能==:一個JavaScript日期庫,用於解析,驗證,操做和格式化日期。react
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 是一個輕量的處理時間和日期的 JavaScript 庫,和 Moment.js 的 API 設計保持徹底同樣. 若是您曾經用過 Moment.js, 那麼您已經知道如何使用 Day.jswebpack
dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') // 展現 dayjs() .set('month', 3) .month() // 獲取 dayjs().add(1, 'year') // 處理 dayjs().isBefore(dayjs()) // 查詢
==~~~~功能==:用於將時間轉換爲毫秒。git
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.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組件。
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.js是功能齊全的圖論庫。您是否須要對關係數據進行建模和/或可視化,例如生物數據或社交網絡?若是是這樣,Cytoscape.js就是您所須要的。Cytoscape.js包含一個圖形理論模型和一個用於顯示交互式圖形的可選渲染器。該庫旨在使程序員和科學家儘量輕鬆地在其應用程序中使用圖論,不管是用於Node.js應用程序中的服務器端分析仍是用於豐富的用戶界面。
==功能==:函數工具類庫
// 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');
==功能==:npm yran 補丁,用於改node_modules
==功能==:
cross-env這是一款運行跨平臺設置和使用環境變量的腳本。
npm install --save-dev cross-env { "scripts": { "parentScript": "cross-env GREET=\"Joe\" npm run childScript", "childScript": "cross-env-shell \"echo Hello $GREET\"" } }
==功能==:一個用於任意精度十進制和非十進制算術的JavaScript庫
https://mikemcl.github.io/bignumber.js/ https://juejin.cn/post/6844903704714280968#heading-7
==功能==:
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); },
==功能==: css js 壓縮工具
==功能==: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'], }) );
==功能==:數字滾動插件使用方法詳解
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 }
==功能==:另外一個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-
==功能==: 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));
==功能==:
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 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>
==功能==:Scroll
npm install --save vue-smooth-scroll import vueSmoothScroll from 'vue-smooth-scroll' Vue.use(vueSmoothScroll)
==功能==:Prism是一個輕量,健壯,優雅的語法高亮庫。這是Dabblet的衍生項目。
==功能==:
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); };
==功能==:一個高度定製化的滑塊組件
$ 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是使用JavaScript爲瀏覽器實現的多功能文本編輯器。它專門用於編輯代碼,並具備100多種語言模式和各類插件,可實現更高級的編輯功能。每種語言都帶有功能齊全的代碼和語法高亮顯示,以幫助閱讀和編輯複雜代碼。
==功能==:
<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; }, } }
==功能==:端口查看器
[sudo] npm install portfinder portfinder.getPort({ port: 3000, // minimum port stopPort: 3333 // maximum port }, callback);
==功能==:使用node.js和Windows腳本宿主對Windows註冊表進行讀取,寫入,列出和處理各類時髦的事情。
==功能==:適用於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()
==功能==:爲服務器特別定製的,快速、靈活、實施的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>
==功能==:解析xml
==功能==:node-ajax
==功能==:優雅的終端旋轉器
const ora = require('ora'); const spinner = ora('Loading unicorns').start(); setTimeout(() => { spinner.color = 'yellow'; spinner.text = 'Loading rainbows'; }, 1000);
==功能==: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!') });
==功能==: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 是一個包裝 ShellJS Unix 命令的包裝器,爲 npm 包腳本中簡單的類 Unix 跨平臺命令提供了一個簡單的解決方案
npm install shx --save-dev package.json: { "scripts": { "clean": "shx rm -rf build dist && shx echo Done" } }
==功能==:Node-SSH 是 ssh2的一個很是輕量級的 Promise 包裝器。
==功能==: 給終端嵌套您想要的樣式。
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!' ));
==功能==:適用於須要轉換阿拉伯數字與中文數字的場景。
特色以下:
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"); // 轉中文金額 >> 人民幣壹拾萬零壹佰壹拾壹元壹角壹分
節流 防抖
https://blog.csdn.net/qq_2955...
==功能==:三個最有用的裝飾器的簡潔實現:
npm i -S decko
==功能==:對限制速率的異步(或同步)操做頗有用。例如,在與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
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); }
==功能==:將承諾推遲必定的時間
npm install delay const delay = require('delay'); (async () => { bar(); await delay(100); // Executed 100 milliseconds later baz(); })();
==功能==: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
==功能==:使用JavaScrip在瀏覽器中動態生成CSS關鍵幀動畫(不維護了)
==功能==:一個輕量、可拓展、針對手機網頁的前端開發者調試面板。
<script src="path/to/vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); console.log('Hello world'); </script>