跳到主要内容位置

前端34

查看所有标签(分类)

我是如何从 Java 工程师转型成为前端工程师的

张旭乾

前端作为比较新的技术岗位,涉及范围广泛,市面上也没有成体系的、适用于所有人的学习方法。这篇文章,将分享一下我转型成为前端工程师的经历,以及我在学习前端开发过程中,遇到的问题和总结出来的一些经验,希望对你有所启发。

前端工程师的技能要求

先看一下前端工程师需要掌握哪些技能。 综合大、中、小企业的前端工程师技能需求,实际上前端工程师的职能包含以下职业中的 1 种或多种:

  • 网页开发工程师
  • 网页设计师(UI)
  • 用户体验工程师(UE)

最重要的职能是网页开发,包括小程序、APP 等跨端应用界面的开发,虽然它们实现的技术不同,但本质上还是做页面。

前端工程师必备的技能有

  • 使用 HTML + CSS,精准的还原设计稿,制作符合要求的页面。
  • 使用 JavaScript 给页面添加交互,懂得 DOM 操作和 ajax 请求。
  • 掌握 React 或 Vue 等主流框架的一种或几种,并了解随着这些框架的工程化,所牵涉的一系列工具(不同工程需要不同的工具,这里列出常见的), 例如:
    • Node.js 与 npm。
    • Webpack、SnowPack、Vite 等打包工具。
    • Create React App、Vue CLI、Vite 等脚手架。(Vite 既包含脚手架,也包含打包工具)
    • Gulp、Grunt 等自动化工具。
    • SASS/LESS 等 CSS 预编译工具。
    • styled-components、emotion 等 CSS-In-JS 库。
    • ESLint 语法检查工具。
    • Jest、mocha 等测试库。
  • 兼容性调整,利用 CSS hacks,或 JS Polyfill,实现跨浏览器页面表现一致。
  • 性能优化,减少文件体积,减少请求次数,延迟加载图片和脚本等。
  • SEO 搜索引擎优化,提高网站在搜索引擎的排名。

其他的一些框架或技能,如果工作要求,也需要掌握:

  • SSR 服务端渲染框架,例如 Next.js(React)、Remix.js (React)、Nuxt.js(Vue)。
  • SSG 静态网站生成器,例如 Next.js、Gatsby、VuePress 等。
  • TypeScript。
  • GraphQL。
  • PS/Sketch/Figma,能根据需要进行切图,或者自行设计页面。

下面这些技能不是必须的,但是如果能掌握,可以提高工作效率、跟后端或设计师沟通的能力,以及求职升职的竞争力:

  • 网页设计,了解设计基本原则。
  • 用户体验设计,了解网页的动效、辅助功能对用户体验的影响。辅助功能(可访问性)在国外比较重视,目的是方便有阅读障碍的人士,使用屏幕阅读器进行网站浏览。如果你想去外企,这些技能是必须要掌握的。
  • Docker,了解如何把前端项目构建为 docker image,会编写简单的 docker file。
  • 后端语言、框架、数据库,任选一套,例如 Java + Spring + PostgreSQL,Express + Node.js + MongoDB 等,了解 RESTful API 开发过程。

乍一看要掌握的有很多,

配置 Vite ESLint VSCode 语法检查教程

张旭乾

使用 Vite 创建前端项目的时候(例如 Vue 3.0 项目)不会自动添加 ESLint 的配置,但 ESLint 又是维护良好代码规范和方便团队合作的重要工具,所以几乎在每个前端项目中都有 ESLint 的存在。这篇文章我们看一下:

  • 如何给 Vite 创建的项目配置 ESLint
  • 集成 ESLint 到 VS Code 中
  • 避免 ESLint 和 Prettier 冲突。

什么是 ESLint

ESLint 是一个用于检查 JavaScript 代码的工具。由于 JavaScript 的语法松散,并且是即时编译的语言,所以在写代码的时候很容易出现错误,这些错误只能在运行的时候才能够发现,并且难以确定具体的位置,这样就让开发的效率大大的降低。

而 ESLint 可以让我们在编写的代码的时候,就检查语法错误,提前发现 BUG,例如拼写错误。它还可以自定义代码规范,这样在团队合作开发的时候,写出风格统一、清晰的代码,使得代码更容易阅读和维护。

使用 HTML 原生 kbd 标签显示快捷键样式

张旭乾

在编写技术文档的时候,我们经常会给用户展示一些常用的快捷键,那么在 HTML 中,我们可以使用原生的 <kbd> 标签来表示一个按键,它也是 HTML 语义化的标签之一,相比于使用 <div> 等通用的、无意义的标签,使用语义化的 <kbd> 可以直接知道这是代表按键的元素。

如何使用 kbd

<kbd> 是一个行内元素,跟 span 类似,每个按键都放到一个单独的 <kbd> 标签即可,例如下方示例:

如何在 Vite 2.0 项目中导入环境变量

张旭乾

环境变量是在开发中,用于设置可配置的信息。例如在前端开发中,我们可以配置 API_KEY、后端服务器地址等。Vite 2.0 支持方便的设置环境变量,这篇文章我们来看一下如何在 Vite 2.0 创建的项目中,创建和导入环境变量。

Vite 2.0 创建的项目中,默认有下面 4 个默认的环境变量:

配置 Vite 2.0 项目启动后自动打开浏览器

张旭乾

使用 Vite 2.0 创建的项目,默认不会自动打开浏览器。假设我们运行下面的命令启动 Vite 开发服务器:

npm run dev

命令行中会提示访问 http://localhost:3000 这个链接,但是并不会帮我们自动打开浏览器。我们还得手动复制 URL 到浏览器打开,或者使用 ctrl/command + 鼠标左键 来打开链接。

那么要如何让 Vite 2.0 创建的项目,在启动之后自动打开浏览器呢?

CSS 如何隐藏滚动条,但不影响内容滚动

张旭乾

使用 CSS 隐藏滚动条,如果直接使用 overflow: hidden 会导致内容不能滚动,要想使用 css 隐藏滚动条,但不影响内容滚动,这里有两种方法:

  • 使用 padding 把滚动条移出浏览器视口。
  • 使用 ::webkit-scrollbar 伪元素选择器(简单,但兼容性不好)。

下面分别来看一下这两种方法。

前端组件化开发的 7 条经验总结

张旭乾

自从 2010 年第一份工作接触了前后端半分离的开发方式之后,在后面的这些年里,对前端的组件化开发有了更全面一点的认识,组件化在我们的前端开发中,对提高开发效率、代码的可维护性和可复用性有很大帮助,甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码,你可以按照实际情况应用到 React 或 Vue 的项目中。

前端组件化发展历史

在讨论组件化开发之前,我们先看看前端组件化开发的发展历史。网页开发刚起步时,并没有『前端』这个概念,更不用提组件化了。当时,网页只是作为可以在浏览器中浏览的富文本文件,开发网页就是使用一些标签让浏览器解析并显示。受制于 HTML 只是描述式的语言,网页中的代码没有办法复用,即使是类似的页面,都需要复制粘贴大量的重复代码:

Vite 配置代理 Proxy,避免跨域和重复编写url的问题

张旭乾

我们在编写前端项目的时候,经常会遇到跨域的问题,当我们访问后端 API 的 URL 路径时,只要域名、端口或访问协议(如 HTTP 和 HTTPS)有一项不同,就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名,例如 https://example.com/api/some_end_pointhttps://example.com/api/other_end_point,针对这两种情况,可以直接用同一个配置来解决,即代理配置。 ​

不管是 Vite 还是 Webpack,这些打包工具都支持设置前端代理,它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址,这样前后端就视为使用了相同的域名、协议和端口,就避免了跨域的问题,还能避免繁琐的反复编写域名。

Nginx 教程:如何在 Ubuntu 20.04 下安装并配置 Nginx

张旭乾

我们前端工程师在开发完前端项目,并把它打包成静态的网站之后,需要上传到服务器上,才能让互联网上感兴趣的用户来访问。我们之前在阿里云购买了一台远程服务器,它现在还不能用来让用户访问网站,因为静态的 HTML 文件是通过 HTTP 协议来发送到用户的浏览器上的,那就需要在服务器里面安装一个服务器程序,来处理 HTTP 请求,并把我们的静态网站发送到用户的浏览器上。 常见的服务器程序有:

  • Nginx。
  • Apache。
  • Tomcat。
  • IIS。等等

如何购买阿里云服务器搭建个人网站

张旭乾

阿里云

在做完网站之后,我们需要把它部署到服务器上。服务器就是一台远程的虚拟电脑,在它上面安装服务器程序后,可以把我们部署的网站呈现给访问网站的用户。比较专业且大型的服务器提供商有:

  • 阿里云。
  • 腾讯云。
  • 华为云等。

它们的服务基本上都差不多,这里就以阿里云为例来看一下,如何购买一台适合自己的服务器。 选择服务器最重要的是 CPU、内存和带宽,需要根据网站的用户量、所占的空间(例如图片、数据的大小)来选择对应的配置。

  • 如果性能太差,就无法应对大量用户的访问,比如说 1000 人同时访问。
  • 如果带宽比较小,对于大访问量也会造成页面响应延迟。

假如你要搭建的是个人网站、博客之类的,那么可以选择一个比较基础的配置,这样也比较便宜。