【问题标题】：Using feature flags in complex UI changes在复杂的 UI 更改中使用功能标志
【发布时间】：2016-11-23 20:14:23
【问题描述】：

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

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

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

如何将如此复杂的过程简化为简单的“功能切换”？

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

【问题讨论】：

你能创建一个包含这些标志的文件吗？然后让 javascript 读取该文件以查看它是否已打开/关闭？也许将 id 映射到布尔值。就像 {header: false} 一样。然后循环遍历并隐藏所有错误的元素。
@Taztingo - 知道打开/关闭哪些功能不是问题。简单地隐藏/显示内容也无法解决复杂的 UI 更改。
为什么不能解决复杂的 UI 变化？您有一个可以在 Javascript 中与之交互的标志吗？如果你想隐藏一个特性然后隐藏它，你希望一个特性显示然后显示它。如果您希望功能以特定方式做出反应，请检查标志。一个例子不仅对我有帮助，对其他人也有帮助。
@Taztingo - 我想出了一个解决方案，请在下面查看并告诉我您的想法。
很好，我一定会看看的。

标签： javascript git architecture

【解决方案1】：

我想出了以下方法：

系统基本上是由：

index.html（所有内容都加载到的基本 HTML 入口点）
HTML 模板文件
SCSS 文件
架构相关的javascript文件
javascript 控制器（有点像页面。控制页面事件以及在其中使用哪些组件）
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 文件，其任务是创建一个下拉列表，用户可以选择切换哪些功能，并将结果保存在 localstorage 中。
将下拉菜单附加到页面。
当用户选择一个特性时，重新加载页面并刷新后，从 localstorage 中读取特性并将它们保存到架构状态对象中，在“特性”属性下，以供以后使用。

创建一个功能：“home-v2”

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

复制页面_home.scss的SCSS文件并重命名为_feature-home-v2--home.scss（它将通过main.scss使用通配符自动导入）
复制页面home.html的模板文件，重命名为feature-home-v2--home.html
将要使用的 javascript 组件文件导入到页面控制器 javascript 文件中。

写一些`if` 语句

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

转到主页 javascript 控制器文件并转到我加载 HTML 模板的行，并检查应用程序状态“功能”对象是否为

类似这样的：

var templateName = `home`;

if( app.state.features['v2--home'] )
    templateName = `feature-home-v2--` + templateName;

现在页面使用了不同的 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>

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

对过程的思考：

在 Sublime 中点击 ctrl-p 并开始输入 feature- 将仅显示与功能相关的文件。
从构建过程中产生更大的输出，并且每个功能不使用不同的 GIT 分支。
应快速合并/丢弃功能，以免代码与许多功能混在一起。
使用单个分支上的所有功能允许通过复选框/单选轻松自定义下拉菜单快速添加/删除。
必须记住 GIT 提交必须根据所处理的功能命名，以使用合理的名称维护 GIT 顺序。
对于更复杂的更改，可能需要克隆和重命名其他文件，甚至是顶级控制器本身。

【讨论】：

【解决方案2】：

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

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

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

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

{
    input_box: false,
    input_box2: true
}

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