别再一上来就搬框架了：这些HTML5功能能省80%代码
我以前也跟你一样。做个东西，第一反应就是开个React或者Vue。装一堆依赖，配webpack，折腾状态管理。忙了两周，项目总算跑起来了。
后来有个刚入行的同事问我：“这东西为啥非要用框架？”我一开始觉得他不懂。但回头一想，好像也没什么非用不可的理由。
我就试着用原生的HTML5和浏览器API重新写了一遍。结果你猜怎么着？代码量直接少了八成。没有虚拟DOM，没有打包工具，没有node_modules那一大堆东西。而且跑得比原来还快。
现在浏览器早就不是以前那个样子了。很多功能浏览器自己就带了，根本不需要我们额外写代码。
1. 文件上传不用找组件
以前要做文件上传，第一反应是找个UI库。其实浏览器自己就能干。
<input type="file" accept=".csv,.json">就这么一行，文件选择、格式过滤、拖拽上传全都有了。你还能直接读到文件内容：
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
const file = e.target.files[0];
const content = await file.text();
console.log(content);
});很多内部工具光靠这个就能省掉一个上传库。
2. 表单验证让浏览器自己干
以前写表单，总要手写一堆验证：邮箱格式对不对、密码够不够长、数字是不是在范围内。每个项目都复制一遍。
其实HTML5早就给你准备好了：
<input type="email" required>
<input type="text" minlength="4" maxlength="12">
<input type="number" min="1" max="50">浏览器会自动拦下错的输入，还会弹提示。而且原生验证比用JavaScript快得多，对屏幕阅读器也友好。
3. 视频音频不用播放器插件
以前要在网页里放视频，得装Flash或者Silverlight。现在一行代码搞定：
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>播放、暂停、全屏、音量，浏览器全包了。连字幕都支持。
4. 让用户直接编辑页面内容
这个功能知道的人不多，但特别实用。你给任何元素加上contenteditable="true"，用户就能直接在上面改字。
<div contenteditable="true">双击我改文字</div>配合一点JavaScript，就能把改完的内容存到本地。我拿这个做过内部的知识库，完全不用装什么富文本编辑器。
5. 自动填表提升体验
很多网站让你一遍遍输名字、地址、电话。其实加个autocomplete属性就行：
<input type="email" autocomplete="email">
<input type="text" autocomplete="name">浏览器会自动把用户存过的信息填进去。用户甚至感觉不到，但就是觉得你这个网站用着顺手。
6. Canvas让你在浏览器里画画
Canvas不光是用来画图的。图表库、图片编辑器、白板，底层都是它。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#2563eb';
ctx.fillRect(20, 40, 150, 80);就这几行，一个蓝色方块就出来了。要做数据可视化，自己画简单的图表并不难，没必要上来就用几十K的图表库。
7. localStorage存数据够用就好
很多小工具，根本用不着后端数据库。浏览器自带的localStorage就能存好几兆数据。
localStorage.setItem('用户主题', '深色');
let 主题 = localStorage.getItem('用户主题');主题设置、草稿保存、浏览记录，这些用localStorage就够了。省掉后端，省掉接口，省掉一堆麻烦。
8. Service Worker让网页断网也能用
这个稍微高级一点，但效果惊人。注册一个Service Worker，就能把网页资源缓存到本地。就算没网了，页面照样打开。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}在sw.js里把页面、样式、脚本缓存起来。下次打开，就算断网也能用。PWA就是靠这个跟原生App掰手腕的。
9. WebSocket做实时通信
以前要实时更新数据，得用Ajax轮询，又慢又浪费。WebSocket直接建立一条长连接，服务器可以随时往客户端推数据。
const ws = new WebSocket('ws://你的服务器地址');
ws.onmessage = (event) => {
console.log('收到数据', event.data);
};聊天、实时大盘、协同编辑，都靠它。很多所谓“复杂”的Web应用，关键就是这一步。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
