6

不久前，我研究了在使用 Dojo 和 Dojo 主题时出现“无样式内容闪烁”的解决方案。有人建议通过创建构建来组合所有内容，这将减少加载/解析时间并消除使用预加载器覆盖等的需要。

然而，Dojo 的许多功能似乎严重缺乏直接的、“真实世界”的使用示例和教程，尤其是这一点。许多资源告诉您如何设置构建，但没有告诉您如何实现它。

假设我在“pageinit.js”中有这个：

require([
    'dojo/parser', 
    'dojo/dom',
    'dojo/dom-class',
    //etc...

    'dijit/form/ValidationTextBox', 
    'dijit/form/CheckBox',
    // etc...

    // Dom Ready call
    'dojo/domReady!']
    function(
        Parser, 
        Dom,
        Class,
        // etc...){
    // do stuff with parser, dijits, so on.
    }
)

为简洁起见，删除了一些 require 调用，但有一些domrequires、styleclasses、somedijits等。当此页面加载时，会出现无样式内容的闪烁，然后就可以了。

使用Dojo Web Builder，我选择了我正在使用的模块并运行它。它下载了一个包含很多文件的 zip，其中包括一个新的dojo.js和custom_layer.js.

所以我现在的问题是，我如何使用这些新的组合和缩小文件来代替我的“非构建”版本？我该怎么办require？还是我？

如此迷茫...

4

2 回答 2

8

首先，让我们了解 AMD(require/define) API 的工作原理。

require([
  'dojo/parser', 
  'dojo/dom',
  'dojo/dom-class'
], function(parser, dom, domClass){
});

这将调用 require 函数，指定我需要三个模块才能完成一些工作。require 将获取每个模块。如果将确定模块是否已加载。如果没有，它将异步获取文件，并将模块加载到 javascript 运行时。一旦 require 检索到所有必需的模块，它将执行您的回调（函数），将模块作为参数传递给函数。

接下来，让我们了解构建。dojo 构建完全符合您的描述。它将一堆单独的文件压缩成一个文件。这将使页面加载更快并防止您描述的“闪光”。

最后，将它们放在一起，您应该将custom_layer.js文件与文件一起包含在内dojo.js。

<script type="text/javascript" src="path/to/dojo/dojo.js" />
<script type="text/javascript" src="path/to/custom_layer.js" />

Web 浏览器将加载这两个文件并评估代码。与其在自己的文件中懒惰地加载每个模块，不如将模块已经加载，因为它是在custom_layer.js.

因此，最后一个问题的答案是，您不应该根据您正在使用的特定代码版本（源代码与自定义构建）更改任何代码。使用 AMD api，它应该可以工作。

于 2012-10-16T20:22:36.653 回答
0

不确定这是否是最佳实践，但是当我第一次开始（几天前）时，我看到了无样式内容的闪现，并且在某个地方看到了几个示例，这些示例只需隐藏<body>. Parse 将在准备好显示某些内容时取消隐藏它。

<body style="visibility: hidden;">
于 2013-07-30T18:40:01.783 回答