6 个前端新手常犯的错误,以及如何避免他们

F2E 前端

学习 web 开发令人敬畏。有太多的资源和教程,可能很快就会使你不知所措。对于 web 开发的初学者来说,学习要关注的最佳实践和技术通常是很困难的。因此,我们将研究初学者所犯的六个常见错误以及如何避免这些错误。

通过学习如何避免这六个错误,你将踏上给未来招聘人员留下深刻印象并获得第一份工作的道路。

依赖 jQuery

jQuery 是一个 JavaScript 库,可为 DOM 操作,事件处理,动画等创建抽象层。

许多开发人员从误解认为 jQuery 是 JavaScript 的简化版本开始了他们的前端之旅。大多数人没有意识到的是,jQuery 不能替代 JavaScript,而依靠 jQuery 可能会严重影响你成为前端开发人员的能力。

许多招聘人员甚至可能将 jQuery 视为应聘者的障碍,因为这可能缺乏对核心 JavaScript 概念的理解。因此,如果你选择学习 jQuery,则一定不要将其用作向 Web 应用程序添加行为的依赖。

推荐: 对 JavaScript 了如指掌。Kyle Simpson 有很多很棒的(免费)在线书籍可用于学习 JavaScript 深入浅出

依靠 JavaScript 框架和库

React, Vue, Angular, 还有其他! 当前这些是 JavaScript 社区中的一些热门框架和库。

虽然要具备流行 JavaScript 框架和库的知识和使用能力是很有市场价值的技能,但你还必须具备良好的 JavaScript 知识。如果你不了解 JavaScript 的基础,那么你将永远无法真正了解这些框架的内部功能实现原理。有些人通过从基础知识入手,逐步学习到框架,从而学得最好。另外有些人则可以通过深入研究框架或库并掌握基础知识来学到最好。无论哪种方法适合你,都要去做!不要忘记,JavaScript 的知识对于成为一个成功的 Web 开发人员来说是至关重要的。

建议:建立强大的 JavaScript 基础。这将帮助你击败技术面试的问题。如果你了解 JavaScript 的核心知识,那么在框架或库中工作就不会有问题。

如果不确定如何开始学习 JavaScript,请查看我的上一篇博客文章关于如何开始学习的知识。

依赖 Bootstrap

Bootstrap 是用于构建网站的UI框架。许多开始使用 Bootstrap 的开发人员都认为 Bootstrap 是一种样式化 Web 应用程序的简便方法,尽管它在特定情况下很有用,但它不应取代你对 CSS 和响应式 Web 设计的了解。

在小型 Web 应用程序中包含 Bootstrap 可能会对性能产生影响。自己编写 CSS 代码在加载时要容易得多。与任何 UI 框架相比,招聘人员更希望看到你对 CSS 的了解。

建议:学习 CSS 中的 Flexbox 和 Grid 以了解响应式布局 CSS 的基础知识,一旦你掌握了 CSS,请学习 Sass。如果你在设计应用程序时遇到问题,请转到 dribbble 获得一些设计灵感,或查看 Wix 和 Squarespace 上的模板。

你的代码不是模块化

确保你的代码是模块化的非常重要;不要将所有内容都放入一个 HTML 文件中。将 HTML,CSS 和 JavaScript 合并到一个文件中不仅是一种不好的做法,而且杂乱且难以测试。

建议:将你的 JavaScript 分解为一个外部文件。这使你可以将视图和功能分离。一旦你对 JavaScript 感到满意,我建议你学习 本地 web 组件

这将大大增强你的项目体系结构,并使编写单元测试更加容易。你还可以考虑使用 JavaScript 框架或库,例如 React 或 Vue。两者都使得实现模块化组件变得非常容易。

不使用语义化的 HTML

在我评估应聘人的档案和项目时,我经常注意的一件事是是否过度使用 <div> 和 <span>。你应该始终使用语义化的 HTML5 元素。为什么?因为可以容易理解。

建议:真正了解你可以使用的语义元素。 了解如何创建标记层次结构。此外,了解 web 可访问性 是一项很好的技能,可以打动未来的招聘人员。

不学习响应式设计

如果你要开始你的 web 开发之旅,那么必须具备响应式设计技能。大多数网络冲浪都是在移动设备和平板电脑上完成的,因此我们的网站必须能够响应不同的屏幕尺寸。

建议:参加一两个关于响应式设计的课程。了解如何使用媒体查询来改变你的应用程序的样式。学习 CSS 中的 Flexbox 和 Grid 也是非常有用的。你甚至可能想要采取一种 移动优先 的方法。


我希望这些技巧有助于阐明一些常见的误解。请记住,我们都是从某个地方开始的,随着时间的推移,这将变得更加容易。

本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://dev.to/emmawedekind/6-mistakes-y...

译文地址:https://learnku.com/f2e/t/39028

本文为协同翻译文章,如您发现瑕疵请点击「改进」按钮提交优化建议
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!