Google AppScript AddOn：基于配置启用/禁用UI元素的优化方案

可以通过配置驱动的方式，将UI元素的定义、启用规则与构建逻辑分离，彻底摆脱嵌套条件语句的混乱，实现更易维护、可读性更强的代码结构。

1. 定义结构化UI配置 #

把所有UI元素的元数据和启用规则集中到一个配置对象中，清晰管理每个元素的开关、属性：

// 集中管理UI结构与启用规则
const UI_CONFIG = {
  sections: [
    {
      id: 'textSection', // 对应原判断逻辑中的标识
      header: 'Some Feature',
      widgets: [
        {
          id: 'someTextA',
          type: 'decoratedText',
          props: {
            text: "some text A",
            onClickFunction: 'myfunction.functionOne',
            topLabel: "Click"
          }
        },
        {
          id: 'someTextB',
          type: 'decoratedText',
          props: {
            text: "some text",
            onClickFunction: 'myfunction.functiontwo',
            topLabel: "Click"
          }
        }
      ]
    }
    // 可在此添加更多section配置
  ]
};

2. 实现通用UI构建工具函数 #

封装判断逻辑和组件创建逻辑，复用性更强：

// 复用原有的启用判断逻辑
function isEnabled(itemId) {
  // 替换为你实际的contains实现
  return yourExistingContainsFunction(itemId);
}

// 根据配置创建对应类型的UI组件
function createWidget(widgetConfig) {
  switch(widgetConfig.type) {
    case 'decoratedText':
      const { text, onClickFunction, topLabel } = widgetConfig.props;
      return CardService.newDecoratedText()
        .setText(text)
        .setOnClickAction(CardService.newAction().setFunctionName(onClickFunction))
        .setTopLabel(topLabel);
    // 可扩展支持其他组件类型（如button、textInput等）
    default:
      return null;
  }
}

// 构建单个Section
function buildSection(sectionConfig) {
  if (!isEnabled(sectionConfig.id)) return null;
  
  const section = CardService.newCardSection().setHeader(sectionConfig.header);
  
  sectionConfig.widgets.forEach(widgetConfig => {
    if (isEnabled(widgetConfig.id)) {
      const widget = createWidget(widgetConfig);
      if (widget) section.addWidget(widget);
    }
  });
  
  return section;
}

3. 整合构建完整卡片 #

通过遍历配置快速生成整个UI：

function buildCard() {
  const cardBuilder = CardService.newCardBuilder();
  
  UI_CONFIG.sections.forEach(sectionConfig => {
    const section = buildSection(sectionConfig);
    if (section) cardBuilder.addSection(section);
  });
  
  return cardBuilder.build();
}

方案优势 #

• 逻辑与定义分离：所有UI结构、启用规则都在配置中集中管理，避免嵌套条件的混乱
• 扩展性强：新增UI元素只需在配置中添加条目，无需修改构建逻辑
• 可读性高：一眼就能梳理出完整的UI结构和元素启用条件
• 维护成本低：修改元素属性或启用规则直接编辑配置，无需在复杂代码中查找修改

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