9 个出人意料的网站开发技巧和窍门
1. 获取当前时间戳
2. 检测长按
3. 对对象数组进行排序
4. 组件间通信
5. 对象数组的深拷贝和浅拷贝
6. 复制到剪贴板
7. 一条 npm 命令即可统领所有
8. 优化 SVG 文件
9. 在 Chrome 浏览器中检查 WebSocket 消息
在本文中，我总结了近期使用过的 9 个网页开发技巧和窍门。虽然内容主要面向初学者，但我希望它也能对经验丰富的开发者有所帮助。
1. 获取当前时间戳
我发现这个简写方式很有意思，尤其有助于理解幕后发生的事情：
const ts = + new Date(); // Same as (new Date()).getTime()
console.log(ts);
// 1576178666126
演示：https://codepen.io/armelpingault/pen/eYmBzEG
根据文档：
该
valueOf()方法返回指定对象的基本类型值。简写形式是在变量名前加上加号（+）。
如果您需要回顾一下什么是原始值：
在 JavaScript 中，原始类型（原始值、原始数据类型）是指非对象且没有方法的数据。共有 7 种原始数据类型：字符串 (string)、数字 (number)、大整数 (bigint)、布尔值 (boolean)、null、undefined 和符号 (symbol)。
2. 检测长按
我有一个按钮，它应该根据用户交互触发两种不同的操作：普通点击触发一种操作，长按按钮触发另一种操作：
const btn = document.querySelector('button');
let timer;
btn.addEventListener('mousedown', (e) => {
timer = + new Date();
});
btn.addEventListener('mouseup', (e) => {
if (+ new Date() - timer < 500) {
console.log('click');
} else {
console.log('long press');
};
});
演示：https://codepen.io/armelpingault/pen/rNaLpLE
3. 对对象数组进行排序
这是一个经典问题，我们经常需要根据对象某个属性的值对对象数组进行排序。
const arr = [
{name: 'Jacques', age: 32},
{name: 'Paul', age: 45},
{name: 'Pierre', age: 20}
];
arr.sort((firstEl, secondEl) => firstEl.age - secondEl.age);
// [{name: 'Pierre', age: 20}, {name: 'Jacques', age: 32}, {name: 'Paul', age: 45}]
// And if you want to sort in descending order:
arr.sort((firstEl, secondEl) => secondEl.age - firstEl.age);
// [{name: 'Paul', age: 45}, {name: 'Jacques', age: 32}, {name: 'Paul', age: 20}]
演示：https://codepen.io/armelpingault/pen/zYxoBPW
另请注意，使用sort()函数时，数组会就地排序，不会进行复制。
4. 组件间通信
当需要两个 JavaScript 组件相互通信时，我有时最终会实现一个自定义事件：
const el = document.createElement('div');
const btn = document.querySelector('button');
const event = new CustomEvent('sort', {
detail: {
by: 'name'
}
});
btn.addEventListener('click', () => {
el.dispatchEvent(event);
});
el.addEventListener('sort', (e) => {
console.log('Sort by', e.detail.by);
});
演示：https://codepen.io/armelpingault/pen/gObLazb
5. 对象数组的深拷贝和浅拷贝
这个话题本身就值得写一整篇文章，你会发现成千上万篇文章都在讨论它，但几天前我和一位同事讨论过这个问题，所以我想在这里再提醒大家一下。
当您需要创建对象数组的副本时，很容易会想到这样
做：
const arr1 = [{a: 1, b: 2}, {c: 3, d: 4}];
const arr2 = arr1;
但是，这只是复制对原始对象的引用，如果您修改了原始对象arr1，那么arr2原始对象也会被修改。
const arr1 = [{a: 1, b: 2}, {c: 3, d: 4}];
const arr2 = arr1;
arr1[1].c = 9;
console.log(arr2);
// [{a: 1, b: 2}, {c: 9, d: 4}];
演示：https://codepen.io/armelpingault/pen/OJPbXEy
使用扩展运算符可以创建数组的浅拷贝。这将创建一个新数组，但会保留对原数组对象的引用。
const arr1 = [{a: 1, b: 2}, {c: 3, d: 4}];
const arr2 = [...arr1];
arr1.push({e: 5, f: 6});
arr1[0].a = 8;
console.log(arr2);
// [{a: 8, b: 2}, {c: 3, d: 4}];
演示：https://codepen.io/armelpingault/pen/GRgNqBg
如您所见，向中添加新元素arr1并不会改变现有元素arr2。但是，如果我修改现有元素内部的对象arr1，那么我们也会在现有元素内部看到相应的变化arr2。
如果我想对数组进行深拷贝，可以这样做：
const arr1 = [{a: 1, b: 2}, {c: 3, d: 4}];
const arr2 = JSON.parse(JSON.stringify(arr1));
arr[1].d = 6;
console.log(arr1);
// [{a: 1, b: 2}, {c: 3, d: 6}];
console.log(arr2);
// [{a: 1, b: 2}, {c: 3, d: 4}];
演示：https://codepen.io/armelpingault/pen/BayQzOK
在这种情况下，我可以看到，无论我如何更改arr1，都不会对产生任何影响arr2。
请注意，使用JSON.stringify时，对象实例（包括 Map、Set、WeakMap 和 WeakSet）只会序列化其可枚举属性。
6. 复制到剪贴板
<textarea>这是我用来将文件内容复制到剪贴板的一小段代码：
const textarea = document.querySelector('textarea');
const copy = () => {
textarea.select();
document.execCommand('copy');
alert('Content popied to clipboard!');
};
textarea.addEventListener('click', copy);
演示：https://codepen.io/armelpingault/pen/jOEVrQw
此外，剪贴板 API还提供了更多操作剪贴板的选项。然而，它仍处于实验阶段，浏览器支持度仍然很低。
7. 一条 npm 命令即可统领所有
我非常喜欢部署命令只有一行的项目，无论是开发环境还是生产环境。
最近在做项目的时候，我发现我们需要两条命令来启动开发环境，一条在服务器文件夹下，一条在客户端文件夹下。显然，我们需要把这两条命令合并成一条，然后从根文件夹运行。
Projects
|
|-- client
| package.json
|
|-- server
| package.json
|
package.json
多亏了 npm 包concurrently，我们才能同时运行多个 npm 命令。
// After installing the npm package
npm install --save-dev concurrently
// You should now see it in your package.json
"devDependencies": {
"concurrently": "^5.0.0"
}
// Then add the "master" command to the root package.json
"scripts": {
"start": "concurrently \"npm start --prefix ./client\" \"npm start --prefix ./server\"",
}
此--prefix选项将在您选择的子文件夹中运行任何 npm 命令：
npm run build --prefix ./client
8. 优化 SVG 文件
我们每天都会大量使用 SVG 图标，这些图标通常由网页设计机构或客户的网页设计部门提供。
很多SVG图像实际上是用Adobe Illustrator等软件创建和生成的。虽然这些软件是创建图形设计的好工具，但如果你不注意导出设置，它们也会在SVG文件中生成很多额外的无用标记。
为了优化我的 SVG 文件，我使用了SVG Optimizer，它很容易集成到你的项目中：
// Install SVGO globally
npm install -g svgo
// Optimize all SVG file from -f "folder" to -o "folder"
svgo -f assets/src/svg -o assets/dist/svg
上次运行后，我测得所有文件的大小平均减少了约 30%……还不错！
9. 在 Chrome 浏览器中检查 WebSocket 消息
本文的最后一个技巧，我将重新发布我在 StackOverflow 上写的一个答案，这个答案是我在开发实时 Web 应用程序时需要的。
- 打开Chrome开发者工具。
- 点击“网络”选项卡。
- 点击筛选器WS（用于 WebSocket）。
- 重新加载页面，确保在“名称”列中看到您的连接。
- 点击“消息”。
现在您应该可以看到所有与 WebSocket 的通信，分为 3 列：数据、长度和时间。
如果您还有其他想与大家分享的网页开发技巧和窍门，欢迎在评论区留言 ;)
文章来源：https://dev.to/armelpingault/9-web-development-tips-and-tricks-out-of-the-blue-119i