欢迎大家来到IT世界,在知识的湖畔探索吧!

日常开发中，一般的程序员通常会遇到以下场景：

1. vue中遍历一个列表，但接口数据没有唯一标识，需要手动生成UUID来v-bind:key，怎么生成呢？Google一下
2. 运行一段复杂代码，记得好像H5新的Api Worker可以开启多线程执行还能避免阻塞，但是具体怎么用呢？Google一下
3. 当脱离框架，要实现删除一个节点、为节点添加或删除类、插入节点等操作时，隐隐记得好像都做过，但是忘了，Google一下
4. 遇到设备兼容问题要对某个环境做特殊处理时，怎么判断移动端下的ios设备的自带浏览器？Google一下
5. 有一个打乱数组的需求，这个我做过，(⊙o⊙)…好像写不太出来。算了，Google一下

不知道各位程序猿兄弟姐妹有没有出现以上类似场景，笔者是历历在目了。在开发时，很多功能我们都实现过，或者死记硬背过，或者看过实现原理。但是一旦到了应用的时候，脑袋便一片空白。所以还是那句老话，好记性不如烂笔头。开发不比面试，遇到问题随心所欲，要百度就百度，要谷歌就谷歌，但是查到的内容就参差不齐了，如果查到的文章本身就有问题，那试错成本就太高了。为了避免一般的程序员日复一日的Google，本文旨在打造一份满足日常开发的原生js代码片段库。可让一般的程序员可开箱即用，节省额外搜索的时间。

js代码片段使用 ES6 编写，已尽量精简和考虑兼容问题，大家可点赞、收藏一波，以便使用，闲暇时可常打开看看推敲其实现原理。

笔者会不定期更新哟，有问题可在评论区一起讨论，谢谢大家..

工具

生成 UUID

const UUIDGeneratorBrowser = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4))) ).toString(16) ); // Examples UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-be57d'

欢迎大家来到IT世界,在知识的湖畔探索吧!

解析 cookie

欢迎大家来到IT世界,在知识的湖畔探索吧!const parseCookie = (str) => str .split(";") .map((v) => v.split("=")) .reduce((acc, v) => { acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim()); return acc; }, {}); // Examples parseCookie("foo=bar; equation=E%3Dmc%5E2"); // { foo: 'bar', equation: 'E=mc^2' }

获取网址参数

const getURLParameters = (url) => (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce( (a, v) => ( (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a ), {} ); // Examples getURLParameters("google.com"); // {} getURLParameters("http://url.com/page?name=Adam&surname=Smith"); // {name: 'Adam', surname: 'Smith'}

复制到剪切板

以下方式仅在用户执行操作时有效，如：click 事件

欢迎大家来到IT世界,在知识的湖畔探索吧!const copyToClipboard = (str) => { const el = document.createElement("textarea"); el.value = str; el.setAttribute("readonly", ""); el.style.position = "absolute"; el.style.left = "-9999px"; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; el.select(); document.execCommand("copy"); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } }; // Examples copyToClipboard("Lorem ipsum"); // 'Lorem ipsum' copied to clipboard.

简版 jquery 选择器

// 仅选中第一个元素 const $ = document.querySelector.bind(document); // 选中所有 const $ = document.querySelectorAll.bind(document); const mainContent = $(".main-content"); const externalLinks = $('a[target="_blank"]');

多线程执行函数

const runAsync = (fn) => { const worker = new Worker( URL.createObjectURL(new Blob([`postMessage((${fn})());`]), { type: "application/javascript; charset=utf-8", }) ); return new Promise((res, rej) => { worker.onmessage = ({ data }) => { res(data), worker.terminate(); }; worker.onerror = (err) => { rej(err), worker.terminate(); }; }); }; // Examples const longRunningFunction = () => { let result = 0; for (let i = 0; i < 1000; i++) for (let j = 0; j < 700; j++) for (let k = 0; k < 300; k++) result = result + i + j + k; return result; }; /* NOTE: Since the function is running in a different context, closures are not supported. The function supplied to `runAsync` gets stringified, so everything becomes literal. All variables and functions must be defined inside. */ runAsync(longRunningFunction).then(console.log); // 0 runAsync(() => 10 ** 3).then(console.log); // 1000 let outsideVariable = 50; runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'

作者：i.faker
https://juejin.cn/post/