52-【JavaScript-Day 52】告别“野路子”代码：ESLint、Prettier与Web安全入门-优快云博客

// 糟糕的命名 👎
let d; // d 代表什么？天？数据？删除？
let a = 30; // a 是什么？
function get(data) { /* ... */ } // get 什么？从哪里 get？

// 推荐的命名 👍
let elapsedTimeInDays; // 名字虽长，但清晰明了
let userAge = 30;
function fetchUserDataFromServer() { /* ... */ } // 动宾短语，意图明确

1.1.2 常量命名

对于意图上不会改变的常量，我们使用全大写下划线命名法（SCREAMING_SNAKE_CASE）。

规则: 所有字母大写，单词之间用下划线 _ 分隔。
目的: 在代码中一眼就能识别出这是一个常量，提醒开发者不要试图修改它。

// 使用 const 声明，并采用全大写命名
const MAX_LOGIN_ATTEMPTS = 5;
const API_BASE_URL = "https://api.example.com/v1";

1.1.3 类命名

对于类（Class），我们采用大驼峰命名法（PascalCase）。

规则: 每个单词的首字母都大写。
目的: 将类与其他变量、函数区分开来，符合面向对象编程的通用约定。

class UserProfile {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const currentUser = new UserProfile("Li", "Hua");

1.2 注释之道：恰到好处的解释

注释是对代码的补充说明，其核心原则是解释“为什么”这么做，而不是“做什么”。

1.2.1 何时应该写注释

解释复杂逻辑: 当一段算法或逻辑比较复杂、不易理解时。
阐述业务背景: 解释某个特定实现背后的业务规则或历史原因。
标记特殊情况或警告: 提示其他开发者注意潜在的“坑”或者临时的解决方案。

// 好的注释示例：解释“为什么”
function calculateDiscount(price, userLevel) {
  // 市场部要求：为了刺激消费，3级以上用户在此期间享受额外折上折
  if (userLevel >= 3 && isDuringPromotion) {
    return price * 0.7; // 基础折扣 + 额外折扣
  }
  // ...
}

1.2.2 何时不该写注释

如果代码本身已经足够清晰，就不要画蛇添足。好的命名胜过啰嗦的注释。

// 糟糕的注释：重复代码做的事情 👎
// 定义一个变量 i 并赋值为 0
let i = 0;

// 好的代码：自解释，无需注释 👍
let loopCounter = 0;

1.3 格式化：代码的“仪容仪表”

统一的格式化风格能极大提升代码的整洁度和可读性。

（1）缩进

使用 2 个或 4 个空格进行缩进（团队内统一即可），不要使用 Tab 键。这是因为在不同的编辑器中，Tab 的显示宽度可能不同，导致格式混乱。

（2）空格

在操作符（+, -, *, /, =, === 等）前后、逗号后、以及 if/for 等关键字后的括号前，都应加上空格。

// 糟糕的格式 👎
for(let i=0;i<5;i++){
  const result=i*2;
  console.log('结果是:'+result);
}

// 推荐的格式 👍
for (let i = 0; i < 5; i++) {
  const result = i * 2;
  console.log('结果是: ' + result);
}

（3）大括号

推荐使用“埃及括号”风格（One True Brace Style），即左大括号 { 紧跟在语句之后，不换行。

// 推荐
if (condition) {
  // ...
} else {
  // ...
}

手动保持格式一致性既繁琐又容易出错，幸运的是，我们有强大的自动化工具来解决这个问题。

二、自动化工具：你的编码“纪律委员”

现代前端开发离不开自动化工具，它们能强制执行编码规范，并在编码阶段就发现潜在错误，是保障团队协作和代码质量的利器。

2.1 Linter (代码检查器): ESLint

ESLint 是一个可配置的 JavaScript Linter。它能够静态分析你的代码，找出不符合预设规则的写法，包括潜在的逻辑错误和风格问题。

2.1.1 ESLint 的核心价值

错误预防: 捕获常见错误，如使用未声明的变量、拼写错误等。
风格统一: 强制团队成员遵循相同的编码风格，减少代码合并时的冲突和困惑。
最佳实践: 引导你使用更现代、更健壮的 JavaScript 写法。

2.1.2 快速上手 ESLint

在一个项目中引入 ESLint 非常简单：

安装:
```
npm install eslint --save-dev
```
初始化配置文件:
```
npx eslint --init
```
这个命令会引导你创建一个 .eslintrc.js (或 .json) 配置文件。你可以选择一个流行的代码风格指南（如 eslint:recommended 或 airbnb）作为基础。

一个基础的 .eslintrc.js 文件可能如下所示：

// .eslintrc.js
module.exports = {
  // 继承推荐的规则集
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 2022, // 使用最新的 ECMAScript 版本
    sourceType: "module", // 支持 ES 模块
  },
  // 配置代码运行的环境
  env: {
    browser: true, // 支持浏览器全局变量
    es2021: true,
  },
  // 自定义规则
  rules: {
    // 强制使用分号
    semi: ["error", "always"],
    // 强制使用单引号
    quotes: ["error", "single"],
    // 禁止出现未使用的变量（警告级别）
    "no-unused-vars": "warn",
  },
};

2.2 Formatter (代码格式化器): Prettier

Prettier 是一个“有主见”的代码格式化工具。它不关心你的代码逻辑是否有问题，只专注于一件事：以统一的风格重写你的代码。

2.2.1 Prettier 的魅力

零配置: 开箱即用，你几乎不需要配置。
一劳永逸: 让你从繁琐的手动格式化中解脱出来，可以配置在保存文件时自动格式化。
终结争论: "用2个空格还是4个空格？"这类争论将不复存在，一切交给 Prettier。

2.2.2 ESLint 与 Prettier 协同工作

ESLint 负责“抓坏人”（检查代码质量），Prettier 负责“整理仪容”（格式化代码）。它们是完美的搭档。为了避免它们在格式化规则上打架，通常会使用 eslint-config-prettier 这个包来关闭 ESLint 中与 Prettier 冲突的格式化规则。

# 安装 Prettier 和 ESLint-Prettier 配置
npm install prettier eslint-config-prettier --save-dev

然后，在你的 .eslintrc.js 中继承 Prettier 的配置：

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "prettier" // 确保这是最后一个，以覆盖其他配置中的格式规则
  ],
  // ... 其他配置
};

现在，你可以运行 ESLint 检查逻辑，运行 Prettier 来格式化代码，各司其职。

三、性能注意事项：让代码跑得更快

优雅的代码不仅要好看，还要高效。在日常开发中，关注一些关键的性能点，能让你的应用体验更上一层楼。

3.1 减少 DOM 操作：昂贵的“交互”

浏览器中，对 DOM 的读写操作是相对昂贵的，因为它可能触发浏览器的重排（Reflow）和重绘（Repaint）。频繁操作 DOM 会严重影响页面性能。

3.1.1 缓存 DOM 查询结果

不要在循环或函数中反复查询同一个 DOM 元素。

// 糟糕的实践：每次循环都查询 DOM 👎
for (let i = 0; i < 100; i++) {
    document.getElementById('myList').innerHTML += `<li>Item ${i}</li>`;
}

// 推荐的实践：缓存 DOM 引用 👍
const listElement = document.getElementById('myList');
let listHTML = '';
for (let i = 0; i < 100; i++) {
    listHTML += `<li>Item ${i}</li>`;
}
// 只进行一次 DOM 写入操作
listElement.innerHTML = listHTML;

3.1.2 使用文档片段 (DocumentFragment)

当你需要向 DOM 中添加多个元素时，可以先将它们添加到一个离线的 DocumentFragment 中，然后一次性将该片段添加到主 DOM 树，这样只会触发一次重排。

const listElement = document.getElementById('myList');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li); // 在内存中操作，不影响页面
}

// 所有子元素创建完毕后，一次性添加到真实 DOM 中
listElement.appendChild(fragment);

3.2 避免滥用全局变量

全局变量会污染全局命名空间，容易导致命名冲突，且难以追踪其值的变化，使代码调试变得困难。

替代方案:
1. 优先使用 let 和 const 在块级作用域或函数作用域内声明变量。
2. 使用闭包创建私有变量。
3. 使用 ES6 模块将变量和函数封装在模块内部，仅导出需要暴露的接口。

3.3 使用高效的循环

虽然现代 JavaScript 引擎优化得很好，但在处理超大规模数据集时，循环方式的选择仍有细微影响。通常，for 循环比 forEach 等迭代方法性能稍好。但更重要的是可读性，除非遇到性能瓶颈，否则应优先选择更清晰的写法。

四、基本的 Web 安全意识

编写的代码不仅要服务于正常用户，还要能抵御恶意攻击。作为前端开发者，最需要警惕的就是跨站脚本攻击（Cross-Site Scripting, XSS）。

4.1 跨站脚本攻击 (XSS) 简介

4.1.1 XSS 是什么？

XSS 攻击指恶意攻击者往 Web 页面里插入恶意 JavaScript 代码，当用户浏览该页之时，嵌入其中的 JavaScript 代码会被执行，从而达到恶意攻击用户的目的（如窃取 Cookie、监听用户行为等）。

4.1.2 一个危险的例子

假设你有一个评论区，用户提交的评论内容会直接显示在页面上。

const userInput = '<img src="invalid-url" onerror="alert(\'XSS 攻击! 你的 cookie 被窃取了!\')">';
const commentContainer = document.getElementById('comment-display');

// 极度危险的操作！
// 浏览器会尝试加载图片，失败后执行 onerror 中的恶意脚本
commentContainer.innerHTML = userInput;

4.1.3 如何防御 XSS？

防御 XSS 的核心原则是：永远不要相信用户的任何输入，并对所有需要输出到页面的数据进行适当的处理。

（1）使用 `textContent` 代替 `innerHTML`

如果你只是想把用户的输入作为纯文本显示，textContent 是最安全、最简单的选择。它会自动对所有字符进行转义，使其不被当作 HTML 解析。

const userInput = '<img src="x" onerror="alert(\'XSS\')">';
const commentContainer = document.getElementById('comment-display');

// 安全的操作
commentContainer.textContent = userInput;
// 页面上会显示字符串 "<img src="x" onerror...>"，而不会执行脚本

（2）对输出进行 HTML 编码

如果确实需要显示用户输入的富文本内容，必须对其中的 HTML 标签进行严格的过滤和转义，只允许安全的标签和属性存在。通常这需要借助成熟的第三方库（如 DOMPurify）来完成，手动实现非常复杂且容易出错。

五、总结

编写高质量的 JavaScript 代码是一项综合性的技能，它超越了语法本身，更多的是一种工程思维和良好习惯的体现。今天我们探讨了提升代码质量的四大支柱，让我们再次回顾核心要点：

可读性是第一要务：坚持有意义的命名、编写阐述“为什么”的注释，并保持一致的代码格式。代码首先是写给人看的。
善用自动化工具：集成 ESLint 和 Prettier 到你的开发流程中，让它们成为你不知疲倦的代码质量守护者，保证团队协作的顺畅。
心存性能意识：在日常开发中养成性能优化的习惯，尤其是减少昂贵的 DOM 操作和避免滥用全局变量，能为用户带来更流畅的体验。
安全底线不可破：建立基本的 Web 安全观，特别是警惕 XSS 攻击。牢记“不信任用户输入”的原则，优先使用 textContent 处理数据展示。

从今天起，让我们不仅满足于写出“能跑”的代码，更要追求编写出让自己和他人赏心悦目的“优雅”代码。这是一个持续精进的过程，也是你从初学者迈向专业工程师的必经之路。