前端开发最佳实践学习笔记1-认识前端最佳实践

认识前端最佳实践

该系列一共有 5 篇，包括《认识前端最佳实践》、《HTML 最佳实践》、《CSS 最佳实践》、《JavaScript 最佳实践》、《移动 Web 前端开发最佳实践》，是 《Web 前端开发最佳实践》（党建 著）的学习笔记，该书有些知识已经过时了或者用得非常少了，这些文章中将不会提及，比如 JQuery、兼容 IE 浏览器知识等。本篇是 《认识前端最佳实践》，帮助自己日后温故知新，也希望对其他人有帮助。

1. 前言

对于 Web 前端开发，大家认为是从 2005 年开始兴起的，2005 年以前一般的美工仅依靠 PhotoShop 和 Dreamweaver 工具就能够制作出漂亮的静态网页。2005 年以后，互联网进入了 Web 2.0 时代，Web 2.0 更注重用户的交互，用户不再是读者，同时也是作者，开始为网站贡献内容。从那以后，Web 前端开发要涉及网站开发的方方面面，从前端 UI 到和后端的数据交互都属于前端开发的范畴。

W3C 指定的标准由三个部分组成，结构标准、表现标准、行为标准。结构标准主要是指 HTML5，已于 2014 年 10 月 28 日发布了最终版。表现标准主要是指 CSS3，在不同的时间按照模块发布和升级。行为标准主要是指 ECMAScript 和 DOM，ECMAScript 已于 2015 年 6 月发布了最终版。

前端最佳实践是要做到高效的开发，高效的开发就需要有一个稳定和健壮的基础架构和设计，如果基础架构和设计不能保证我们的高效开发，则需要考虑重构来解决。

2. 前端代码重构

前端代码由于缺乏自动化测试，重构前需要充分考虑，权衡实际情况。

2.1. 最佳实践

[-] 重构的目的和范围要明确，切忌盲目修改。前端代码的重构目的主要是提高代码的可维护性、可读性和性能。
[-] 重构前一定要预估风险，如果没有足够的自动化测试，最好是先完善自动化测试代码。
[-] 最好是先易后难，循循渐进。首先修改命名、格式等不涉及具体逻辑的内容，然后考虑模块化和性能提升等与具体逻辑相关的内容。
[-] 重构过程中要持续测试，在多个浏览器中测试，确保重构的部分功能正确。切忌在大量重构后再进行测试，因为大量重构后基本很难记得重构的逻辑，也可能遗漏部分测试用例。
[-] 如果是性能提升，事先要监测网站的整体性能并量化。找出性能瓶颈。重构过程中要持续监控性能，并比对性能提升的效果。

2.2. 操作步骤

根据最佳实践指引，具体实际操作步骤建议如下：

1. 删除无用代码，精简代码

包括多余的包裹 HTML 标签，不起作用的 CSS 代码，废弃的 JavaScript 函数等。修改过程需要小心翼翼，不停查看函数和变量的上下文调用关系，以免删错代码。

2. 前端代码规范化

更改标准已经不支持的标签，使用语义化的标签，把内联的 CSS 代码放到单独的文件中调用，JavaScript 中集中定义局部变量，并把部分全局变量转换为局部变量，缩小变量的作用域。

3. 整理基础类库

重构框架选型，要切合客户需要、公司标准、团队需要，要选择团队大部分人都会使用的框架，避免因为部分人请假或岗位调整导致项目停滞。减少同类型框架、组件库的使用，避免交叉使用。统一框架和组件库，这样不仅加快了进度，还能避免各种兼容问题，团队的风格也能保持统一。

4. 前端代码模块化

按照类型分类不同的文件及存放，比如组件（components），模块（modules），服务（services），接口（APIS），常量（constants），工具函数（utils），指令（directive），管道（pipes），类型（models），拦截器（interceptor），路由（routers），功能页面（pages / views）等。从而提高代码的可维护性。

5. 提高页面加载性能

使用缓存、减少 HTTP 请求、DNS 预解析、图片延迟加载，骨架屏等方法提高页面性能，减少用户等待时间。

在前端重构中，很重要的一点步骤是框架的选型，框架选型并非只考虑单一因素，还需要考虑生态的完整性（比如状态管理、路由、编译工具）等。

3. 前端框架选型

前端框架并非根据自己喜好，自己熟悉哪个框架就选用哪个框架，有很多考虑的因素。

3.1. 客户的要求

如果我们服务的客户需要兼容自己原有的系统，便于后期好维护，则需要使用客户要求的框架。

3.2. 公司和团队的要求

有些公司有明确的要求，项目升级和新项目必须使用什么框架，比如国内 Angular 用得非常少，选择的人就不多，会用的人也很少，公司有自己的要求。团队方面，该项目组中大家只会用 Vue ，就不能另辟蹊径选择 React，这些框架没有明显的缺陷和缺点，只是不同的框架有不同的适应场景而已。

3.3. 项目的特点

如果项目的周期短，则需要使用容易上手的框架，如果是需要长期维护的项目，则需要考虑架本身的升级、扩展性等因素。

3.4. 框架的特点

选择之初需要明确框架需要支持浏览器版本，如果项目需要兼容 IE，则不能使用 Vue 3.x, 也不能使用 Angular 12+。如果团队为了规范代码，要求使用 TypeScript 语言，则 Vue 2.x 和 React 低版本也不是合适的选择。社区是否活跃，缺陷是否及时修复，官方文档是否简介易读都能够帮助开发者快速的掌握框架，这些是需要重点考虑的因素。

4. 前端代码规范

命名规范和格式规范是代码规范中最基本的规范。任何代码的混乱都是从命名和格式的混乱开始的，而意义明确的命名和规整的代码格式则提高了代码的可读性和可维护性。

4.1. HTML 命名规范和格式规范

[-] 使用语义明确的标签来表示内容是写出规范的 HTML 结构的基础，不再大量的、不加思考的使用 div 和 span 标签。
[-] W3C 建议 HTML 所有标签和属性命名都应该使用小写，属性值应该使用双引号闭合。
[-] 给关键标签加上注释性属性，例如 img 标签加上 alt 属性，能保证图片加载失败时也能显示语义，也能帮助爬虫抓取。
[-] 给 HTML 代码加上必要的注释，HTML 注释不宜过多，原则是保证代码的可维护性基础上尽量让代码简洁。
[-] 给关键的元素定义 id 和 class ，便于 CSS 和 JavaScript 交互。

4.2. CSS 命名和格式规范

[-] 多个选择器具有形同的样式声明时，每个选择器单独占一行，便于阅读和维护。
[-] 样式声明使用一些工具来排序，例如 cssbome。
[-] CSS 注释，头部的文件信息注释和解释说明注释。

4.3. JavaScript 命名和格式规范

[-] 使用小驼峰命名变量，全大写字母命名常量，类和构造函数首字母大写。
[-] 变量名语义要明确，宁愿牺牲变量长度也要语义明确。
[-] 因为 HTML 中建议使用双引号来包裹属性值，JavaScript 中建议使用单引号定义字符串，也方便包裹 HTML 模板。
[-] 使用空格、换行、行尾添加分号提高代码可读性，例如在操作符前后各使用一个空格，左大括号必须放置在一个语句的结尾处，语句后面使用分号。
[-] 添加必要注释，注释应该单独占一行，而不是和代码放在相同一行。

5. 前端代码和资源的压缩和合并

在网站构建时，一般会压缩代码和静态资源，目的是加快文件在网络中的传输，让网页以更快的速度呈现。

5.1. Web 服务器开启 GZip 压缩

HTTP 中允许客户端可以选择从服务器上下载压缩的内容，GZip 就是其中一种支持的格式。GZip 得到了大部分主流 Web 服务器的支持（Apache, IIS, Nginx）,服务器开启了 GZip 压缩后，代码文件有更小的体积，尤其是文本文件。

Web 服务器开启 GZip 压缩后，会在 Response 的 header 中增加 Content-Encoding:gzip。可以通过检查此 header 项来判断服务器是否开启了 GZip 压缩。

5.2. JavaScrip 代码压缩

JavaScript 代码压缩的原理一般是去掉多余的空格、回车、替换长变量、简化一些代码写法。UglifyJS 是一个JavaScript解析器、缩小器、压缩器和美化器工具包，用于压缩代码是一个不错的选择。

5.3. CSS 代码压缩

CSS 代码压缩原理和 JavaScript 代码压缩原理相似，也是去掉一些不必要的空格、回车、注释，同时合并一些 CSS 规则定义，让规则更简洁。

比如：

background-color: #fff;
background-image: url(image.jpeg);
background-repeat: no-repeat;
background-position: top left;

会简化成：

background: #fff url(image.jpeg) no-repeat  top left;

CSS Compressor 是一款快速、简单、免费的 CSS 压缩工具。有 4 种压缩模式：Highest (no readability, smallest size) High (moderate readability, smaller size) Standard (balance between readability and size) Low (higher readability) 。

5.4. HTML 代码压缩

压缩 HTML 代码存在争议，认为压缩的意义不大，并不会简化代码本身。网站开发时，并不是单纯的 HTML 代码，而是和服务端代码在一起，诸如 JSP，PHP 代码。压缩这类代码时，容易破坏代码。HtmlCompressor 是一款小的、快速的、非常容易使用的 Java 库，它通过删除多余的空白、注释和其他不需要的字符来缩小给定的 HTML 或 XML 源代码，而不破坏内容结构。因此，页面变得更小，加载速度更快。压缩程序的命令行版本也是可用的。

5.5. 图片资源压缩

除了代码压缩外，网页中使用最多的就是图片压缩。图片资源占比较大，压缩图片能在服务 http 传输中减少流量和服务器带宽。tinypng 是一款智能的 WebP、PNG 和 JPEG 压缩工具。

在实际开发中，前端是工程化项目，一般会使用 Webpack，Vite，Rollup 等工具在自动构建，其中包括了代码的压缩、丑化，图片等静态资源的压缩。