JavaScript案例

第一个案例是动态生成用户列表。假设我们从后端拿到一个用户数据数组，需要实时渲染到页面上。传统方式可能用innerHTML直接拼接字符串，但这样容易引发XSS漏洞，而且性能不佳。这里我用createElement和appendChild来实现，更安全可控。代码如下：

这段代码遍历用户数组，为每个用户创建li元素，并添加到ul列表中。关键是用了textContent而不是innerHTML，避免了脚本注入风险。如果数据量大的话，可以加上文档碎片（DocumentFragment）来优化性能，减少重排次数。

第二个案例是关于事件委托的。经常遇到动态添加的元素无法绑定事件的问题，比如一个任务列表，每个任务项有个删除按钮。如果给每个按钮单独绑事件，新加的按钮就没反应。这时事件委托就派上用场了，我们把事件绑在父容器上，通过事件冒泡来管理。示例代码：

这里监听父元素的click事件，检查点击目标是否是删除按钮。如果是，就找到对应的任务项并移除。这样即使后续动态添加新任务，删除功能也能正常工作，省去了重复绑定的麻烦。

第三个案例涉及异步数据获取。以前常用XMLHttpRequest，现在Fetch API更简洁。比如我们需要从服务器加载文章列表，并处理加载状态。代码如下：

这个例子用了async/await语法，让异步代码读起来像同步的。加载时显示旋转图标，成功则渲染文章，失败就提示错误。注意fetch不会自动抛出HTTP错误，所以需要手动检查response.ok。

第四个案例是本地存储的应用。比如记住用户的主题偏好，页面刷新后不丢失。我们用localStorage来存取值，配合事件监听实现实时更新。代码示例：

这样用户切换主题时，偏好会自动保存到本地。下次访问页面时，先从localStorage读取设置并应用。如果需要跨标签页同步，还可以监听storage事件，但这里就不展开了。

最后一个案例是防抖函数的实现。搜索框输入时，如果每次按键都发请求，会给服务器造成压力。防抖能限制请求频率，只在用户停止输入后执行。代码如下：

这个debounce函数返回一个新函数，在delay毫秒内如果重复调用，会清除之前的定时器，重新计时。这样只有用户停止输入300毫秒后，才会触发搜索操作，有效减少不必要的请求。

这些案例都是我在项目中踩过坑后总结的，可能不是最优解，但实测有效。JavaScript的魅力就在于灵活，同样功能有多种实现方式。大家可以根据实际需求调整代码，比如加错误处理或性能优化。如果有更好的写法，欢迎在评论区交流。