峰华前端工程师- 让你学会前端开发

2022年7月

如何出版一本技术书籍：《JavaScript 基础语法详解》出版过程总结

软件工程师 / B站UP主

早在 2018 年开始写博客的时候，就收到过编辑的出书邀请，当时答应了要写，但出了点意外就没有写成。后来 2019 年开始做 B 站，做了几个月后又收到清华大学出版编辑的邀请，而我想把曾经的愿望实现，于是就答应了，这样出版了我人生的第一部书籍《JavaScript 基础语法详解》。现在总结一下出版过程，除了好好欣赏一下劳动成果外，也给你提供一些经验，如果哪天你也决定出书了，可能会对你有所帮助。

2022年7月

如何使用 <script> 引入 Vue 3.x 框架

峰华前端工程师

软件工程师 / B站UP主

前端 vue

在了解到 Vue 能够解决的众多问题之后，你是不是已经开始跃跃欲试了呢？那么这节课我们就看一下如何在项目中引入 Vue。引入 Vue 的方式大体有两种：

使用 <script/> 标签。
使用脚手架。

使用脚手架是比较高级的用法，这个我们在讲完组件之后再来看它怎么使用。

2022年7月

Vue.js 是什么样的框架？解决了传统前端开发中的哪些问题？

峰华前端工程师

软件工程师 / B站UP主

前端 vue

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

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

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

获取 DOM 元素。
添加事件监听。
根据事件对 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，给按钮添加事件处理：

2022年5月

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

峰华前端工程师

软件工程师 / B站UP主

前端经验

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

前端工程师的技能要求

先看一下前端工程师需要掌握哪些技能。综合大、中、小企业的前端工程师技能需求，实际上前端工程师的职能包含以下职业中的 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 开发过程。

乍一看要掌握的有很多，

2022年5月

配置 Vite ESLint VSCode 语法检查教程

峰华前端工程师

软件工程师 / B站UP主

Vite ESLint Vue 前端

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

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

什么是 ESLint

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

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

2022年1月

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