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

Question

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

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

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

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

<小时/>

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

Answer 1

我想出了以下方法:

系统基本上由以下组成:

1. index.html(所有内容都加载到其中的基本 HTML 入口点)
2. HTML 模板文件
3. SCSS 文件
4. 与架构相关的 JavaScript 文件
5. javascript Controller (有点像页面。控制页面事件以及在其中使用哪些组件)
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 文件，其任务是创建一个下 pull 列表，用户可以选择要切换的功能，并将结果保存在本地存储中。
将下 pull 列表附加到页面。
当用户选择某个功能时，重新加载页面，刷新后，从本地存储读取功能并将其保存到体系结构状态对象的“features”属性下，以供稍后使用.

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

所以，我正在 Master 分支上工作(就像老板一样)，我想在某些页面中进行一些重大更改，并添加一些组件并移动其他现有组件。我所做的是:

1. 复制页面 _home.scss 的 SCSS 文件并重命名为 _feature-home-v2--home.scss(这将使用通配符通过 main.scss 自动导入)
2. 复制页面home.html的模板文件并重命名为feature-home-v2--home.html
3. 导入将用于页面 Controller JavaScript 文件的 JavaScript 组件文件。

编写一些if语句

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

1. 转到主页 javascript Controller 文件并转到加载 HTML 模板的行，然后检查应用程序状态“features”对象是否为

类似这样的:

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>

我现在可以将导入的 Controller 加载到它们所在的位置(在它们可能已导入但未在页面上初始化之前)。

<小时/>

对过程的思考:

1. 在 Sublime 中按下 ctrl-p 并开始输入 feature- 将仅显示与功能相关的文件。
2. 从构建过程中产生更大的输出，并且每个功能不会使用不同的 GIT 分支。
3. 应该快速 merge/丢弃功能，这样代码就不会因许多功能而变得困惑。
4. 在单个分支上使用所有功能可以通过复选框/单选按钮轻松地快速添加/删除自定义下 pull 菜单。
5. 必须记住，GIT 提交要根据所处理的功能进行命名，以使用合理的名称来维护 GIT 顺序。
6. 对于更复杂的更改，可能需要克隆和重命名其他文件，甚至是顶级 Controller 本身。