编程 你可能不知道的 18 个前端技巧

2025-06-12 13:15:26 +0800 CST views 171

你可能不知道的 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 建议

你可以将这些技巧在以下平台测试并分享:


总结

这些技巧不仅展示了前端技术的广度与深度,也体现了浏览器生态中的一些“彩蛋”级特性。它们可能在某些项目中派不上大用,但在调试、演示甚至娱乐开发中大有妙用。

复制全文 生成海报 前端开发 编程技巧 Web技术

推荐文章

在JavaScript中实现队列
2024-11-19 01:38:36 +0800 CST
mysql关于在使用中的解决方法
2024-11-18 10:18:16 +0800 CST
Go 开发中的热加载指南
2024-11-18 23:01:27 +0800 CST
JavaScript设计模式:发布订阅模式
2024-11-18 01:52:39 +0800 CST
imap_open绕过exec禁用的脚本
2024-11-17 05:01:58 +0800 CST
前端代码规范 - Commit 提交规范
2024-11-18 10:18:08 +0800 CST
使用 node-ssh 实现自动化部署
2024-11-18 20:06:21 +0800 CST
Go 如何做好缓存
2024-11-18 13:33:37 +0800 CST
Elasticsearch 监控和警报
2024-11-19 10:02:29 +0800 CST
`Blob` 与 `File` 的关系
2025-05-11 23:45:58 +0800 CST
Vue 中如何处理跨组件通信?
2024-11-17 15:59:54 +0800 CST
批量导入scv数据库
2024-11-17 05:07:51 +0800 CST
Go语言中实现RSA加密与解密
2024-11-18 01:49:30 +0800 CST
markdown语法
2024-11-18 18:38:43 +0800 CST
Nginx rewrite 的用法
2024-11-18 22:59:02 +0800 CST
使用Python实现邮件自动化
2024-11-18 20:18:14 +0800 CST
如何实现生产环境代码加密
2024-11-18 14:19:35 +0800 CST
GROMACS:一个美轮美奂的C++库
2024-11-18 19:43:29 +0800 CST
阿里云发送短信php
2025-06-16 20:36:07 +0800 CST
前端如何优化资源加载
2024-11-18 13:35:45 +0800 CST
MySQL用命令行复制表的方法
2024-11-17 05:03:46 +0800 CST
Manticore Search:高性能的搜索引擎
2024-11-19 03:43:32 +0800 CST
程序员茄子在线接单