标签:style blog http io color ar os 使用 java
原文:Part 5 - Build FlickrView for production
在前面的几篇文章中,我们通过编写HTML, CSS和JavaScript实现了这个FlickrView移动应用。本片文章将专注于为部署更新代码,利用Dojo的构建系统让生产环境应用保持紧凑,并回顾了整个Dojo Mobile驱动的应用。
为Dojo Mobile应用创建一个构建版本是很重的,因为我们想要我们的应用尽可能的小。让我们看逐步了解一下如何创建我们Dojo Mobile应用FlickrView的压缩构建版本。
典型的构建脚本在Dojo工具集的util/buildscripts目录下,所以,接下来,你本地需要一份Dojo源码的copy。如果还没有,访问这个网址获取:dojotoolkit.org/download。
确认你获取了一份包含util目录的源码。一旦你有了这些,复制dojo,dijit,dojox和util文件夹到你应用的js目录中。你的文件结构看起来大概这个样子的。
让我们为FlickrView创建一个build profile(该怎么叫它呢)。这个build profile是一个配置文件,用于说明这个build包含什么,有那些选项可用。Dojo的构建系统的完整文档在Create Builds tutorial,在这里我们只会简单的介绍一下。
profile开始带有一些选项:
1 var profile = { 2 "basePath": "./", 3 "action": "release", 4 "releaseDir": "../release/js", 5 6 "selectorEngine": "acme", 7 "stripConsole": "normal", 8 "copyTests": false, 9 "cssOptimize": "comments.keeplines", 10 "mini": true, 11 "optimize": "closure", 12 "layerOptimize": "closure", 13 14 "localeList": "en-us"
接下来是layers的定义:
在本教程中,只定义了一个layer包含了应用所需要的所有模块。一个layer将会生成一个js文件,对我们来说,定义它作为dojo/dojo layer。它包含了应用所需要的Dojo代码和我们为应用编写的自定义代码。
我们可以把我们的应用批分成多个layers,例如可以一个layer用于Dojo代码,一个用于我们自定的应用代码。但是对于移动应用来说,尤其是在网络上传输,就有些累赘,因为应用在启动是要请求多次(会增加用户等待时间)。出于同样的考虑,我们把本地的代码也包含进一个layer中。
1 layers: { 2 "dojo/dojo": { 3 customBase: true, 4 includeLocales: ["en-us"], 5 include: [ 6 "dojox/mobile/parser", 7 "dijit/registry", 8 "dojox/mobile/compat", 9 "dojox/mobile/ScrollableView", 10 "dojox/mobile/ListItem", 11 "dojox/mobile/FormLayout", 12 "dojox/mobile/TextBox", 13 "dojox/moble/RadioButton", 14 "dojox/mobile/Heading", 15 "dojox/mobile/EdgetoEdgeList", 16 "dojox/mobile/RoundRect", 17 "dojox/mobile/Switch", 18 "dojo/cldr/nls/de/gregorian", 19 "dojo/cldr/nls/fr/gregorian", 20 "dojo/cldr/nls/it/gregorian", 21 "dojo/cldr/nls/ko/gregorian", 22 "dojo/cldr/nls/pt/gregorian", 23 "dojo/cldr/nls/es/gregorian", 24 "dojo/cldr/nls/zh/gregorian", 25 "dojo/cldr/nls/zh-hk/gregorian", 26 "flickrview/FeedView", 27 "flickrview/SettingsView" 28 ] 29 } 30 },
然后我们要定义个特征(features)的集合:
特征是一种分离代码的方式,可以有条件的包含或排除。
例如,我们设置ie特征为undefined:这样的话,说明我们不需要让我们的代码兼容老的ie浏览器,所以我们将任何针对的ie的代码剔除掉:
1 staticHasFeatures: { 2 "dom-addeventlistener": true, 3 "dom-qsa": true, 4 "json-stringify": true, 5 "json-parse": true, 6 "bug-for-in-skips-shadowed": false, 7 "dom-matches-selector": true, 8 "native-xhr": true, 9 "array-extensible": true, 10 "ie": undefined, 11 "quirks": false, 12 "dojo-sync-loader": false, 13 "ie-event-behavior": 0 14 }, 15 16 packages: [ 17 { name: "dojo", location: "dojo" }, 18 { name: "dijit", location: "dijit" }, 19 { name: "dojox", location: "dojox" }, 20 { name: "flickrview", location: "flickrview" } 21 ] 22 };
让我们切换到命令行,基于上面的构建配置来构建我们的layers:
1 cd js/util/buildscripts 2 ./build.sh profile=../../flickrview-app.profile.js
1 cd js\util\buildscripts 2 .\build.bat profile=..\..\flickrview-app.profile.js
构建的过程杂糅了Javascript与Java的任务一起。默认的,unix的build.sh脚本使用了nodejs或Rhino。
在Windows的build.bat脚本,只使用了Rhino。但是,这并不意味着不能使用nodejs。下面是手动在命令行设置的脚本内容:
1 .\node ..\..\dojo\dojo.js load=build --profile ..\..\flickrview-app.profile.js
build完成后,到release/js/flickrview目录看看结果。
为了执行新构建的文件,更新flickrview.html文件
首先,修改Dojo的路径,我们使用新构建的dojo.js替换掉原来的。和profile中的dojo/dojo layer一致,结果文件为release/js/dojo/dojo.js,所以我们改变script的标签。我们不需要做其他修改,因为layer已经包含了应用所需的所有的模块。
1 <script type="text/javascript" src="./release/js/dojo/dojo.js"></script> 2 <script> 3 require([...], function(...) { // existing require calls 4 // ... existing code 5 }); 6 </script>
最后,我们的dojoConfig如下:
1 <script type="text/javascript"> 2 dojoConfig = { 3 async: true, 4 parseOnLoad: false, 5 mblHideAddressBar: true, 6 extraLocale: ["en-us", "fr-fr", "de-de", "it-it", "ko-kr", "pt-br", "es-us", "zh-hk"] 7 }; 8 </script>
FlickrView已经完成了。我们为这个简单的移动应用写了模版,样式,代码(Javascript),还build成了产品!
让我们复习一下在创建FlickrView的过程中我们学到了些什么:
通过本系列教程,我们可以看到Dojo Mobile是一个杰出的移动应用框架,带有主题,挂件,都和移动设备相匹配。Dojo Mobile也比较好学,扩展和动态填充内容。FlickrView,带有三个视图,非常容易创建,多亏了Dojo Mobile!
翻译 - 【Dojo Tutorials】Part 5 - Build FlickrView for production
标签:style blog http io color ar os 使用 java
原文地址:http://www.cnblogs.com/gudaojuanma/p/4071438.html