Question

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

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

（相当自信我在jQuery UI思维模式中“正确行事”。如果不通过代码构建整个UI，那么至少可以查看禁用了JavaScript。虽然我怀疑是否有人仍在使用Lynx，但是存在可访问性问题......或者确保您的内容可以被搜索引擎分析。我会饶恕你的老人讲话，说明这是多么荒谬实现内容/ UI分离的方式： - /）

当我使用<script>标签加载我的第三方库依赖项和$(document).ready来运行jQuery UI voodoo时，用户从未看到过丑陋的丑陋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动画。

Answer 2

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

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

嘿Doc，当我这个时会很痛。

那么，那就不要那样做了！

Answer 3

我遇到了与Jquery Mobile和RequireJS相同的问题。

我首先尝试关注this提示并通过添加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: "" 
    }

ui-mobile-rendering 类位于主体上，而JQM则执行它的小部件功能。页面完成后，将删除该类。通过添加全屏：在之前 - 在这种情况下使用JQM加载程序作为背景图像 - 您可以隐藏页面上的所有内容，直到它被渲染。不需要可见性：隐藏，IE8不抱怨（谢天谢地，IE8和FF3.6知道：之前）。

在使用jQuery UI和RequireJs时，如何防止用户看到“丑陋”的HTML前体？

3 个答案: