JS代码片段赏析 经典又常用的代码分享

简介: JS代码片段赏析 经典又常用的代码分享

工具
生成 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-6000885be57d'
解析 cookie
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("");
// {name: 'Adam', surname: 'Smith'}
复制到剪切板
以下方式仅在用户执行操作时有效,如:click 事件

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);
}
};
//代码效果参考:http://www.zidongmutanji.com/bxxx/526618.html

// 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); // 209685000000
runAsync(() => 10 ** 3).then(console.log); // 1000
let outsideVariable = 50;
runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'

相关文章
|
19小时前
|
JSON JavaScript 前端开发
JavaScript 技巧:干净高效的代码写法
JavaScript 技巧:干净高效的代码写法
|
19小时前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
|
7天前
|
JavaScript 前端开发 Java
JavaScript小数四舍五入的代码
JavaScript小数四舍五入的代码
26 8
|
6天前
|
JavaScript 前端开发 Java
java 执行 javascript 代码
java 执行 javascript 代码
15 6
|
5天前
|
前端开发 JavaScript
JavaScript 时空编织者:驾驭代码的控制流程
JavaScript 时空编织者:驾驭代码的控制流程
|
5天前
|
前端开发 JavaScript
JavaScript 魔法秘笈:编织梦幻般的代码艺术王国
JavaScript 魔法秘笈:编织梦幻般的代码艺术王国
|
7天前
|
设计模式 JSON JavaScript
Javascript实现购物车的详细代码
Javascript实现购物车的详细代码
15 3
|
7天前
|
缓存 JavaScript 前端开发
JS代码拆分方法 是对的还是错的?
JS代码拆分方法 是对的还是错的?
10 3
|
7天前
|
SQL Web App开发 JavaScript
业务功能常用的JS代码片段
业务功能常用的JS代码片段
12 3
|
7天前
|
JavaScript 数据安全/隐私保护
JS代码是怎样被混淆加密的
JS代码是怎样被混淆加密的
11 3