12个Web开发工程师会犯的错误，有你吗？

英文 | https://blog.bitsrc.io/12-mistakes-newbie-web-developers-make-beafb9d8a497

翻译 | web前端开发

当我们不熟悉Web开发时，我们所有人都会犯一些错误。这些犯的错误可以成为我们学习的资源。

今天，我们一起来讨论一下关于Web开发工程师会犯的一些常见错误以及如何避免它们。

现在，让我们开始吧。

1、输入验证不完整

许多新手开发人员误以为只有HTML和JavaScript验证才足以进行用户输入验证。

毕竟，用户是人类，因此他们在填写信息（例如手机号码或电子邮件地址）时可能会犯错误。

这就是为什么开发人员使用前端验证来防止他们犯此类错误的原因。最新的前端框架使实施客户端验证变得非常容易。

因此，大多数时候，新手开发人员仅在客户端进行输入验证。

但是，通过禁用JavaScript，可以轻松地绕过这些客户端验证。因此，也有必要对用户输入实施服务器端验证。

如果你尚未进行服务器端验证，则你的应用将很容易受到诸如SQL Injection之类的黑客的攻击，该攻击在Web应用程序安全风险排名第一。

因此，如果你要接受任何类型的用户输入，请始终确保在客户端和服务器端都进行验证。

由于共享组件是独立使用和维护的，因此双方（客户端和服务器）的开发人员都可以更轻松地维护它们并保持同步。这样可以确保验证规则在两端都相同。

2、跨浏览器不兼容

在大多数情况下，开发过程都有严格的时间表。结果，开发人员在进行测试应用程序时往往只使用一个浏览器。如果你以后有时间在跨浏览器中对其进行测试并解决问题，那没关系。

但是，如果你没有这么多的时间，那么在开发过程中，最好在跨浏览器中测试应用程序。

这是不可以忽略的东西。

你至少要在三款以上的主流浏览器（例如Chrome，Firefox和Microsoft Edge）中测试你的应用程序。同样的页面，在Chrome中没有问题，但是在Firefox中可能会出现很多问题。

所以尽可能的让你的Web应用程序在跨浏览器预览是也保持友好。避免使用特定的浏览器代码。

3、过度使用图书馆

在你的应用程序中，使用许多库会增加分发包的大小，并增加应用程序的构建时间，这最终也会增加页面加载时间。

因此，将许多npm软件包添加到Web应用程序时要小心。如果你可以花很少的时间编写代码，同时可以替代库能完成的工作，则一定避免使用库，手写源码。

使用库时，请注意上次提交日期以及该库具有的GitHub star数量。如果是不维护库，在应用程序中使用它，可能会有安全漏洞，存在安全隐患。

大多数开发人员使用库，是为了让工作变得更轻松，但请记住，有时它们会使难度变得更大，因此，请明智地选择它们。

4、从一开始就不遵循响应式设计

新手开发人员经常会犯的另外一个错误，就是开发之初就没有考虑其Web应用程序的响应式设计。

根据需求，不同的应用程序可能具有不同的断点，并且必须在开发过程的开始时确定。

有了移动优先，将为你后面的开发需求打下基础。并且有了响应式开发设计，有助于加强平板电脑和台式机的设计。移动优先设计消除了不必要的用户界面装饰并改善了用户体验。

5、跳过图像优化

优化图像大小对于减少Web应用程序的带宽使用至关重要。想象一下，你的主页有五个图像，每个图像都在5MB或更大。如果用户没有足够时间等到该页面全部加载完的话，这些潜在的客户，就会随之损失。

将SVG用于徽标，图标和简单图像，而不要使用JPG或PNG。你可以使用许多免费的在线工具来优化JPG和PNG图像，因此请不要跳过图像优化。

6、忽略技术搜索引擎优化

许多新开发人员都忽略了对其开发的网站或Web应用程序进行搜索引擎优化（SEO）。这可能是由于缺乏SEO技术知识或缺乏开发时间。但是忽略它是一个很大的错误。

大多数用户使用搜索引擎查找网站。因此，从客户的角度来看，SEO非常有价值。因此，如果你以开发人员的身份忽略了SEO优化，则该网站将在搜索结果中排名以下，并且客户将不满意。

作为Web开发人员，你需要从开始构建Web应用程序的那一刻起就开始考虑SEO，而不是等到它的结束时，才开始考虑SEO优化。否则，可能会导致大量不必要的返工。这里有一些提示，供你在开发时遵循，

• 确保网站架构可爬

• 优化网站以缩短加载时间

• 使用智能反向链接

• 保持对W3C编码的验证（你可以使用W3C标记验证服务）

• 消除重复的内容

• 使用图片添加alt标签

7、过多的手动测试

开发人员不应浪费宝贵的开发时间来进行手动测试。手动测试不可重复使用，并且很无聊且耗时。作为一个新手，你很有可能最终会进行过多的手动测试。相信我，当你一次又一次填写相同的表格时，你会很快感到沮丧。

自动化测试用例的初始设置可能会花费一些时间，但是一旦自动化测试，你就可以在任何地方重用它们。这也增加了你对自动化测试过程的信心。你可以使用CI / CD管道和预提交挂钩来进行自动化测试并提高开发和测试效率。

8、不遵循网络标准

有适当的标准可以确保以通用的方式正确完成工作。Web标准可帮助开发人员创建能够以相同质量工作的应用程序。

如今，大多数开发人员都是自学成才的，大多数时候，他们是从在线教程中学习的。在大多数情况下，这些教程没有提到正确的标准，因此，你最终不了解它们。

例如，在编写HTML时，你需要使用语义元素来根据Web标准构造网页。

你可以从whatwg.org了解所有最新的HTML标准。遵循正确的标准还可以使你的应用程序更易于访问。

实施这些标准是为了使具有国际上不同类型需求的用户可以更轻松地访问Web内容。因此，请确保你遵循这些标准。

9、编写Vanilla CSS

现在是2021年，你不再需要编写普通CSS。开始使用CSS预处理程序，例如Sass，Stylus或Less。如果你使用的是React，请使用样式化组件（CSS-in-JS）。新手开发人员经常会因为学习曲线而犯下忽略它们的错误。

如果尚未使用CSS预处理程序，例如Sass / Stylus / Less，请开始使用。

与Web应用程序中的普通CSS相比，使用CSS预处理器或样式化组件有很多优点。CSS预处理器和样式化组件都允许你维护干净的代码体系结构。你可以使用更少的代码来进行更多的样式设计，从而提高开发效率。

以Sass为例，它提供了嵌套，因此你可以使用嵌套的语法和有用的函数，例如颜色处理，数学函数等。你也可以使用Sass来定制Bootstrap，因为它也是用Sass编写的。同样，样式化组件具有增强的可重用性和高一致性。样式化组件将消除你对覆盖全局作用域选择器的担心。因此，是时候继续编写普通CSS了。

10、在HTML文件中编写CSS和JS

这是本书中最古老的错误之一，但有开发人员仍然在这样使用。有时是因为这是当时比较容易做的事情，但是容易做的事情并不总是正确的。这是一种不好的做法，会使你的代码杂乱无章，并且很难测试和调试。安全漏洞和许多其他问题可能会发生。

始终编写JavaScript和CSS来分隔文件并维护适当的项目体系结构。

11、忽略代码格式和注释

如果你看到一组没有缩进的JavaScript代码行，无用的空格，无用的换行符和不良的命名约定，你会是一种什么样的体验？

但是，新手开发人员很有可能会这样做，不写注释，很多无用的空格，换行符，没有意义的命名等等。

而经验丰富的开发人员不会这样做，因为他们知道查看格式不正确的代码有多少麻烦。

所以，建议新手去了解一下有关所使用语言的正确命名约定，在命名函数或变量时，使用正确的拼写以及在IDE中使用自动代码格式化工具。

有经验的开发人员需要遵循良好的编码习惯，在代码中添加有意义的注释。添加注释的目的是为了记录你的代码，以便将来其他开发人员，甚至你自己都可以轻松理解这些代码。你可以使用注释来定义变量，函数，类名以及代码的高级功能。

遵循正确的格式设置和注释操作，会让你查找代码中的错误也变得更加容易。

12、过度依赖jQuery

不再依赖jQuery的主要原因是，jQuery可以做的任何事情，纯JavaScript或TypeScript都可以做得更好，更快。

今天你肯定会使用Vue，React或Angular之类的框架和库，因此你不需要过度依赖jQuery。添加jQuery只会使你的应用程序更重。

不依赖jQuery的另一个原因是，你将很难适应新的框架，因为它不使用通用语法，并且具有一些不同的DOM实现。

我并不是说你根本不应该学习jQuery，因为许多项目仍在使用它。但是，你绝对不可过度依赖它，如果可以的话，请停止依赖JQuery。

最后的想法

在文中，我们讨论了新手开发人员大多数时候会犯的12个常见错误。避免这些错误将有助于你成为更有效率的开发人员并开发更好的应用程序。希望本文能帮助你将来避免这些错误。

这就是本文的全部内容，感谢您的阅读，并祝您编程愉快！

本文完〜