JavaScript基础课程二十、代码规范与 Git 版本控制
本课聚焦前端开发必备的代码规范与Git版本控制，是从个人练习走向企业级开发的关键一课。代码规范保证代码风格统一、易读易维护，是团队协作的基础；Git则实现了代码版本管理、历史回溯、多人协作与云端备份，是现代开发不可或缺的工具。课程从命名、格式、注释到ESLint工具，从Git命令到流程管理，全面建立标准化开发意识。掌握本课内容，不仅能让你的代码更专业、更严谨，更能直接适配企业开发模式，提高协作效率，减少维护成本。规范与Git看似基础，却是衡量前端开发者是否专业、是否具备上岗能力的核心标准。
一、课程学习目的
理解代码规范在团队开发中的重要性，养成标准化、可读性强的编码习惯。
掌握JavaScript通用代码规范，包括命名、注释、缩进、语法格式等基础规则。
了解ESLint自动化规范检查工具，学会基础配置与使用方法。
掌握Git版本控制核心概念，理解仓库、提交、分支、推送等基础流程。
能够独立使用Git完成项目初始化、提交、更新、备份等开发必备操作。
建立规范化、可追溯的前端开发意识，适配企业级团队协作模式。
二、核心知识点讲解
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四、掌握技巧与方法
编辑器安装代码格式化插件（如Prettier），保存时自动格式化。
命名坚持语义化，不用拼音、不用a/b/c等无意义名称。
函数保持单一职责，一个函数只做一件事，便于维护和复用。
每次Git提交必须写清晰说明，不使用“更新”“修改”等模糊信息。
代码提交前执行
git status检查，避免提交无用文件。团队开发必须使用分支，不直接在主分支上开发。
规范不是约束，是提高效率、减少加班的最佳实践。
五、课后作业
基础作业
按照课程规范，重写你之前写的任意一段代码，修正命名、缩进、注释。
熟记JavaScript命名规范，能正确区分变量、常量、类的命名格式。
安装Git，配置用户名与邮箱，使用
git --version验证安装成功。
进阶作业
初始化一个本地Git仓库，完成
add → commit → log全流程操作。在项目中编写规范的函数注释，包含功能、参数、返回值。
尝试搜索并了解ESLint基础配置，了解自动修复功能。
实战作业
- 将你之前的Vite单词项目纳入Git版本管理，完成规范改造+Git提交，实现“规范化+可追溯”的完整企业开发流程。
上一课：前端工程化基础（npm + Vite）实战作业代码
代码功能说明
本实战代码基于npm与Vite搭建原生JS工程化项目，实现完整的模块化异步单词加载系统。项目通过npm初始化依赖管理，安装Vite作为构建工具，采用ES6模块化拆分请求、工具、渲染三大模块，使用async/await处理异步逻辑，支持单词查询、列表展示、错误提示等功能。代码完全遵循工程化结构，可通过npm run dev启动、npm run build打包，演示依赖管理、模块化开发、热更新、项目构建等核心知识点，帮助快速掌握现代前端工程化流程，为框架学习打下坚实基础。
注意事项
运行前必须安装Node.js环境，否则无法使用npm与Vite。
首次运行需执行
npm install安装依赖，不可直接启动项目。Vite项目必须在终端运行，不可直接打开HTML文件预览。
模块化文件使用
import/export语法，路径必须正确。node_modules无需上传或复制，体积过大，通过package.json恢复即可。开发使用
npm run dev，上线打包使用npm run build，生成dist目录。修改代码Vite会自动热更新，无需手动刷新浏览器。
报错优先检查依赖是否安装、命令是否正确、文件路径是否匹配。
完整实战代码（Vite标准项目结构）
1. 项目目录结构
js-vite-word/ ├── index.html ├── package.json ├── src/ │ ├── main.js │ ├── api.js │ └── utils.js └── vite.config.js2. 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作业验收标准
依赖安装、启动、打包命令均可正常执行。
页面能够异步加载并展示单词列表，无报错。
模块化拆分清晰，import/export语法正确。
代码风格规范，符合工程化项目结构。
理解npm依赖管理与Vite构建流程。
一文搞懂Git提交规范与版本管理（原理+范例+冲突处理+思维导图）