如何针对不同用户展示差异化UI 保障源代码低侵入且高可扩展

核心设计思路 #

采用适配逻辑完全与业务代码隔离的分层设计，所有适配规则独立存放，通过全局开关控制启停，不需要修改任何原有业务代码就能实现适配能力的新增、删除、切换。

分层实现细节 #

• 第一层：全局适配开关管理器
  独立封装适配状态管理逻辑，支持手动切换、自动触发（比如根据用户账号配置、设备属性自动开启对应模式），状态持久化存在本地存储，页面初始化时自动读取。新增适配类型仅需新增对应开关字段，不会改动原有逻辑。
• 第二层：独立适配规则集
  所有适配代码统一存放在单独目录（比如/src/adapters/）下，每类适配单独拆分文件，互相完全独立：
  1. 老年模式适配：单独封装elderly.js、elderly.css
     样式调整全部通过高优先级CSS覆盖实现：给根节点加elderly-mode类名后，通过后代选择器放大字体、调整间距、替换字体图标，不需要修改原有样式文件。
     DOM结构调整全部在适配JS中实现：页面渲染完成后统一通过DOM API调整指定节点结构、替换元素，不需要改动原有业务的DOM渲染逻辑。
  2. 色盲模式适配：单独封装color-blind.css
     直接通过CSS变量覆盖全局色彩配置，或者基于根节点的color-blind类名调整所有元素的色彩对比度、色值映射，完全不需要修改原有组件的样式代码。
• 第三层：动态规则加载器
  页面初始化时根据开关状态动态加载对应适配文件，开启对应模式才加载对应资源，关闭时自动卸载，不会引入冗余代码。

方案优势 #

• 侵入度极低：原有业务代码不需要做任何修改，所有适配逻辑都在独立适配层实现。
• 扩展性极强：新增适配类型仅需在规则集新增对应适配文件、在开关管理器新增对应开关字段即可，不会影响原有逻辑和其他适配规则。
• 灵活度高：适配能力的增删改查完全独立，不需要的适配直接删除对应规则文件即可，不会影响其他功能。

简单实现示例：
开启老年模式时自动给html根节点加elderly-mode类，CSS中直接写覆盖规则即可：

.elderly-mode {
  font-size: 18px !important;
  line-height: 1.8 !important;
}
.elderly-mode .original-icon {
  display: none !important;
}
.elderly-mode .original-icon + .font-icon {
  display: inline-block !important;
}

DOM调整逻辑仅需在适配JS中监听页面渲染完成后，给所有原有图标节点后插入对应字体图标节点即可，完全不需要修改原有图标渲染代码。

内容的提问来源于stack exchange，提问作者夏广斌