4

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

默认情况下，我的页面是原生 HTML 的丑陋灾难。唯一让这种混乱变得生动的是对 JavaScript 函数的调用，它为它提供了适当的选项卡控件和布局。事实上，页面是长而垂直的......一个接一个的部分......在我调用将.tabs()它们折叠成一个带有水平控件的单个单元的函数之前。

（相当有信心我在 jQuery UI 思维方式中“做对了”。通过不通过代码构建整个 UI，至少可以在禁用 JavaScript 的情况下查看它。虽然我怀疑是否有人仍在使用Lynx，但是可访问性的问题...或确保您的内容可被搜索引擎分析。我会省去我的老人演讲，关于这是实现内容/UI分离的荒谬方式。:-/)

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

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

jQuery UI 界面在 document.ready 之前看起来很难看

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

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

4

3 回答 3

3

我同意你应该做一些 CSS 魔法，然后在 RequireJs 的“开始”脚本中隐藏它。您还应该考虑 SEO 影响和 JavaScript 禁用方案。

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

于 2012-05-15T20:53:23.810 回答
1

我认为使用node-browserify之类的东西来执行所有 Javascript 模块require然后将单个 JS 文件流式传输给最终用户更有意义。

当客户端显然不打算在离线模式下运行时，为什么要通过所有 TCP 握手和 HTTP 标头以低得多的性能获得相同的东西？

嘿，医生，我这样做的时候很痛。

好吧，那就不要那样做！

于 2012-05-15T21:05:33.107 回答
1

我对 Jquery Mobile 和 RequireJS 有同样的问题。

我首先尝试遵循这个提示并通过添加 CSS 来隐藏“丑陋的 HTML”：

.requireJS-init { visibility: hidden;}
.requireJS-init.done { visibility: visible;}

并在页面启动时分配 .requireJS -init并在所有内容加载完成后通过添加另一个类将其删除（我猜你也可以删除初始类）。

但是，这会导致两个问题：
1. 用户可能会在一段时间内出现空白页，具体取决于您正在加载的内容
2. IE8 失败，因为（在我的情况下）Jquery Mobile 试图在元素仍处于隐藏状态时专注于这些元素。

我尝试将类表单 HTML 移动到 BODY 到包含页面内容的元素，但没有任何效果。

一个更简单的纯 CSS 解决方案是：

.ui-mobile-rendering:before { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0;         
    left: 0; 
    right: 0; 
    display: block; 
    height: 100%; 
    z-index: 0; 
    background:#fff url(../images/ajax-loader.gif) no-repeat center center; 
    content: "" 
    }

The ui-mobile-rendering class is on the body while JQM does it's widget enhnacements. Once the page is done, the class is removed. By adding a fullscreen :before - in this case with the JQM loader as background image - you hide everything on the page until it's rendered. No need for visibility:hidden, IE8 doesn't complain (thank good, IE8 and FF3.6 know :before).

于 2012-07-25T08:46:58.550 回答