本课聚焦前端开发必备的代码规范与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.log3. 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 a1;//无空格、var、无注释 function getdata(){return 1;}//无空格、命名不规范 const btest;//无意义命名 // 规范代码更易读、更专业示例3Git基础操作命令# 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 langzh-CN head meta charsetUTF-8 titleVite 单词工程化项目/title /head body div idapp/div script typemodule src/src/main.js/script /body /html4. 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单词列表/h2ul; 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.jsimport { defineConfig } from vite export default defineConfig({ server: { port: 3000 } })运行命令npm install npm run dev npm run build作业验收标准依赖安装、启动、打包命令均可正常执行。页面能够异步加载并展示单词列表无报错。模块化拆分清晰import/export语法正确。代码风格规范符合工程化项目结构。理解npm依赖管理与Vite构建流程。一文搞懂Git提交规范与版本管理原理范例冲突处理思维导图
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.log3. 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 a1;//无空格、var、无注释 function getdata(){return 1;}//无空格、命名不规范 const btest;//无意义命名 // 规范代码更易读、更专业示例3Git基础操作命令# 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 langzh-CN head meta charsetUTF-8 titleVite 单词工程化项目/title /head body div idapp/div script typemodule src/src/main.js/script /body /html4. 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单词列表/h2ul; 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.jsimport { defineConfig } from vite export default defineConfig({ server: { port: 3000 } })运行命令npm install npm run dev npm run build作业验收标准依赖安装、启动、打包命令均可正常执行。页面能够异步加载并展示单词列表无报错。模块化拆分清晰import/export语法正确。代码风格规范符合工程化项目结构。理解npm依赖管理与Vite构建流程。一文搞懂Git提交规范与版本管理原理范例冲突处理思维导图
