在复杂的UI更改中使用要素标记

Question

为了简化问题，我们可以说它有一个带有CSS和JS文件的HTML页面。没有服务器。

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

当然，如果这个组件完全被隔离＆＃34;并且只是它自己的CSS，javascript和html模板文件，它要容易得多，但它需要更改它周围的东西，到页面的HTML/CSS/JS它居住在。

如何将这样一个复杂的过程简化为一个简单的特征切换＆＃34;？

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

Answer 1

我认为复制标志的最佳方法是创建一个包含要隐藏的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中。

Answer 2

我想出了以下方式：

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

1. index.html（所有内容加载到的基本HTML入口点）
2. HTML模板文件
3. SCSS文件
4. 与架构相关的JavaScript文件
5. javascript控制器（有点像页面。控制页面事件以及要在其中使用的组件）
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>

我做的步骤（ Simplified ）：

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

创建一个architecture架构（系统/应用相关的）javascript文件，其任务是创建一个下拉列表，从一个人可以选择要切换的功能，结果保存在 localstorage 中。
将下拉列表添加到页面。
当用户选择一个功能，重新加载页面并刷新后，从 localstorage 中读取功能并将其保存到架构状态对象的属性“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模板的行，并检查应用程序状态“功能”对象是否

类似的东西：

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. 使用单分支上的所有功能，可以使用复选框/无线电轻松快速添加/删除自定义下拉列表。
5. GIT提交必须记住根据所使用的功能命名，以保持GIT命令的合理名称。
6. 对于更复杂的更改，可能需要克隆和重命名其他文件，甚至是顶级控制器本身。