[转载] 使用backbone.js、zepto.js和trigger.io开发HTML5 App
来源:http://mobile.51cto.com/web-343388.htm
-------------------------------------------------------------------------------
为了力求运行速度快、响应迅即,我们推荐使用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 ? 1 : -1;
- if ($('.page').length) {
- var $old = $('.page').not(this.el);
- // 这个解决办法来之不易-
- // 仅仅使用.css(property, '')不管用!
- $old.get(0).style["margin-left"] = ""
- $old.get(0).style["-webkit-transform"] = ""
- this.$el.appendTo('body').hide();
- this.$el.show().css(
- {"margin-left": 320 * direction_coefficient});
- this.$el.anim(
- {translate3d: -320 * direction_coefficient +'px,0,0'},
- 0.3, 'linear');
- $old.anim(
- {translate3d: -320 * 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(0, 0);
- }
- });
如果你希望,可以在你自己的视图中实现这个页面,并使用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调试模式)。
尽情享受吧!
就是这样
你可以随意处理源代码。我们希望一切都很清楚。
转载于:https://www.cnblogs.com/jiemao/archive/2012/08/17/2643498.html
[转载] 使用backbone.js、zepto.js和trigger.io开发HTML5 App相关推荐
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(一)
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
前篇 使用React.Node.js.MongoDB.Socket.IO开发一个角色投票应用的学习过程(一) 使用React.Node.js.MongoDB.Socket.IO开发一个角色投票应用的学 ...
- Zepto.js框架
Zepto 一.Helloworld <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
- Zepto.js库touch模块代码解析
Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...
- 移动端开发框架Zepto.js
一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻 ...
- scroll事件实现监控滚动条并分页显示示例(zepto.js)
scroll事件实现监控滚动条并分页显示示例(zepto.js ) 需求:在APP落地页上的底部位置显示此前其他用户的购买记录,要求此div盒子只显示3条半,但一页有10条,div内的滑动条滑到一页 ...
- Zepto.js简介
Zepto.js简介 一.总结 一句话总结: Zepto.js语法和jquery起码百分之90相似,主要做移动端框架,和jquery mobile是一个类型的概念 1.Zepto.js做移动端的特点? ...
- zepto.js 处理Touch事件
处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...
- 5分钟搞定jQuery zepto.js 面向对象插件
今天分享一下快速使用jQuery zepto.js的技巧,需要的记得收藏 1.jQuery的引入:本地下载jQuery(后面简称jq)的源文件,开发版本使用非min版,线上使用min版,zepto.j ...
最新文章
- DrawerLayout
- MySQL 备份和恢复
- firefox addons
- matlab 填充斜线,请教一个关于柱状图的问题--填充采用斜线之类的,不能是颜色...
- python在什么平台开发_python主要用于开发什么
- Javascript第三章循环最后一种方法for..in与for区别第二课
- Java 208 道面试题:第一模块答案
- 华为服务器修改密码命令,服务器用户名密码修改
- 2021 年网易云音乐实时计算平台发展和挑战
- 【javaEE】——计算机基础知识(进程的理解和通信)01
- UltraEdit 注册机
- 淘宝用户行为数据挖掘-python
- android仿QQ列表的效果实现
- PL3369C原边12W电源芯片
- LCD直流数显多功能电压电流功率表电压电流表电量量产资料
- 【51单片机实验笔记】1. LED的初级控制
- spdif数字传输规范
- 2019年最新版嵌入式开发教程大纲免费分享
- C#求1000以内的完数
- GD32F303的SPI初始化完毕,发送SPI数据后。如果想要改变频率SPEED,必须重新初始化SPI时钟。否则SPI将失效
热门文章
- 【视频】vue生命周期函数
- Spring AOP编程-aspectJ通知类型-6大通知
- 最优化——单纯形法,单纯形表的求取
- 前后台json交互,以及数据库json转换——PHPThinkphp5.1
- Java双向链表快速排序_双向链表的插入,删除,以及链表的快速排序
- OS / Linux / Inode 详解
- mysql的二级分区_分布式数据库一级分区和二级分区
- 判断字符串格式_Blind_pwn之格式化字符串
- oracle正确维护归档,转载:ORACLE正确删除归档日志的方法
- Android 11 修改libcore update-api 遇到的问题