你可能不知道的 18 个前端技巧
作为前端开发者，我们每天都在使用各种框架和库构建复杂的应用。然而，除了这些“大招”，一些鲜为人知的“小技巧”也能提升我们的开发效率，甚至让我们在调试和优化中事半功倍。
本文为你整理了 18 个可能被忽视的前端技巧，并附上简单的演示说明，带你解锁浏览器和前端技术的隐藏彩蛋。
1. 浏览器地址栏：远不止跳转这么简单
1.1 执行 JavaScript
在地址栏输入：
javascript:alert('Hello, World!');
按下回车即可直接执行脚本！
注意：某些现代浏览器出于安全考虑会禁用
javascript:前缀，需手动补全。
1.2 执行 HTML（临时 Playground）
data:text/html,<h1>Hello World!</h1>
或者创建一个可编辑页面：
data:text/html,<html contenteditable>
Demo 👉 可以保存为
.html文件本地打开体验。
2. 让任意网页变得可编辑
在控制台执行：
document.body.contentEditable = 'true';
你就能像修改文档一样直接编辑页面内容！
3. 用 <a> 标签解析 URL
const a = document.createElement('a');
a.href = 'https://example.com/path?query=123#section';
console.log(a.host); // example.com
console.log(a.pathname); // /path
console.log(a.search); // ?query=123
console.log(a.hash); // #section
无需借助复杂 API，即可快速获取 URL 各部分。
4. HTML 元素 ID 自动变成全局变量
<div id="myDiv">Hi</div>
<script>
console.log(myDiv); // <div id="myDiv">
</script>
虽然方便，但可能造成命名冲突，请谨慎使用！
5. 协议相对的 CDN 链接
<script src="//cdn.example.com/script.js"></script>
这样资源会自动匹配当前页面的协议（HTTP/HTTPS）。
6. 隐藏鼠标光标的 CSS 恶作剧
* {
cursor: none !important;
}
可用于游戏或趣味页面，但请勿滥用！
7. CSS 模拟模糊文本
.blurred-text {
color: transparent;
text-shadow: #111 0 0 5px;
user-select: none;
}
<p class="blurred-text">你能读清我吗？</p>
8. 原生隐藏元素的方式
<div hidden>我默认不可见</div>
hidden 是语义化且轻量的隐藏方式。
9. 禁用右键与 F12（非安全，但可防止误触）
document.addEventListener('keydown', e => {
if (e.keyCode === 123) e.preventDefault(); // F12
});
document.addEventListener('contextmenu', e => e.preventDefault());
注意：这只是“障眼法”，不能真正防止源码泄露。
10. 用纯 CSS 创建三角形
.triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: red;
}
<div class="triangle"></div>
不依赖图片也能画出图形！
11. Infinity 的奇葩行为
const a = Infinity;
console.log(a === a - 1); // true
是的，无穷大减去任何值仍然是无穷大！
12. 数字调用方法的语法陷阱
1.toString(); // SyntaxError
1..toString(); // "1"
(1).toString(); // 也是可以的
JavaScript 语法的一点小魔法。
13. 阻止网站被嵌入 iframe
if (window.top !== window.self) {
window.top.location = window.location;
}
有助于防止钓鱼站点嵌入你的网站。
14. <datalist>：半开放下拉输入
<input list="fruits" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist>
结合 <input>，更灵活地提供输入建议。
15. 竖排文本（适合东亚语言）
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
}
<div class="vertical-text">你好，世界！</div>
16. 阻止文本被选中
document.addEventListener('selectstart', e => e.preventDefault());
可用于防复制场景，但不利于可访问性。
17. 一行多个表达式
let a = 1, b = 2;
(a += 2), (b += 3);
console.log(a, b); // 3, 5
逗号运算符在链式赋值中偶尔有用。
18. 使用 inset 简写定位
.box {
position: absolute;
inset: 0;
}
等价于：
top: 0; right: 0; bottom: 0; left: 0;
写得更短，看起来更清晰！
🧪 在线 Demo 建议
你可以将这些技巧在以下平台测试并分享：
- CodePen
- JSFiddle
- StackBlitz
- 或部署至你自己的 GitHub Pages 上
总结
这些技巧不仅展示了前端技术的广度与深度，也体现了浏览器生态中的一些“彩蛋”级特性。它们可能在某些项目中派不上大用，但在调试、演示甚至娱乐开发中大有妙用。