`
cyck02
  • 浏览: 7234 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类

【翻译】Part 5 - Build FlickrView for production

阅读更多
英文原链接:http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part5/
前面几篇文章,我们创建HTML、CSS和JavaScript代码完成FlickrView移动应用程序。本篇教程将关注于更新代码部署,利用Dojo构建系统保持应用产品化,并基本审查基于Dojo Mobile的整个应用。
Dojo Mobile和构建
为Dojo Mobile应用程序创建构建器(build)是非常重要的,因为我们要让移动应用体积尽可能的小,接下来一步步创建Dojo Mobile应用FlickrView的构建器。
Dojo的构建(build)体系
典型的构建脚本可以在Dojo Toolkit的util/buildscripts目录下找到,所以,接下来的教程需要一份Dojo的原代码,可以到这里下载dojotoolkit.org/download.
原代码里包括util目录,复制dojo,dijit,dojox和util目录到你应用的js目录下,最后目录结构如下图。

构建(build)配置文件
我们创建一个FlickrView的构建文件,构建文件是一个配置文件,说明了构建时需要包含的内容和用到的选项。创建构建器教程有Dojo构建体系的完整文档资料,本节只简单说明下他包含了什么。

一开始有一些选项:
  • "basePath" 定义所有相对路径的起点;
  • "action":"release" 这是构建器的标准动作。
  • "releaseDir" 指定构建结果输出目录。
  • "cssOptimize" 这对移动构建是很有用的选项,它可以将所有CSS文件的内容都合并到一个CSS文件。

var profile = {
    "basePath": "./",
    "action": "release",
    "releaseDir": "../release/js",
 
    "selectorEngine": "acme",
    "stripConsole": "normal",
    "copyTests": false,
    "cssOptimize": "comments.keepLines",
    "mini": true,
    "optimize": "closure",
    "layerOptimize": "closure",
 
    "localeList": "en-us",

接下来是layers的定义:
在这个课程,我们只给应用定义了一个包括所有模块的层(layer).一个layer将会生成一个js文件,在我们的例子上,我们定义一个dojo/dojo层,它只包含我用应用中用到的Dojo代码和自定义代码。
请注意,我们可以将应用分解成多个层,比如dojo代码一个层,应用代码一个层,但因为移动应用部署在一个高延时的网络,多次的请求会对应用的启动产生不好的影响,出于同样的原因,我们将本地化绑定的内容也加到同一层上。(通过includeLocales属性)。
layers: {
    "dojo/dojo": {
        customBase: true,
        includeLocales: ["en-us"],
        include: [
            "dojox/mobile/parser",
            "dijit/registry",
            "dojox/mobile/compat",
            "dojox/mobile/ScrollableView",
            "dojox/mobile/ListItem",
            "dojox/mobile/FormLayout",
            "dojox/mobile/TextBox",
            "dojox/mobile/RadioButton",
            "dojox/mobile/Heading",
            "dojox/mobile/EdgeToEdgeList",
            "dojox/mobile/RoundRect",
            "dojox/mobile/Switch",
            "dojo/cldr/nls/de/gregorian",
            "dojo/cldr/nls/fr/gregorian",
            "dojo/cldr/nls/it/gregorian",
            "dojo/cldr/nls/ko/gregorian",
            "dojo/cldr/nls/pt/gregorian",
            "dojo/cldr/nls/es/gregorian",
            "dojo/cldr/nls/zh/gregorian",
            "dojo/cldr/nls/zh-hk/gregorian",
            "flickrview/FeedView",
            "flickrview/SettingsView"
        ]
    }
},

接着我们定义一些特性:
特性是能够被按需包含或者排除(见dojo/has)的独立代码片断。
例如,我们将"ie"设置为undefinde:这样我们就不想应用运行在老的IE浏览器上(指移动浏览器),表示同意排除掉所有IE特性的代码。
    staticHasFeatures: {
        "dom-addeventlistener": true,
        "dom-qsa": true,
        "json-stringify": true,
        "json-parse": true,
        "bug-for-in-skips-shadowed": false,
        "dom-matches-selector": true,
        "native-xhr": true,
        "array-extensible": true,
        "ie": undefined,
        "quirks": false,
        "dojo-sync-loader": false,
        "ie-event-behavior": 0
    },
 
    packages: [
        { name: "dojo", location: "dojo" },
        { name: "dijit", location: "dijit" },
        { name: "dojox", location: "dojox" },
        { name: "flickrview", location: "flickrview" }
    ]
};

这个构建配置文件在包含在flickrview/js/flickrview-app.profile.js,在文章最后下载文档中可以找到。
运行构建程序
切换到命令行模块,使用上面的构建配置文件构建layers:
Unix
cd js/util/buildscripts
./build.sh profile=../../flickrview-app.profile.js


Windows
cd js\util\buildscripts
.\build.bat profile=..\..\flickrview-app.profile.js

构建程序混合了JavaScript和Java(代码精简和优化)任务。默认情况下,unix下的build.sh脚本将使用node.js运行环境,没有node.js会使用Rhino(这样的顺序是基于node.js通常比Rhino快的事实)。
Windows下的build.bat脚本,使用的是Rhino,但这并不表示你不能使用node.js构建,可以用下面命令行手动执行:
.\node ..\..\dojo\dojo.js load=build --profile ../../flickrview-app.profile.js

构建完成后,到release/js/flickrview/ 目录查看结果。
实现构建
实现新创建的构建文件,更新flickrview.html
首先,更新Dojo路径,使用构建出来的dojo.js替代原始dojo.js文件。这对应配置文件中的dojo/dojo层,结果文件在release/js/dojo/dojo.js,所以我们更新Dojo脚本标签的路径。layer包括应用需要的所有模块,我们无需做其他修改。
<script type="text/javascript" src="./release/js/dojo/dojo.js"></script>
<script>
    require([...], function(...){ // existing require calls
        // ... existing code
    });
    // ...
</script>

最后,我们把dojoConfig简化为这样的代码:
<script type="text/javascript">
        dojoConfig = {
            async: true,
            parseOnLoad: false,
            mblHideAddressBar: true,
            extraLocale: ["en-us", "fr-fr", "de-de", "it-it", "ko-kr", "pt-br", "es-us", "zh-hk"]
        };
</script>

构建版本的HTML文件,flickrview-build.html,包含在可下载文档中,你可以在运行构建时启动这个文件。

回顾
FlickrView已经完成!我们的简单移动应用已经模板化(HTML),样式化(CSS),代码化(JavaScript),和产品化构建!
我们回顾下创建FlickrView过程学到的:
  • Dojo Mobile包含的基本小部件。
  • 基于HTML的声明式代码组织dojo/mobile小部件,基于JavaScript方式的编程创建小部件。
  • 如何使用dojo/request/script从Flickr获取JSON格式的数据
  • 如何扩展dojox/mobile基本组件。
  • 保持好的JavaScript实践同时保持紧凑的代码和最小的依赖。
  • dojox/mobile应用所需的特殊构建过程。

在这系列课程,我们看到Dojo Mobile是一个出色的移动应用框架,有着匹配移动设备控制的完整主题和小部件。Dojo Mobile同时还容易掌握、可扩展和内容可动态填充。FlickrView,一个基本的三视图应用,是非常容易创建,感谢Dojo Mobile!

下载源代码
下载 Part 5 - Build FlickrView for production.

============================================
Part 5 END
next NULL

================
结语:
第一次翻译,因英文水平有限,时间也压缩地厉害,不免错漏百出,看得人估计受苦了,在此为阅读这几篇文章的同志致歉!

以后在学习其他技术知识时,可能还会尝试做些翻译,希望水平能慢慢提高。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics