DEV Community
·
前端工程新手：应停止的八件事
内容提要
前端工程新手应避免的八件事：1. 使用语义标签而非<div>和<span>；2. 不要硬编码敏感信息，使用环境变量；3. 兼容多浏览器测试；4. 从一开始学习使用Git；5. 构建可重用组件，避免重复代码；6. 关注代码风格，使用ESLint和Prettier；7. 保持清晰的文件结构；8. 采用移动优先设计。
关键要点
-
使用语义标签而非<div>和<span>，以提高可访问性和搜索引擎理解。
-
不要硬编码敏感信息，使用环境变量来保护数据。
-
兼容多浏览器测试，确保应用在不同浏览器和设备上正常运行。
-
从一开始学习使用Git，进行版本控制和协作。
-
构建可重用组件，避免重复代码，提高开发效率。
-
关注代码风格，使用ESLint和Prettier保持代码整洁一致。
-
保持清晰的文件结构，便于项目维护和导航。
-
采用移动优先设计，确保应用在各种屏幕尺寸上良好显示。
延伸解读
语义标签的重要性
使用语义标签如<header>和<footer>可以显著提高网页的可访问性和搜索引擎优化（SEO）。这不仅有助于用户理解页面结构，也使搜索引擎更容易抓取和索引内容。新手开发者应重视这一点，以提升网站的整体质量。
环境变量的安全性
在代码中硬编码敏感信息如API密钥是一个常见错误。使用环境变量可以有效保护这些信息，避免潜在的安全风险。新手应学习如何配置环境变量，以确保项目的安全性和灵活性。
多浏览器兼容性测试
许多开发者在Chrome上测试后就认为应用在其他浏览器上也能正常运行，但这往往是错误的。进行多浏览器测试可以确保应用在不同平台上的一致性，扩大用户基础，避免因兼容性问题导致的用户流失。
代码风格与工具的使用
保持一致的代码风格对于团队协作至关重要。使用ESLint和Prettier等工具可以帮助新手开发者在项目初期就养成良好的编码习惯，减少错误，提高代码的可读性和可维护性。
延伸问答
为什么前端工程新手应该使用语义标签而不是<div>和<span>？
使用语义标签可以提高可访问性，并帮助搜索引擎更好地理解内容。
如何保护代码中的敏感信息？
应使用环境变量来存储敏感信息，而不是直接硬编码在代码中。
为什么要进行多浏览器测试？
多浏览器测试确保应用在不同浏览器和设备上正常运行，扩大受众范围。
新手应该什么时候开始学习使用Git？
新手应从第一天开始学习使用Git，以便进行版本控制和协作。
构建可重用组件有什么好处？
构建可重用组件可以减少代码重复，提高开发效率。
如何保持代码风格的一致性？
可以使用ESLint和Prettier等工具来保持代码整洁一致。
