Dojo构建...？现在怎么办？ [英] Dojo Builds...? What now?

问题描述

一段时间以来，在使用Dojo和Dojo主题时，我研究了闪光的内容的解决方案。有人建议通过创建一个构建来组合所有内容，并减少加载/解析时间，并消除使用预加载器覆盖等的需要。

但是，似乎像Dojo一样，严重缺乏直观的现实世界使用实例和教程，其功能尤其如此。很多资源告诉你如何设置一个构建，而不是如何实现它。

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

  require（[
'dojo / parser'，
'dojo / dom'，
'dojo / dom-class'，
 // etc ... 
 
'dijit / form / ValidationTextBox'，
'dijit / form / CheckBox'，
 // etc ... 
 
 / / Dom准备好调用
'dojo / domReady！'] 
函数（
解析器，
 Dom，
类，
 //等...） 
 
 $ b $ / code $ <$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ 
 
为了简洁起见，删除了一些需求调用，但是有一些 dom 需要， style 类，一些 dijits 等。当这个页面加载的时候，有没有内容的闪存，然后很好。
 
 
 
使用 Dojo Web Builder ，我选择了模块I使用，并运行它。它下载了一个包含很多文件的zip，包括一个新的 dojo.js 和 custom_layer.js 。 
 
 
 
所以我现在的问题是，如何使用这些新的组合和最小化的文件代替我的非构建版本？ 需要？或者我是吗？
 
 
 
所以困惑... 
解决方案
我们来了解AMD（需要/定义）API的工作原理。
  require（[
'dojo / parser'，
'dojo / dom'，
'dojo / dom-class'
]，function（parser，dom，domClass）{
}） ; 
  
这将调用require函数，指定我需要三个模块才能做一些工作。要求会得到每个模块。如果将确定模块是否已经加载。如果没有，它将异步获取文件，并将模块加载到JavaScript运行时。一旦需求已经检索到所有必需的模块，它将执行您的回调函数（函数）将模块作为参数传递给函数。
 
 
 
接下来，让我们来了解构建。 dojo构建完全符合您的描述。它会将一堆单个文件压缩成一个文件。这将使页面加载更快，并防止您描述的flash。
 
 
 
最后，将其放在一起，您应该包括 custom_layer .js 文件以及 dojo.js 文件。
 < script type =text / javascriptsrc =path / to / dojo / dojo.js/> 
< script type =text / javascriptsrc =path / to / custom_layer.js/> 
  
 Web浏览器将加载这两个文件并评估代码。   
 $ b，而不是在每个模块的自己的文件中轻松加载每个模块，因为该模块已被定义在 custom_layer.js 中。 $ b 
所以，您最后一个问题的答案是，您不应该根据您使用的特定代码版本（源代码和自定义构建）更改任何代码。使用AMD api，它应该只是工作。
 
A while back, I looked into a solution for the "flash of unstyled content" when using Dojo and Dojo themes.  Someone suggested to combine everything by creating a build, and it'll reduce the load/parse time and remove the need to use preloader overlays, etc.

However, it seems like Dojo is severely lacking in straightforward, "real world" useage examples and tutorials for a lot of its functionality, this especially.  A lot of the resources tell you how to set up a build, but not how to implement it.  

Let's say I have this in "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.
    }
)
Some of the require calls were removed for brevity, but there's a handful of dom requires, style classes, some dijits, etc.  When this page loads, there's the flash of unstyled content and then it's fine.

Using the Dojo Web Builder, I selected the modules I'm using, and ran it.  It downloaded a zip with a lot of files under it, including a new dojo.js and custom_layer.js.  

So my question is now, how do I use these new combined and minified files in place of my "non-build" version?  What do I require? Or do I?

So confused...
解决方案
First, let's understand how the AMD(require/define) API works.
require([
  'dojo/parser', 
  'dojo/dom',
  'dojo/dom-class'
], function(parser, dom, domClass){
});
This is going to call the require function, specifying that I need three modules in order to do some work.  require will get each module.  If will determine if the module has been loaded.  If it hasn't it will asynchronously get the file, and load the module into the javascript runtime.  Once require has retrieved all of your required modules, it will execute your callback (the function) passing the modules as arguments to the function.

Next, let's understand the build.  The dojo build does exactly what you describe.  It will compress a bunch of the individual files into a single file. this will make the page load quicker and prevent that 'flash' that you describe.

Finally, putting it all together, you should include the custom_layer.js file along with the dojo.js file.
<script type="text/javascript" src="path/to/dojo/dojo.js" />
<script type="text/javascript" src="path/to/custom_layer.js" />
The web browser will load these two files and evaluate the code.  Instead of lazily loading each module in it's own file, the module will already be loaded because it was defined in the custom_layer.js.

So, the answer to your final question is that you should NOT change any of your code based on the specific version of code (source vs custom build) that you are using.  Using the AMD api, it should just work.

                        
这篇关于Dojo构建...？现在怎么办？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！