为了力求运行速度快、响应迅即,我们推荐使用backbone.js和zepto.js。

为了让这个过程更有意思,我们开发了一个小小的示例项目,使用CSS重置样式、Backbone.js和带转场效果的几个页面。我们的项目会显示Trigger推特更新内容和单个的推特消息。与往常一样,我们将使用同一个HTML5代码库创建安卓和iOS应用程序。在这个过程中,我们将介绍如何:

把你的JavaScript文件添加到应用程序中
使用Backbone.js来显示响应迅即的界面
使用CSS重置样式,减少跨平台出现的不一致性
在应用程序中的视图之间实现示例转场效果
你可以在此基础上随意开发自己的项目——这是开发新项目的良好基础!代码放在github上,详见:https://github.com/trigger-corp/Forge-Bootstrap。 添加的文件 Backbone.js,负责处理历史记录、用户操作以及为整个JavaScript框定结构
HTML5Boilerplate,旨在减少不同平台上不一致的渲染默认值带来的影响
Zepto,这个面向移动设备的轻型框架是jQuery的替代方案,可用于DOM(文档对象模型)处理。
开始上手 想处理应用程序中的JavaScripts和CSS,只要把它们添加到你的index.html中,就像你在普通网站中进行操作那样: <link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/demo.css">
<script type="text/javascript" src="js/lib/zepto.min.js"></script>
<script type="text/javascript" src="js/lib/underscore-min.js"></script>
<script type="text/javascript" src="js/lib/backbone-min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
里,我们只使用了HTML5样板重置样式(reset.css)、JavaScript库和我们自己的两个文件:demo.css和demo.js。 使用Backbone时,你的入口点应该设置好应用程序正常运行所需要的各方面,然后开始运行Backbone的历史系统。 比如说,在该项目中,我们使用$(Demo.init),在应用程序启动时运行下列函数,只运行一次: // 应用程序启动时,只调用一次
init: function () {
// 获取Trigger推特更新内容
forge.request.ajax({
url: "https://twitter.com/statuses/user_timeline/14972793.json",
dataType: "json",
success: showIndex
});
// 一旦我们有了Trigger推特更新内容,就调用
function showIndex(data) {
// 把初始数据保存起来
Demo.items = new Demo.Collections.Items(data);
// 建立Backbone
Demo.router = new Demo.Router();
Backbone.history.start();
}
}
这里,我们使用request.ajax函数来检索我们的推特消息,并将数据存储在一个集合中,然后开始运行Backbone。 使用Backbone.js Backbone.history.start()启动Backbone的window.onhashchange事件订阅。当URL的某片段变化时,就使用routes.js中定义的路由: routes: {
"" : "index", // 入口点:没有哈希分片或#
"item/:item_id":"item" // #item/id
},
路由将URL映射到函数。我们在这里定义了两个路由:一个对应#index(),另一个对应#item/[item_id]。然后,将item_id作为一个参数传递到item()。路由负责为你整个应用程序安排好URL。 使用Backbone来管理Forge应用程序里面的视图是个好办法:我们不仅在历史堆栈里面构建URL(比如说,这意味着“后退”按钮在安卓平台上可以按预期的方式工作),我们还能够全面控制在应用程序中显示的内容,又不必借助慢腾腾的页面装入机制。 不过,特别是在移动平台上,你的用户期望以某种动态转场效果从一个视图切换到下一个视图;为此,你可以把Backbone视图组织成页面。 页面视图 该代码片段显示了我们如何在这个项目中实现页面,当一个页面变得活跃时,就使用动画转场效果。你还可以在此看到我们使用Zepto用于DOM处理。 Demo.Views.Page = Backbone.View.extend({
className: "page",
initialize: function () {
this.render();
},
show: function () {
$('.page').css({"position": "absolute"});
var direction_coefficient = this.options.back ? : -;
if ($('.page').length) {
var $old = $('.page').not(this.el);
// 这个解决办法来之不易-
// 仅仅使用.css(property, '')不管用!
$old.get().style["margin-left"] = ""
$old.get().style["-webkit-transform"] = ""
this.$el.appendTo('body').hide();
this.$el.show().css(
{"margin-left": * direction_coefficient});
this.$el.anim(
{translate3d: - * direction_coefficient +'px,0,0'},
0.3, 'linear');
$old.anim(
{translate3d: - * direction_coefficient + 'px,0,0'},
0.3, 'linear', function() {
$old.remove();
$('.page').css({"position": "static"});
});
} else {
this.$el.appendTo('body').hide();
this.$el.show();
}
window.scrollTo(, );
}
});
如果你希望,可以在你自己的视图中实现这个页面,并使用show()方法从一个页面切换到另一个页面。 比如说,在该项目中,我们为所有推特消息的初始视图创建了一个页面,并且当用户选择每一单个的推特消息时也为它创建一个页面。 使用Forge API的其他部分 我们已经看到了使用forge.request.ajax来请求远程服务器。该项目还充分利用了另外一些Forge API。 在expand_item()中,我们使用forge.tabs.open(),以一种跨平台的方式打开外部页面新标签页。open()的说明文档在此。 最后,我们使用了click_or_tap()函数中的forge.is,以便我们能够监听移动设备上的轻触事件(tap event),以及其他设备上的点击事件(click event)。易于检测平台的说明文档在此。 click_or_tap: function(obj) {
// 至于对象属性,为属性添加“点击”,并使用原始值
var new_obj = {};
for(var property in obj) {
if (obj.hasOwnProperty(property)) {
if (forge.is.mobile()) {
new_obj["tap " + property] = obj[property];
}
else {
new_obj["click " + property] = obj[property];
}
}
}
return new_obj
}
这很重要,因为点击事件的反应在移动设备上不如轻触来得迅即。 构建和运行应用程序 为了自行构建和运行应用程序,请先取我们网站上注册(https://trigger.io/);如果你还没有Trigger.io Forge框架,就安装该框架,开始建立Forge环境(操作步骤详见http://docs.trigger.io/en/v1.3/forge/index.html)。 然后, 为你的应用程序创建一个新的目录,使用cd命令进入到该目录,运行“forgecreate -n Demo”,在你的帐户中创建Demo(演示)应用程序。 把教程代码拷贝到src目录中,覆盖forge之前创建的样板代码。 运行forge build,构建应用程序的每个版本(这步操作第一次速度很慢——但随后的构建过程快若闪电!) 运行forge run android或forge run ios,查看应用程序(你需要先安装安卓模拟器或iPhone模拟器——欲知详情,请参阅我们的说明文档:http://docs.trigger.io/en/v1.3/android/getting-started.html)。 如果你连接上了安卓手机,forge run android会将该应用程序部署到你的手机上,进行测试(确保打开了USB调试模式)。 尽情享受吧! 就是这样 你可以随意处理源代码。我们希望一切都很清楚。

使用backbone.js、zepto.js和trigger.io开发HTML5 App的更多相关文章

  1. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  2. 学习zepto.js(对象方法)[5]

    继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. ...

  3. zepto.js 总结

    zepto.js 中的注意事项 ,详见:http://www.cnblogs.com/samwu/archive/2013/06/06/3121649.html zepto被弃用的原因:详见:http ...

  4. zepto.js的事件处理

    能够深入理解zepto对事件的处理,那么整个JS的事件处理就应该差不多合格了,事件处理是JS语言的一个难点. 1. 首先来看$.event函数. JS中有很多事件,都是已经定义好了,我们直接调用就可以 ...

  5. Zepto.js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...

  6. Zepto.js touch模块深入分析 解决手机点击事件

    源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...

  7. Zepto.js库touch模块代码解析

    Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...

  8. zepto.js

    // Zepto.js// (c) 2010-2016 Thomas Fuchs// Zepto.js may be freely distributed under the MIT license. ...

  9. Zepto.js实现fadeIn,fadeOut功能

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. Zepto的设计目的是提供 jQuery 的 ...

随机推荐

  1. Math APP 2.0

    首先,我们把这个软件理解成一个投入市场的.帮助小朋友进行算术运算练习的APP. 从质量保证的角度,有哪些需要改进的BUG? 从用户的角度(把自己当成小学生或真的请小学生帮忙),需要在哪些方面进行改进? ...

  2. jquery选择器(原创)<三>

    现在来看看表单域选择器 1.:input选择器 :input选择器,用于选择所有Input,textarea,select和button元素,语法格式如下: $(":input") ...

  3. P6 EPPM R16.1安装与配置指南(三)

    P6 EPPM R16.1安装与配置指南(三) 解压:V137390-01.zip 修改 D:\P6_R161\p6suite\database\dbsetup.bat   的行 SET JAR_FI ...

  4. jQuery回调函数

    1.引言 今天在学习<jQuery基础教程>在学习编写插件的时候,书中说利用回调函数来当参数,会极大的提高程序的灵活性.对回调函数很陌生.研究了一下给的示例程序.感觉对回调函数有了基本的了 ...

  5. knockout的依赖属性dependentObservable和observable的监控的使用

    1.Knockout是在下面三个核心功能是建立起来的:监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Declarative bindings) 模 ...

  6. ActiveReports 报表应用教程 (9)---交互式报表之动态排序

    在 ActiveReports 中除了提供对数据源进行排序的功能之外,还提供了最终用户排序功能,最终用户可以对报表进行区域内排序和整个数据源排序,结合数据钻取.过滤等功能可以让用户更方便地分析报表数据 ...

  7. sql 去重

    ;WITH CETAS (SELECT *, ROW_NUMBER() OVER (PARTITION BY SearchTask_PKID ORDER BY SearchTask_PKID) Row ...

  8. MySQL联接操作

    在MySQL中,联接是一种对表的引用, 多表联接类型: 1.笛卡尔积(交叉联接):在MySQL中为CROSS JOIN或省略JOIN,如: select * from course, teachcou ...

  9. USE “schema_name” in PostgreSQL

    http://timmurphy.org/tag/mysql/ http://timmurphy.org/2009/11/17/use-schema_name-in-postgresql/ ===== ...

  10. c++中stl容器的常用示例

    1. set(集合)——包含了经过排序了的数据,这些数据的值(value)必须是唯一的. 也就是说输入set容器后得到数据,会去重并排序.    s.insert()插入一个元素    s.begin ...