翻译 - 【Dojo Tutorials】Part 5 - Build FlickrView for production

原文：Part 5 - Build FlickrView for production

在前面的几篇文章中，我们通过编写HTML， CSS和JavaScript实现了这个FlickrView移动应用。本片文章将专注于为部署更新代码，利用Dojo的构建系统让生产环境应用保持紧凑，并回顾了整个Dojo Mobile驱动的应用。

Dojo Mobile与构建

为Dojo Mobile应用创建一个构建版本是很重的，因为我们想要我们的应用尽可能的小。让我们看逐步了解一下如何创建我们Dojo Mobile应用FlickrView的压缩构建版本。

Dojo的构建系统

典型的构建脚本在Dojo工具集的util/buildscripts目录下，所以，接下来，你本地需要一份Dojo源码的copy。如果还没有，访问这个网址获取：dojotoolkit.org/download。

确认你获取了一份包含util目录的源码。一旦你有了这些，复制dojo，dijit，dojox和util文件夹到你应用的js目录中。你的文件结构看起来大概这个样子的。

project structure

构建简介（profile）

让我们为FlickrView创建一个build profile（该怎么叫它呢）。这个build profile是一个配置文件，用于说明这个build包含什么，有那些选项可用。Dojo的构建系统的完整文档在Create Builds tutorial，在这里我们只会简单的介绍一下。

profile开始带有一些选项：

  • “basePath” 为profile中所有相关的路径定义基路径
  • “action” 对于一个build来说“release”是标准action
  • “releaseDir” build的结果输出目录
  • “cssOptimize” 这个选项对移动build很有用，因为它可以确保让所有的主题CSS串联起来放入一个文件内
 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 };

 

运行Build

让我们切换到命令行，基于上面的构建配置来构建我们的layers：

Unix

1 cd js/util/buildscripts
2 ./build.sh profile=../../flickrview-app.profile.js

 

 

Windows

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目录看看结果。

执行这个build

为了执行新构建的文件，更新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中的基本挂件
  • 如何在HTML声明dojox/mobile的挂件并在JavaScript代码中使用他们
  • 如何使用dojox/request/script从Flickr获取JSON格式的数据
  • 如何去扩展dojox/mobile的挂件
  • 遵循最佳实践但是也保证代码紧凑，最小化依赖
  • 为dojox/mobile应用build的过程

通过本系列教程，我们可以看到Dojo Mobile是一个杰出的移动应用框架，带有主题，挂件，都和移动设备相匹配。Dojo Mobile也比较好学，扩展和动态填充内容。FlickrView，带有三个视图，非常容易创建，多亏了Dojo Mobile！

posted on 2014-11-03 23:51  古道倦马  阅读(397)  评论(0)  编辑  收藏  举报

导航