JavaScript开发中常见问题代码和相关优化Demo参考3.0

21. 不使用const和let

问题代码：

var x = 10;
if (true) {
  var x = 20; // 这里的变量声明会提升并覆盖外部的x
}
console.log(x); // 输出20

解决方案： 尽量使用const或let来代替var以避免变量提升问题。

const x = 10;
if (true) {
  const x = 20; // 不影响外部的x
}
console.log(x); // 输出10

22. 忽略浏览器兼容性检测

问题代码：

if (!('fetch' in window)) {
  console.error('Fetch API not supported');
}

解决方案： 使用Polyfill库如core-js或特定功能的Polyfill来确保跨浏览器兼容性。

import 'whatwg-fetch'; // 自动添加fetch支持

23. 直接操作DOM而不利用虚拟DOM

问题代码： 频繁地直接修改DOM元素属性或内容。

解决方案： 在React、Vue等框架中利用虚拟DOM来优化渲染过程。

// React示例
function App() {
  return <div>Hello, world!</div>;
}

24. 硬编码配置信息

问题代码： 将API端点或其他配置信息直接写入代码中。

解决方案： 使用环境变量或配置文件来管理敏感数据和可变设置。

const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3000';

25. 缺少代码格式化工具

问题代码： 不同开发者提交的代码风格不一致。

解决方案： 集成Prettier或ESLint等工具到开发流程中以自动格式化代码。

// 在项目根目录下添加.prettierrc文件
{
  "semi": true,
  "singleQuote": true
}

26. 忽视安全性最佳实践

问题代码：

app.get('/search', function(req, res) {
  res.send(`You searched for ${req.query.q}`);
});

解决方案： 使用适当的输出编码来防止XSS攻击，并验证所有用户输入。

app.get('/search', function(req, res) {
  const q = encodeURIComponent(req.query.q);
  res.send(`You searched for ${q}`);
});

27. 未处理资源泄漏

问题代码： 忘记关闭WebSocket连接或清除定时器。

解决方案： 确保在组件卸载或不再需要时清理资源。

useEffect(() => {
  const ws = new WebSocket('ws://example.com');
  // 清理逻辑
  return () => ws.close();
}, []);

28. 缺乏文档

问题代码： 代码没有足够的注释或说明文档。

解决方案： 编写清晰的注释和文档，使用工具如JSDoc生成API文档。

/**
 * 加法函数.
 * @param {number} a - 第一个加数.
 * @param {number} b - 第二个加数.
 * @returns {number} 两个数相加的结果.
 */
function add(a, b) {
  return a + b;
}

29. 性能瓶颈未识别

问题代码： 没有对关键路径上的代码进行性能分析。

解决方案： 使用Chrome DevTools等工具分析性能，并针对发现的问题进行优化。

console.time('performanceTest');
// 执行需要测试的代码
console.timeEnd('performanceTest');

30. 依赖版本控制不当

问题代码： package.json中使用了宽松的版本范围，例如^或~。

解决方案： 明确指定依赖项版本，或者使用锁文件（如package-lock.json）锁定依赖版本。

{
  "dependencies": {
    "lodash": "4.17.21" // 明确指定版本号
  }
}

3.0 - 完