javascript - 使用 jQuery UI 和 RequireJs 时如何防止用户看到 "ugly"HTML 前兆？

Question

我正在尝试调整 jquery-ui 代码库以使用 RequireJs，并且我正在将它部署在比我之前使用的专用主机慢得多(但可扩展)的虚拟化云服务上。

默认情况下，我的页面是普通 HTML 的丑陋灾难。唯一让这个困惑局面栩栩如生的是对 JavaScript 函数的调用，这为它提供了适当的选项卡控件和布局。事实上，页面的布局又长又垂直……一个节接一个节……在我调用 .tabs() 之前将它们折叠成带有水平控件的单个单元的功能。

(我非常有信心在 jQuery UI 思维模式下“做对了”。通过不通过代码构建整个 UI，它至少可以查看 JavaScript 已禁用。虽然我怀疑是否有人仍在使用 Lynx，但存在可访问性问题……或者确保您的内容可被搜索引擎分析。我不会向您讲述我老人家关于这是一种荒谬的方式的演讲实现内容/UI 分离。:-/)

当我使用 <script> 时用于加载我的第 3 方库依赖项和 $(document).ready 的标签运行 jQuery UI 巫术，用户从未见过普通的丑陋 HTML。现在我正在使用 RequireJs，page.js文件滞后并在 HTML 之后 异步加载...等待 DOMready 处理并不真正需要的库。较慢的服务器让这看起来非常糟糕。

我当然可以使用 CSS 样式在一开始就隐藏丑陋之处，然后用“正在加载...”图形覆盖，直到 UI 准备就绪。这就是首先想到的，这里建议采用类似的方法:

Jquery UI interface looks ugly before document.ready

(注意:这似乎是一个常见的问题，我几乎认为会有一个 RequireJs 插件继续执行此操作。是吗？)

无论如何，我之前似乎不必担心这个……而且我想知道我是否缺少一些更简单的解决方案。如果您使用 RequireJs，如何防止用户看到“丑陋”的 HTML？

Answer 1

我同意你应该做一些 CSS 魔术，然后在 RequireJs 的“启动”脚本中隐藏它。您还应该考虑 SEO 影响和禁用 JavaScript 的情况。

请记住，归根结底，它只是 HTML、CSS 和 JavaScript。无论您使用什么模板/代码生成系统来实现这一目标，归根结底，它只是 HTML 内容、使用 CSS 设置样式并使用 JavaScript 制作动画。