JavaScript创建HTML元素时的代码模块化实现及封装异常排查

封装失效的核心原因 #

• 变量作用域异常：createHtmlElements函数内部直接引用了getTopSalaries内的局部变量topFiveSalaries，跨作用域访问会直接抛出引用错误；循环变量i未声明直接赋值，会泄露为全局变量造成污染；getTopSalaries中html变量未初始化就传入函数，拼接时会出现undefined前缀。
• HTML语法错误：ul标签的id属性缺失前引号，代码写为<ul id = topSalaries">，属性值无起始引号会导致浏览器DOM解析失败；原循环拼接的li标签缺失闭合标签</li>，DOM结构不规范。
• 函数耦合度过高：封装的工具函数硬编码绑定了topFiveSalaries变量，无法复用于“渲染薪资最高单人”“渲染不同长度排名列表”的场景，完全没达到抽离复用的目的。

正确模块化实现方案 #

核心原则是拆分函数职责，所有依赖通过参数传入，函数内部不隐式依赖外部变量，严格校验HTML语法正确性。
可直接复用的实现代码如下：

// 1. 通用工具：根据传入的人员数组生成列表项HTML片段
function createSalaryListItems(salaryList) {
  let html = '';
  // 循环变量用let声明，避免全局污染
  for (let i = 0; i < salaryList.length; i++) {
    const currentPerson = salaryList[i];
    // 用模板字符串拼接，减少符号遗漏问题
    html += `
      <li class="top">
        <h2>${currentPerson[8]}</h2>
        <h3>${currentPerson[11]}</h3>
      </li>
    `;
  }
  return html;
}

// 2. 数据处理工具：获取指定数量的高薪资人员
function getHighestSalaryPeople(originData, rankCount) {
  // sortPeople为你已实现的薪资排序函数，保持原有逻辑即可
  return sortPeople(originData).slice(0, rankCount);
}

// 3. 渲染工具：将列表内容渲染到指定容器
function renderSalaryContainer(container, listData) {
  const listContent = createSalaryListItems(listData);
  // 补全属性引号，保证HTML语法正确
  container.innerHTML = `<ul id="topSalaries">${listContent}</ul>`;
}

// 业务调用：渲染薪资前五
function renderTopFive(bostonData, targetContainer) {
  const topFiveData = getHighestSalaryPeople(bostonData.data, 5);
  renderSalaryContainer(targetContainer, topFiveData);
}

// 业务调用：渲染薪资最高的单人，直接复用上述函数，无需重复写拼接逻辑
function renderTopOne(bostonData, targetContainer) {
  const topOneData = getHighestSalaryPeople(bostonData.data, 1);
  renderSalaryContainer(targetContainer, topOneData);
}

实现说明 #

• 每个函数职责单一，仅通过参数接收依赖，不存在隐式的外部变量引用，不会出现作用域报错
• 支持任意长度的薪资排名渲染，不需要重复编写循环拼接代码，复用性满足需求
• 修复了所有HTML语法问题，标签闭合、属性格式完全符合规范，不会出现渲染异常
• 所有临时变量、循环变量均在函数内部声明，无全局变量污染问题

内容的提问来源于stack exchange，提问作者Bill