javascript - HTML+JavaScript GUI 建议

Question

我正在开发一个音乐编辑器/音序器应用程序，它将使用 JavaScript+HTML5 编写，并将使用 Canvas 元素和 Chrome 的网络音频 API(我已经有一个 simple prototype working )。

我不太确定的一件事是如何为此实现 GUI。它需要有许多不同的 View ，我可能希望每个 View 都位于不同的可点击“选项卡”中，在给定时间一个选项卡位于前景中，而所有其他选项卡都隐藏起来。我只是不确定如何着手实现所有这些选项卡。

将每个选项卡实现为不同的 HTML 层并让按钮控制哪个层显示在顶部会更好吗？在按下选项卡按钮时即时(重新)生成 HTML 会更好吗？

感谢您的建议。

Answer 1

Would it be better to implement each tab as a different HTML layer and have buttons control which layer shows up on top? Would it be better instead to (re)generate HTML on the fly when the tab buttons are pressed?

我倾向于一次生成内容并按需显示/隐藏它，尤其是当大部分工作在浏览器中完成并且在与页面上的元素交互时没有向服务器发出同步请求的情况下。^{见脚注 1}

显示标签内容时...
假设每个选项卡的内容快速生成，您可以通过仅在第一次请求时为选项卡创建内容来提高应用程序的效率。这样，如果从未访问该选项卡，则不会使用任何资源。

隐藏标签内容时...
使用多媒体时，您可能需要在隐藏内容时执行其他操作。例如，视频不会因为您隐藏它而停止播放。对于您的音频应用程序，您可能需要停止播放当前序列。

有许多选项卡控件可用，例如 jQuery UI tabs (免费)和 Sliding Tabs (许可但价格低廉)。

其他场景
选项卡应该用于在主要内容 block 之间切换，例如文档(例如浏览器选项卡)和/或经常使用的功能(例如人事表格，其中有一个用于联系信息的选项卡和另一个用于工作经历的选项卡)。其他场景可能更适合对话(模态或非模态)。

使用音频示例，如果您有一个标记为“节奏”的按钮，我希望它会在我当前 View 的顶部打开一个小对话窗口，而不是将我带到一个新选项卡。罗兰的workstation keyboards使用这个范例。主要内容会替换当前 View ，但设置/配置窗口通常会在现有 View 上方弹出。

jQuery UI也有一个用于此目的的对话框插件。如果您精通 JavaScript 并以较新的浏览器为目标，那么编写自己的简单对话框并不难。

---

_{1 对于交互式客户端-服务器关系，动态生成内容可能仍然是完全可以接受的，但它引入了额外的考虑因素，例如浏览器中的内容与服务器上的数据模型同步(如果任何)、提交不需要的表单字段(增加请求的大小)、整体页面大小等。}