以前我们在开发网页的时候，无论是使用 jQuery 还是原生的 JavaScript，大体的步骤都是这样的：

1. 编写 HTML 页面结构，并规划哪些元素有可能会有交互，并赋予它们 ID 属性，方便后续在 JavaScript 获取对应的实例。
2. 编写 CSS 样式，对于拥有多个不同页面的网站，可能需要有多个 CSS 文件。
3. 编写 JavaScript 处理交互。

而在 JavaScript 中处理交互的时候，需要这样的步骤：

1. 获取 DOM 元素。
2. 添加事件监听。
3. 根据事件对 DOM 数据的修改，手动更新相关的 DOM 元素，例如添加新的元素，删除已有的元素等。

一个例子​

来看一个例子，假设 HTML 页面中有一个 <ul/>列表元素，展示了一些列表项，下面有一个按钮和一个输入框，可以添加新的列表项到列表中，我们来看看它的代码实现。 首先看 HTML，很简单，就是一个 <ul/>列表嵌套了 3 个默认的<li/>列表项，下边一个 input 提示用户输入新的列表项内容，还有一个按钮把内容添加到列表项：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
<input type="text" placeholder="请输入内容" />
<button id="btn">添加</button>

为了实现按钮的功能，需要使用 JavaScript，给按钮添加事件处理：

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

前端工程师的技能要求​

先看一下前端工程师需要掌握哪些技能。 综合大、中、小企业的前端工程师技能需求，实际上前端工程师的职能包含以下职业中的 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 创建前端项目的时候（例如 Vue 3.0 项目）不会自动添加 ESLint 的配置，但 ESLint 又是维护良好代码规范和方便团队合作的重要工具，所以几乎在每个前端项目中都有 ESLint 的存在。这篇文章我们看一下：

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

什么是 ESLint​

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

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

距离从美国史蒂文斯理工学院毕业已经有 4 年了，时间过的真快。此前一直从事 Java 开发的我，在学院读研的时候选择了最难的云计算相关的课，这门 CS549 《Distributed Systems and Cloud Computing》（分布式系统和云计算）就是其中之一，4年过去也忘的都差不多了，现在随着自己的爱好转行做了前端，不过以前的知识也不能全忘，说不定后面还用的到，现在回顾以前的一些学习经历吧，希望对你也有所帮助。

在选课的时候老师就提醒我，你选了两门我的课，这学期你甭想睡觉了。我想，有啥难的，还能睡不了觉，后来事实证明，觉是可以睡的，但是玩的时间是真没有了...简单的回忆一下课程内容吧，细节是真的记不清了。

最近在做一个 React + Nest.js 的练习小项目，因为目标成品应用是作为桌面端来使用的，所以数据的保存就成了一个问题，是保存到文件中还是数据库中还是其它的存储系统里？后来研究了一下，觉得存放在 sqlite3 数据库中比较合适，因为它管理起来简单，数据库的数据都保存在一个指定的文件里。

Nest.js 是什么？​

Nest.js 是基于 Node.js 的企业级开发框架，跟 Java 的 Spring 差不多，提供了 RESTful API、数据库、验证鉴权、GraphQL、微服务、WebSocket 等常见的企业级业务组件，可以说覆盖了一个应用的所有业务需求。

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

如何使用 kbd​

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

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

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

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

npm run dev

yarn dev

pnpm run dev

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

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

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

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

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

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

前端组件化发展历史​

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