JavaScript实训作业代码规范：变量命名与函数封装技巧

一、变量命名的核心原则与常见误区

在JavaScript实训作业中，变量命名是展现代码专业度最直观的窗口。一个优秀的变量名应当能够准确自我解释其业务含义、存储内容以及预期类型，使他人无需翻看赋值逻辑就能理解其用途。

1. 命名误区：实训作业中的高频“坏味道”

• 无意义单字母与缩写：使用 a、b、temp、data、val 等，离开上下文完全无法理解。
• 拼音与英文混杂：出现 yonghuName、getXueshengInfo 等中英文混拼，破坏阅读节奏。
• 冗余类型前缀：如 arrStudentList、strUserName 等匈牙利命名法残留，现代前端推荐使用复数或具象名词表示集合。
• 歧义状态标志：直接使用 flag、status、check 作为布尔变量，缺乏明确的肯定倾向。

2. 规范方案：清晰易懂的命名法

• 小驼峰命名法（camelCase）：用于常规变量、对象属性与函数，如 studentScore、cartItemList。
• 大写蛇形命名法（UPPER_SNAKE_CASE）：仅用于代码运行期间恒定不变的系统配置或业务常量，如 MAX_LOGIN_RETRY、API_TIMEOUT_MS。
• 布尔型变量前缀化：统一使用 is、has、can、should 作为动词前缀，如 isLoading、hasPermission、canSubmit。

二、变量作用域与声明周期：避免全局污染

实训作业中另一个频繁被扣分的重灾区是变量作用域控制失当。许多同学由于对 var、let 和 const 的作用域机制理解不透，往往在函数内直接对未声明变量赋值，导致变量隐式挂载在 window 全局对象上，引发难以排查的命名冲突与数据覆盖。

1. 声明关键字的选型基准

1. 优先使用 const：实训作业中超过 70% 的数据引用实际上在声明后不需要重新绑定。优先使用 const 可以明确传达“此引用不会被意外篡改”的语义。
2. 需要重绑定时才用 let：例如循环自增变量、计数器累加、状态切换标志等。
3. 全面弃用 var：var 存在变量提升和缺少块级作用域的缺陷，现代实训课程设计已严禁使用。

三、函数封装技巧：告别“面条代码”

实训作业中，常见的典型问题是“一个事件监听函数包揽全宇宙”。以学生成绩管理系统或购物车结算为例，初学者往往将按钮点击、表单校验、数据运算、网络请求和页面DOM刷新全部塞在一个长达上百行的匿名回调函数中。这种代码不仅排查错误极为困难，而且一旦需求发生细微改动，就需要牵一发而动全身。

1. 单一职责原则（Single Responsibility Principle）

一个函数应当只专注于做好一件事。如果一个函数既负责从DOM输入框中提取数值，又负责进行数学公式运算，还负责拼装HTML字符串并写回页面，那么它就承担了三个完全不同的职责。重构的第一步就是将这三个步骤剥离为独立的子函数：

• 数据提取层：专职获取并转换表单输入（如提取并转为数字类型）。
• 核心业务计算层：纯计算函数，不碰任何DOM元素，输入确定参数，输出计算结果。
• 视图渲染层：专职接收处理好的数据，并更新页面节点。

2. 编写纯函数（Pure Function）减少副作用

在可能的情况下，尽量将核心计算抽取为“纯函数”——相同输入永远得到相同输出，且函数内部不修改外部作用域的全局变量或DOM状态。纯函数极其稳定，不仅能直接写单测验证，还能在不同页面模块中重复复用。

3. 函数命名与参数控制

• 动宾短语命名：函数执行具体操作，命名必须以动词开头，例如 renderTable、calculateTotal、validateEmail、fetchStudentList。
• 参数尽量不超过3个：当参数超过3个时，建议重构为参数对象（Object Destructuring），既便于阅读，又避免在调用时因参数顺序不一致引发Bug。

四、实训场景重构示范：以购物车总价计算为例

下面通过一个在Web前端实训中极为经典的案例——“购物车价格汇总与满减优惠计算”，直观展示重构前后的代码差异。

1. 重构前：典型实训反面代码

// ❌ 反例：变量名随心所欲，函数承担过多职责，全局变量泄漏
var list = [
  { n: "笔记本电脑", p: 5999, c: 1 },
  { n: "无线鼠标", p: 99, c: 2 }
];

function doSomething() {
  // 未声明直接赋值，泄漏到全局
  total = 0;
  for (var i = 0; i < list.length; i++) {
    // 缩写属性，阅读吃力
    total = total + list[i].p * list[i].c;
  }
  // 魔法数字硬编码，业务逻辑杂糅
  if (total > 5000) {
    total = total - 300;
  }
  // DOM操作直接写在业务运算函数内部
  document.getElementById("res").innerText = "总价是: " + total + "元";
}

2. 重构后：规范优雅的工程化封装

// ✔ 规范实践：常量大写、结构清晰、职责分离、纯函数设计
const DISCOUNT_THRESHOLD = 5000;
const DISCOUNT_AMOUNT = 300;

const cartItems = [
  { productName: "笔记本电脑", unitPrice: 5999, quantity: 1 },
  { productName: "无线鼠标", unitPrice: 99, quantity: 2 }
];

/**
 * 计算购物车原始总金额（纯函数）
 * @param {Array<{unitPrice: number, quantity: number}>} items 
 * @returns {number}
 */
function calculateSubtotal(items) {
  return items.reduce((accumulatedSum, currentItem) => {
    return accumulatedSum + currentItem.unitPrice * currentItem.quantity;
  }, 0);
}

/**
 * 根据满减规则计算折后金额（纯函数）
 * @param {number} subtotal 
 * @returns {number}
 */
function applyPromotionDiscount(subtotal) {
  if (subtotal >= DISCOUNT_THRESHOLD) {
    return subtotal - DISCOUNT_AMOUNT;
  }
  return subtotal;
}

/**
 * 格式化货币输出（展示工具函数）
 * @param {number} amount 
 * @returns {string}
 */
function formatCurrency(amount) {
  return `¥${amount.toFixed(2)}`;
}

/**
 * 页面结算流程调度函数（主控制层）
 */
function handleCheckoutProcess() {
  const resultDisplayElement = document.getElementById("checkoutTotalDisplay");
  if (!resultDisplayElement) {
    console.error("未找到展示结算结果的DOM节点");
    return;
  }

  const rawSubtotal = calculateSubtotal(cartItems);
  const finalPayAmount = applyPromotionDiscount(rawSubtotal);

  resultDisplayElement.innerText = `结算总价：${formatCurrency(finalPayAmount)}`;
}

重构后的代码具有明显的层级：计算公式与DOM完全解耦，一旦满减规则变为“满3000减150”，只需改动 applyPromotionDiscount 及顶部配置常量，页面DOM节点逻辑完全不受干扰。实训验收时，评阅老师能一目了然看懂逻辑推导过程。

五、实训作业代码自查与交付规范清单

在提交代码给评阅系统或任课老师之前，按照以下标准化检查维度进行自审，可以有效避免因粗心丢分：

规范的代码习惯并非一蹴而就，但只要在每次完成实训题目后多花五分钟审视自己的命名与封装，养成职责分离和模块化思维，就能在实训作业答辩与代码评审中脱颖而出，为迈向企业级前端开发打下扎实的基础。