不久前,我在使用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.
}
)
为简洁起见,删除了一些必需的调用,但是有一些dom需求,样式类,一些dijit等等.当这个页面加载时,会出现没有样式内容的闪光,然后就可以了.
使用Dojo Web Builder,我选择了我正在使用的模块并运行它.它下载了一个包含大量文件的zip,包括一个新的dojo.js和custom_layer.js.
所以现在我的问题是,如何使用这些新的组合和缩小文件来代替我的“非构建”版本？我需要什么？或者我呢？
如此迷茫…
首先,让我们了解AMD(require / define)API的工作原理.
require([
'dojo/parser','dojo/dom-class'
],function(parser,dom,domClass){
});
这将调用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,应该可行.