在复杂的UI更改中使用功能标志

Using feature flags in complex UI changes

本文关键字：功能 标志 复杂 UI      更新时间：2023-09-26

为了简化问题，假设有一个带有CSS和JS文件的HTML页面。没有服务器。

现在有人请求在这个简单的web UI中打开/关闭功能
例如，问题是，一个新功能意味着更改HTML结构以添加一个新组件，所以现在HTML有点不同。此外，页面本身的CSS需要更改以支持新组件。当然，还有javascript代码需要更改以适应对HTML所做的更改。。

当然，如果这个组件是完全"隔离"的，并且只有它自己的CSS、javascript和html模板文件，这会容易得多，但它确实需要更改它周围的内容，更改它所在页面的HTML/CSS/JS。

如何将如此复杂的流程简化为简单的"功能切换"？

此外，为了将复杂性提升到一个新的水平，这个新功能可能需要更改项目中使用的某个库版本，但在切换功能时，这是另一个困难级别。。但让我们忽略讨论中的这一部分，因为我对上面提到的事情更感兴趣。

我想出了以下方法：

系统基本上由以下部分组成：

  1. index.html（所有内容都加载到的基本html入口点）
  2. HTML模板文件
  3. SCSS文件
  4. 与体系结构相关的javascript文件
  5. javascript控制器（有点像pages。控制页面事件以及在其中使用哪些组件）
  6. javascript组件（想象一下表格、网格、树菜单、面包屑…）

home.html模板示例：

<div class='col'>
   <component class='line-chart'></component>
   <component class='table'></component>
</div>
<div class='col'>
   <component class='bar-chart'></component>
</div>

我所做的步骤（简化）：

创建一种在UI中打开/关闭功能的方法：

创建一个？体系结构（与系统/应用程序相关）javascript文件，其任务是创建一个下拉列表，用户可以选择要切换的功能，结果保存在本地存储中。
将下拉列表附加到页面。
当用户选择一个功能时，重新加载页面，刷新后，从本地存储中读取功能，并将其保存到架构状态对象中的"features"属性下，以便稍后使用。


创建一个功能："home-v2"

因此，我正在处理Master分支（就像老板一样），我想在一些页面中创建一些大的更改，添加一些组件并移动其他现有组件。我所做的是：

  1. 复制页面_home.scss的SCSS文件并重命名为_feature-home-v2--home.scss（它将通过main.scss使用globbing自动导入）
  2. 复制页面home.html的模板文件并重命名为feature-home-v2--home.html
  3. 导入将用于页面控制器javascript文件的javascript组件文件


编写一些if语句

这是"丑陋"的部分，我必须根据每个功能设置要做什么。因此，对于我的新示例功能home-v2，我需要做一些事情：

  1. 转到主页javascript控制器文件，转到我加载HTML模板的行，并检查的应用程序State"features"对象

像这样的东西：

var templateName = `home`;
if( app.state.features['v2--home'] )
    templateName = `feature-home-v2--` + templateName;
  1. 现在，该页面使用了不同的HTML结构，它看起来与默认主页相似，但有更多的组件，有些组件的顺序不同：

feature-home-v2--home.html模板示例：

<component class='breadcrumbs'></component>
<div class='col'>
   <component class='table'></component>
   <component class='line-chart'></component>
</div>
<div class='col'>
   <component class='pie-chart'></component>
</div>

我现在可以将导入的控制器加载到它们所在的位置（在它们可能已导入但未在页面上初始化之前）。

对过程的思考：

  1. 在Sublime中点击ctrl-p并开始键入feature-将只显示与功能相关的文件
  2. 从构建过程中产生更大的输出，并且每个特性不使用不同的GIT分支
  3. 功能应该快速合并/丢弃，这样代码就不会因为许多功能而变得混乱
  4. 在一个分支上使用所有功能可以通过checkbox/radio的自定义下拉菜单快速添加/删除
  5. GIT提交必须记住根据所使用的功能进行命名，以使用合理的名称维护GIT顺序
  6. 对于更复杂的更改，可能需要克隆和重命名其他文件，甚至是顶级控制器本身

我认为复制标志的最佳方法是创建一个带有要隐藏的id的JSON文件。然后只要有Javascript FileReader(https://developer.mozilla.org/en-US/docs/Web/API/FileReader)读入，解析JSON，并隐藏映射的false id。

假设您的可切换功能是以下输入框：

<input id="input_box"/>
<input id="input_box2"/>

您的文本文件将包含以下内容：

{
    input_box: false,
    input_box2: true
}

input_box将被隐藏，而input_box2将被显示。这似乎是启用标志的唯一方法，除非你想把它放在URL中。

相关文章：