每个前端开发者都应该提升的 5 项技能

更新日期: 2022-01-06阅读量: 78标签: 技能

这些技能不仅能帮助你构建出优秀的 Web 应用,还能对你职业生涯的提升有帮助。

通常程序员都是为各种类型的软件项目进行开发工作。当下在基于云的软件项目中,更多的程序员是致力于 Web 应用的开发。Web 应用的架构一般是由服务端(API 服务)和客户端(浏览器)两个相互交互的部分组成。而我们都知道,客户端主要是用来给用户呈现内容。

早期的 Web 应用客户端都是很轻量的,也就是说,在以前的 Web 应用客户端中处理的业务逻辑比较少。而现在,人们一直致力于构建诸如单页面应用(SPA)的富客户端应用,在这样的富客户端应用中,客户端所包含的业务逻辑在数量和复杂度上都丝毫不亚于服务端。

因此,在现代的 Web 应用开发行业中,就需要聘用更多的前端开发人员来完成客户端的开发工作。现代的前端开发者大部分都是在诸如 react, Angular, vue, Svelte 等框架上使用 JavaScript 或 TypeScript 进行开发工作。当然也有些程序员会使用架构类似于微前端模式的内部框架进行开发工作。

在我 10 多年的 Web 应用开发工作中,我发现下面这些技巧有助于提高前端开发人员的职业生涯。

一、在前端框架中运用 MVVM 模式

当下我们正处于通过使用用户电脑的计算能力完成 Web 应用业务逻辑执行和交互内容渲染的时代。在早期 Web 应用中,开发人员将所有的业务逻辑都放在服务端执行,客户端则只负责内容渲染。但是现在更多的 Web 应用通过将 90%左右的业务逻辑放在客户端执行来满足离线应用等需求。

虽然现代的前端框架给开发人员提供了各式各样的开发模式。但所有主流的框架都对使用 MVVM 模式进行编码提供了支持。例如:Angular 将 View 和 ViewModel 分离在 2 个独立文件中(一个 html 文件和一个 TS 文件),react 则将 View 和 ViewModel 以组件的形式嵌入在一个 jsX 文件中。

掌握常规 MVVM 模式的知识有助于你快速上手任何前端框架、编写出简洁的 UI 控制程序和可测试的代码。一些开发人员可能会认为 React 既不是 MVVM 也不算 MVC,它只是一个用来操作 View 的库。然而,它却让开发人员以 MVVM 的模式编写代码。因此掌握 MVVM 开发模式,有助于开发人员判断哪些代码应该写在 View 中,哪些代码应该写在 Controller 中。

二、遵循一般可用性原则

一些在意用户可用性的公司,会聘请 UI/UX 工程师参与到前端开发工作中,甚至有些公司还会成立 UX 团队,专门用于提高公司产品的可用性。通常,UI/UX 工程师的主要工作是原型设计、可用性测试、csshtml 编写。然后,大多数公司的前端开发人员也会在工作中使用 css 和 HTML。

因此,对于前端工程师而言,不管团队中是否有 UI/UX 工程师,掌握一些一般可行性原则,对其工作都是很有帮助的。例如:你不再需要问 UI/UX 团队,一个确定按钮应该放在左边还是右边。一般可行性原则可以使我们的 Web 应用更加产品化,更加用户友好,更加凸显为用户考虑。

想象一下,每当你开始一个前端开发任务的时候,就需要考虑设计一致性、组件分类、元素排序、颜色、文本尺寸、文本样式、动画、响应设计等因素。然后,大多数应用的原型都没办法全部涵盖。因此,非常有必要花时间学习下一般可用性原则。

三、编写简洁的异步代码

使用 JavaScript 机可以写出同步代码也可以写出异步代码。众所周知,js 是单线程的。因此下面这段代码就会让浏览器卡顿几秒。

for(let i = 0; i < 10000000000; i++);

所以我们需要高效利用 JavaScript 的线程机制。出于这个原因,大部分浏览器 API 的设计要么是基于事件机制要么是基于 promise 的异步机制。例如,当你使用 JS 创建一个 WebSocket 链接的时候,JavaScript 不会等待链接真正建立完成,就像下面代码展示的那样:

let ws = new WebSocket('ws://localhost:80'); // 创建ws链接//ws.send('Hello') will fail // 如果这里执行消息发生,会失败掉,因为ws链接此时还未完成ws.addEventListener('open', () => {  ws.send('Hello') // works});

因此我们需要订阅不同浏览器在不同时间执行的事件,这导致我们的 JS 代码变得非常复杂,所以要编写简洁的异步代码还是比较困难的。在处理浏览器事件的时候,部分初级工程师倾向于使用 setTimeout 函数的延迟执行来处理,而不使用合理的事件处理函数。这样就会导致在诸如浏览器、弱网、低端设备等不同客户端上,相同的代码会出现各种各样非预期的行为。

所以,尽可能将事件的处理函数放在一个独立函数体内,避免使用随机延迟函数处理事件回调,在应用上下文退出的时及时清除事件处理函数,不要使用老的回调模式,使用 async/await 模式(如果非要使用,请使用 promise 转换下),避免在行内事件处理中添加业务逻辑。

除此之外,经常练习编写简洁的代码是编写简洁的同步代码的秘诀,下面的文章阐述了每个程序员都可以写出简洁的代码。

软件项目的 5 个简洁代码实践:https://betterprogramming.pub/5-clean-code-practices-for-every-software-project-479443b31c3c

四、熟悉浏览器 API 是 Web 应用开发的必要条件

老版本的浏览器提供了基本的 DOM 操作 API。后来,由于 JavaScript 的流行,W3C 引入了许多现代 Web API。因此现在我们可以通过使用客户端存储、原生 HTTP 客户端、语音合成、消息通知等 API 来构建更加用户友好的 Web 应用。与此同时,现代浏览器在 DOM 操作和渲染上的支持上也比以前更加的智能和全面。

例如,以前我们并没有很好的方法来处理 DOM 元素尺寸变化的事件,而现在我们只需要使用 ResizeObserver API 就能完成。在处理 RESTful 数据请求上,现在我们可以使用更轻量的 Fetch API 完成,而不再需要使用老的基于 XHR 的第三方库(没错,Axios 也是基于 XHR 的)。

因此,在说“这个在用户浏览器中是无法实现的”这句话之前,我们最好先查看下最新的浏览器 API。现在我们可以利用 WebAssembly API 在客户端浏览器中运行一些高 CPU 消耗的任务。同时我们还可以利用 web workers 编写多线程的 JavaScript 操作。现在几乎没有人使用 IE11 访问现代的 web 应用了,所以在使用正式阶段(非试验阶段)的 web api 时,不必考虑再三。

五、理解前端的局限性

不知道你是否关注过慢而臃肿的 Web 应用程序?由于诸如冗余 UI 元素、静态资源未做 CDN 加速、沉重的第三方库或框架等原因,Web 应用通常会变的慢而臃肿。与此同时,如果你将大量的业务逻辑放在客户端执行,也会导致 Web 应用渲染的比较慢。在不阻塞 JS 线程的情况下,将一些数据的排序和筛选放在客户端是没问题的,否则就需要将这些数据处理的操作放在服务端或者数据库。

虽然 JavaScript 通过非阻塞操作提供了一种类似并行的机制,但一个浏览器实例在同一时间点是不能同时完成 2 个 JavaScript 操作的,因此大量的数据操作会必然会让你的 Web 应用变的很慢。除此之外,过多的事件处理也会影响使 Web 应用变慢。所以需要确保事件处理的高效性,而且在应用上下文退出的时候,也要及时清理事件处理函数。

相对于基于云计算的后端服务,客户端的资源是非常有限的。现在,人们依然在使用低端或中端的终端设备访问互联网。因此,一旦你在客户端实现了比较重的功能时,就需要关注 Web 应用程序的内存占用描述文件。例如:下面的内存占用描述文件给出了 YouTube 在视频播放期间,其内存使用的信息。只需将下面的内存使用统计数据与您正在构建的 Web 应用程序的内存使用情况进行比较即可。


原文链接: 5 Skills That Every Frontend Developer Should Improve

站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/11006

PHP程序员要掌握的技能

第一点就要提 Composer ,自从 Composer 出现后,PHP 的依赖管理可以变得非常简单。程序内依赖一些类库和框架,直接使用 Composer 引入即可,通过使用 composer update 安装依赖的包

一个web前端工程师到底需要掌握哪些技能?

对于前端基础需要学习哪些内容,之前文章已经有写过不少了,本篇重在谈论:作为一名前端想要晋升,需要什么条件?现在在用 React,要不要也学学 Vue?有必要学习 Node.js/Flutter/ 函数式吗?

程序员最重要的技能:知道什么时候不写代码

本文指出大多数程序员都容易犯下的错是,因为对编程的兴奋,不知道什么时候应该对编码说“不”。程序员需要知道什么时候不需要编码,并从项目中删除所有不必要的代码,这将让工作变得更容易,并使软件寿命更持久

程序员必备的5个工作技能

咱们程序员不光要提升技术能力,也要培养自己的工作技能,拥有高质量的软技能与掌握牛X的技术一样重要。聊几个重点的:时间管理任务分解、偷懒、知道什么时候休息

程序员请掌握这些核心生存技能

大咖你好,作为一个编程初学者,有什么需要注意的?以上是一个读者流年似水的提问。我把他的问题置顶了,但一直没想好怎么回答,因为问题太过笼统了。后来,他也可能意识到了这一点,就又给我发了一条微信:

程序员每天都在使用的6个惊讶的软技能

如果你想要开启作为web开发人员的职业生涯,那么你需要涉及的不仅仅是知道如何写代码。有一些通用的软技能几乎可用于每个领域——包括技术行业。

12个提高 JavaScript 技能的概念!

JavaScript 是一种复杂的语言。如果是你是高级或者初级 JavaScript 开发人员,了解它的基本概念非常重要。本文介绍 JavaScript 至关重要的12个概念

程序员如何提高开发技能?

你只在早上9点至晚上5点间编码,却担心这样不够好吗?你看见其他的程序员工作于个人项目或开源项目,参与编程马拉松,并花费所有的业余时间编写软件了吗?你可能会认为只在自己的工作时间编码

前端程序员被聘用的13个开发技能

这些日子,开发人员掌握JavaScript总不会错。JavaScript能力是目前为止被高层执行人员和招聘人员誉为最频繁的追捧技能。JavaScript已被证明是当今市场中高度可移植和宝贵的技能

新手程序员必备10大技能

如果你已经有一段时间的编程经验,或者正准备学习编程,那么可能会考虑的是:怎样才能成为一名优秀的程序员?计算机专业的毕业生如何为软件开发和编程职业生涯做准备?职场对于初级开发人员有哪些期望?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!