为表单已作答问题添加静态注释的优化方案咨询

你的原方案存在几个潜在问题：比如动态生成的注释内容（比如favoriteColor变化后，旧注释和新模板内容不匹配）会导致replace失效；当注释数量多了之后，字符串拼接和替换的逻辑会变得混乱，容易出现重复或遗漏的情况。下面是两种更高效、易维护的实现思路：

方案一：规则驱动的注释生成（推荐） #

核心思路是集中管理每个问题的注释生成规则，每次更新时重新生成完整注释内容，完全避免字符串替换的复杂逻辑：

// 定义所有问题的注释生成规则：key对应问题标识，value是返回注释或null的函数
const commentRules = {
  favoriteColor: () => {
    const color = self.favoriteColor();
    return color ? `Your favourite color is ${color}` : null;
  },
  // 新增其他问题只需在这里添加规则
  userAge: () => {
    const age = self.getUserAge();
    return age ? `Your age is ${age}` : null;
  },
  userGender: () => {
    const gender = self.getUserGender();
    return gender ? `Your gender is ${gender}` : null;
  }
};

// 生成最终注释的通用函数
function generateFinalComment() {
  return Object.values(commentRules)
    .map(rule => rule()) // 执行每个规则，得到注释或null
    .filter(Boolean) // 过滤掉未作答的空注释
    .join('\n'); // 用换行分隔注释，可自定义分隔符
}

// 当任意问题答案变化时，调用此函数更新textarea
function updateCommentTextarea() {
  document.getElementById('readonlyTextarea').value = generateFinalComment();
}

优势： #

• 逻辑清晰：新增/修改问题注释只需在commentRules中添加/调整规则，无需修改拼接/替换逻辑
• 避免错误：完全不用处理字符串替换的边界情况（比如内容重复、动态内容不匹配）
• 可控性强：可通过调整commentRules的键顺序，或者改用数组来控制注释的展示顺序

方案二：基于集合的激活注释管理 #

如果表单问题数量极大，重新生成全部注释的性能有顾虑，可以用集合管理已激活的问题标识，只在问题状态变化时更新集合，生成注释时遍历集合即可：

// 存储每个问题的注释生成函数
const commentTemplates = new Map([
  ['favoriteColor', () => `Your favourite color is ${self.favoriteColor()}`],
  ['userAge', () => `Your age is ${self.getUserAge()}`]
]);

// 存储当前已作答的问题标识
const activeCommentKeys = new Set();

// 单个问题状态变化时的处理函数（以favoriteColor为例）
function onFavoriteColorChange() {
  const hasColor = !!self.favoriteColor();
  if (hasColor) {
    activeCommentKeys.add('favoriteColor');
  } else {
    activeCommentKeys.delete('favoriteColor');
  }
  updateCommentTextarea();
}

// 更新textarea的函数
function updateCommentTextarea() {
  const commentList = [];
  activeCommentKeys.forEach(key => {
    const templateFn = commentTemplates.get(key);
    if (templateFn) {
      commentList.push(templateFn());
    }
  });
  document.getElementById('readonlyTextarea').value = commentList.join('\n');
}

优势： #

• 性能更优：仅在单个问题变化时更新集合，生成注释时只处理已激活的问题
• 状态明确：通过集合清晰追踪哪些问题已作答，便于排查问题

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