http://dojotoolkit.org/documentation/tutorials/1.10/cdn/index.html
从CDN上加载dojo模块时非常有用的。从CDN上加载Dojo并同时加载本地的模块看起来似乎不可能的,但在本教程中,我们将学习怎么达到本目的。
介绍
曾几何时,从CDN上加载dojo模块是很有用的。例如创建你一个简单的测试方案并且可以随时运行,或者提供易于分发和运行的代码。但直接从CDN上加载dojo,基于路径配置的本地自定义模型就不容易加载使用了。为了能够让CDN和本地自定义模型一起运行,需要在dojo上设置一些配置信息。
通过研究对比发现,使用CDN比使用本地托管的dojo库的性能表现差。特别是运用本地托管时,能够明显的减少HTTP请求次数。如果你是为了使用CDN来提高性能,那么你就要仔细衡量了。
加载我们的模块
使用cdn加载dojo模块,创建一个简单的页面,代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Demo</title> 5 </head> 6 <body> 7 <script data-dojo-config="async: 1" 8 src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 9 </body> 10 </html>
该代码设置了AMD(异步模块定义)机制打开,并可以加载dojo模块了。
在1.7版本之前,如果要跨域的话,需要加载dojo.xd.js。由于AMD的原生态支持跨域加载,所以这个就不在需要了。注意在脚本URL地址中有没有http:;this means that the same protocol will be used to load from the CDN as is used for the current page (i.e. if the current page loads over HTTPS, so will the code from the CDN).
下面我们要确认dojo是否可以访问本地的dojo/resources/blank.html
文件,我们使用加载模块的方法测试是否能够访问该模块。代码如下。
1 <script data-dojo-config="async: 1, dojoBlankHtmlUrl: ‘/path/to/blank.html‘" 2 src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
下面我们需要定义本地包的路径。
1 <script data-dojo-config="async: 1, dojoBlankHtmlUrl: ‘/blank.html‘, 2 packages: [ { 3 name: ‘custom‘, 4 location: location.pathname.replace(/\/[^/]+$/, ‘‘) + ‘/js/custom‘ 5 } ]" 6 src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
Note that the local package location is using a little JavaScript trickery to create an absolute path that is derived from the path of the current HTML file.
注意,我们用了一小段javascript的欺骗性的代码,创建了一个可以连接到html文件的相对路径。在dojo1.10中,使用相对路径加载模块时一个非常正确的选择。这在dojoBlankHtmlUrl
上也适用。如何可以,我们就可以定于本地的包,并加载模块。我们就可以像加载普通模块一样加载我们自己定义的模块了。
1 require([ ‘custom/thinger‘ ], function(thinger){ … });
注意事项
Unlike the old Dojo loader, nothing different needs to be done when using built modules from CDN. However, there is an issue that you may run into when using Dojo loaded from CDN:
- Attempting to load unbuilt, remote AMD modules that use the
dojo/text
plugin will fail due to cross-origin security restrictions. (Built versions of AMD modules are unaffected because the calls todojo/text
are eliminated by the build system.)
不同于以前的dojo加载器,在使用CDN上的dojo库时和使用本地的库没有什么区别。然后一般在cdn上调用dojo的时候,也会碰到一些常见的问题。
结论
CDN-based versions of Dojo can be useful in some circumstances. By making a few simple configuration changes, it is possible to use custom local modules while loading Dojo from a CDN, thanks to the new AMD-based module system.
链接
- Dojo configuration reference guide
- More information on the library CDNs that Dojo uses: Google CDN and Yandex CDN.