JavaScript基础课程二十、代码规范与 Git 版本控制

本课聚焦前端开发必备的代码规范与Git版本控制，是从个人练习走向企业级开发的关键一课。代码规范保证代码风格统一、易读易维护，是团队协作的基础；Git则实现了代码版本管理、历史回溯、多人协作与云端备份，是现代开发不可或缺的工具。课程从命名、格式、注释到ESLint工具，从Git命令到流程管理，全面建立标准化开发意识。掌握本课内容，不仅能让你的代码更专业、更严谨，更能直接适配企业开发模式，提高协作效率，减少维护成本。规范与Git看似基础，却是衡量前端开发者是否专业、是否具备上岗能力的核心标准。

一、课程学习目的

1. 理解代码规范在团队开发中的重要性，养成标准化、可读性强的编码习惯。

2. 掌握JavaScript通用代码规范，包括命名、注释、缩进、语法格式等基础规则。

3. 了解ESLint自动化规范检查工具，学会基础配置与使用方法。

4. 掌握Git版本控制核心概念，理解仓库、提交、分支、推送等基础流程。

5. 能够独立使用Git完成项目初始化、提交、更新、备份等开发必备操作。

6. 建立规范化、可追溯的前端开发意识，适配企业级团队协作模式。

二、核心知识点讲解

1. 代码规范的意义

代码规范是一套统一的编码规则，用于保证多人开发时代码风格一致、易于阅读、便于维护。

规范能减少bug、降低沟通成本、提高代码可维护性，是企业开发的硬性要求。

无规范的代码会导致维护困难、扩展困难、交接困难，严重影响项目效率。

2. JavaScript 基础代码规范

命名规范

• 变量、函数、方法：使用小驼峰 camelCase ，如 userName、getWordList

• 常量：使用全大写+下划线 ，如 MAX_COUNT、BASE_URL

• 类/构造函数：使用大驼峰 PascalCase ，如 WordManager、UserInfo

格式规范

• 统一使用2个空格或4个空格缩进，禁止混用Tab

• 语句结尾必须加分号，代码块 {} 前后保留空格

• 运算符两侧加空格，如 let sum = a + b

• 每行代码长度不宜过长，过长需合理换行

注释规范

• 函数上方必须写注释，说明功能、参数、返回值

• 复杂逻辑行内注释，关键业务必须标注说明

• 禁止无用注释，注释要简洁、准确、达意

语法规范

• 优先使用 let/const，禁止使用 var

• 优先使用箭头函数、模板字符串、解构赋值等ES6+语法

• 避免嵌套过深，函数功能保持单一职责

• 关闭控制台无用打印，生产环境清除 console.log

3. ESLint 自动化规范工具

ESLint是前端最常用的代码检查工具，可自动检测不规范代码，并支持一键修复。

可配置自定义规则，与编辑器、Git、打包工具结合，实现提交前自动校验。

从根源避免不规范代码进入仓库，是现代工程化必备工具。

4. Git 版本控制基础

Git是目前世界上最主流的分布式版本控制系统，用于记录代码修改历史、多人协作、代码备份。

核心概念

• 工作区：写代码的目录

• 暂存区：提交前临时存放区域

• 本地仓库：本地保存版本的仓库

• 远程仓库：GitHub/GitLab/Gitee 云端仓库

核心流程

初始化 → 编写代码 → 添加到暂存区 → 提交到本地仓库 → 推送到远程仓库

5. Git 常用核心命令

• git init：初始化本地Git仓库

• git add .：将所有修改添加到暂存区

• git commit -m "提交信息"：提交版本并说明修改内容

• git status：查看文件状态

• git log：查看提交历史

• git branch：查看/创建分支

• git push：推送到远程仓库

• git pull：拉取远程最新代码

三、示例程序

示例1：规范的JavaScript代码写法

// 常量命名规范（全大写+下划线）
const MAX_WORD_COUNT = 50;
const BASE_API_URL = "https://api.com/word";

// 变量小驼峰
let wordList = [];

// 函数小驼峰 + 函数注释
/**
 * 获取单词列表
 * @param {Number} page - 页码
 * @param {Number} size - 每页数量
 * @returns {Array} 单词数组
 */
function getWordList(page, size) {
  // 运算符空格、缩进规范
  const skipCount = (page - 1) * size;
  // 模板字符串规范
  console.log(`开始获取第${page}页数据`);
  return wordList.slice(skipCount, skipCount + size);
}

// 类使用大驼峰
class WordTool {
  constructor() {
    this.count = 0;
  }
}

export default WordTool;

示例2：不规范代码对比（错误示范）

// 不规范命名
var a=1;//无空格、var、无注释
function getdata(){return 1;}//无空格、命名不规范
const b="test";//无意义命名

// 规范代码更易读、更专业

示例3：Git基础操作命令

# 1. 进入项目，初始化Git
git init

# 2. 添加所有文件到暂存区
git add .

# 3. 提交版本
git commit -m "feat: 初始化项目，完成单词列表页面"

# 4. 查看状态
git status

# 5. 推送到远程（先配置远程地址）
git push origin main

四、掌握技巧与方法

1. 编辑器安装代码格式化插件（如Prettier），保存时自动格式化。

2. 命名坚持语义化，不用拼音、不用a/b/c等无意义名称。

3. 函数保持单一职责，一个函数只做一件事，便于维护和复用。

4. 每次Git提交必须写清晰说明，不使用"更新""修改"等模糊信息。

5. 代码提交前执行 git status 检查，避免提交无用文件。

6. 团队开发必须使用分支，不直接在主分支上开发。

7. 规范不是约束，是提高效率、减少加班的最佳实践。

五、课后作业

基础作业

1. 按照课程规范，重写你之前写的任意一段代码，修正命名、缩进、注释。

2. 熟记JavaScript命名规范，能正确区分变量、常量、类的命名格式。

3. 安装Git，配置用户名与邮箱，使用 git --version 验证安装成功。

进阶作业

1. 初始化一个本地Git仓库，完成 add → commit → log 全流程操作。

2. 在项目中编写规范的函数注释，包含功能、参数、返回值。

3. 尝试搜索并了解ESLint基础配置，了解自动修复功能。

实战作业

1. 将你之前的Vite单词项目纳入Git版本管理，完成规范改造+Git提交，实现"规范化+可追溯"的完整企业开发流程。

---

上一课：前端工程化基础（npm + Vite）实战作业代码

代码功能说明

本实战代码基于npm与Vite搭建原生JS工程化项目，实现完整的模块化异步单词加载系统。项目通过npm初始化依赖管理，安装Vite作为构建工具，采用ES6模块化拆分请求、工具、渲染三大模块，使用async/await处理异步逻辑，支持单词查询、列表展示、错误提示等功能。代码完全遵循工程化结构，可通过npm run dev启动、npm run build打包，演示依赖管理、模块化开发、热更新、项目构建等核心知识点，帮助快速掌握现代前端工程化流程，为框架学习打下坚实基础。

注意事项

1. 运行前必须安装Node.js环境，否则无法使用npm与Vite。

2. 首次运行需执行 npm install 安装依赖，不可直接启动项目。

3. Vite项目必须在终端运行，不可直接打开HTML文件预览。

4. 模块化文件使用 import/export 语法，路径必须正确。

5. node_modules 无需上传或复制，体积过大，通过package.json恢复即可。

6. 开发使用 npm run dev，上线打包使用 npm run build，生成dist目录。

7. 修改代码Vite会自动热更新，无需手动刷新浏览器。

8. 报错优先检查依赖是否安装、命令是否正确、文件路径是否匹配。

完整实战代码（Vite标准项目结构）

1. 项目目录结构

js-vite-word/
├── index.html
├── package.json
├── src/
│   ├── main.js
│   ├── api.js
│   └── utils.js
└── vite.config.js

2. package.json

{
  "name": "js-vite-word",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

3. index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vite 单词工程化项目</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

4. src/api.js（数据模块）

// 模拟单词接口
export function fetchWordList() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { en: "apple", cn: "苹果" },
        { en: "banana", cn: "香蕉" },
        { en: "orange", cn: "橙子" }
      ]);
    }, 1000);
  });
}

5. src/utils.js（工具模块）

// 渲染工具
export function renderList(selector, list) {
  const dom = document.querySelector(selector);
  let html = "<h2>单词列表</h2><ul>";
  list.forEach(item => {
    html += `<li>${item.en} - ${item.cn}</li>`;
  });
  html += "</ul>";
  dom.innerHTML = html;
}

6. src/main.js（主入口）

import { fetchWordList } from "./api.js";
import { renderList } from "./utils.js";

// 异步初始化
async function init() {
  const app = document.querySelector("#app");
  app.innerHTML = "加载中...";
  
  try {
    const list = await fetchWordList();
    renderList("#app", list);
  } catch (err) {
    app.innerHTML = "加载失败：" + err;
  }
}

init();

7. vite.config.js

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000
  }
})

运行命令

npm install
npm run dev
npm run build

作业验收标准

1. 依赖安装、启动、打包命令均可正常执行。

2. 页面能够异步加载并展示单词列表，无报错。

3. 模块化拆分清晰，import/export语法正确。

4. 代码风格规范，符合工程化项目结构。

5. 理解npm依赖管理与Vite构建流程。

一文搞懂Git提交规范与版本管理（原理+范例+冲突处理+思维导图）