Web移动应用开发框架的8个技术构想 狼人:

摘要:
我们之前已经介绍了四种主流的移动Web开发框架,今天我们将再次深入讨论Web移动应用程序框架需要具备的技术特性和概念。目前,虽然有iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit等web移动应用程序开发框架,但它们在移动领域刚刚起步,需要更多的技术人员进行修改和思考。下面的文章来自腾讯WSD团队的博客,它为我们梳理了移动Web开发框架的技术概念。我不想介绍各种web移动应用程序框架的使用和性能比较。

之前我们已经介绍过四大主流移动Web开发框架,今天我们再次深入,探讨Web移动应用框架需要具备的技术特性和理念。目前虽然已经有诸如iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit等Web移动应用开发框架,但在移动这个领域毕竟刚刚起步,需要更多技术人员对其修正和思辨。下面这篇文章来自腾讯WSD团队博客,为我们梳理了移动Web开发框架的技术构想。

iUI、jQTouch、WPTouch、PhoneGap、XUI、iWebkit、Rhodes、gwt-mobile…当我们已经开始惊叹web移动应用充斥着各种各样框架与类库的时候,其实各大web框架才刚刚开始他们的移动领域:Yahoo的YUI3.2的Touch版、jQuery的 jQueryMobile、ExtJS整合JQTouch和Raphaël库推出的Sencha Touch框架。

ExtJs更名为Sencha的确让我震惊不少,毕竟自己也曾是ExtJs框架的粉丝,如此重量级的框架忽然掉头往mobile touch的方向发展,确实不是一件易事,我们也不禁惊叹移动应用所带来的重大改变。

在这里我并不是想跟大家介绍各种web移动应用框架的用法介绍和性能对比。只是受ExtJs的影响,以及想知道自己到底去到一个什么程度,以及更好的积累沉淀下前端的经验,于是我开始构想一个好的web移动应用框架应该如何如何,并开始尝试着手实现。重复造轮子只是强迫自己更深入地去了解这个领域,并不是自大到要挑战什么。于是分析对比了下,总结如下:

1.轻量级

这个应该是移动应用框架里最重要的一点,不要想着3G的普及还有wifi啥的,国情就是国情,要大部门用户在3秒内下载完你那100K的css和js文件是强人所难。因此我们的移动应用框架必须尽可能的轻量化,所有的命名和函数实现方法都要尽可能的简练和高度压缩。抛掉那些PC上web应用的特效和组件吧,不要为了一个菜单效果把7,80K的jQuery.js加在你的页面上。

2.主流手机浏览器兼容性

面对如此多的手机平台和浏览器,要你的移动应用在所有浏览器上表现如一是很困难的,有时候你需要对不同浏览器加载不同的样式文件,又或是运行不一样的函数来实现效果。因此我们的框架必须有能识别各种主流浏览器的方法,具体点,你的框架必须能区分如iPhone、iPad、Android、Windows Phone等,OK,再国情化一点,QQ手机浏览器和UCWeb。最后要注意的是这里尽量不用UA的方法来判断,因为各浏览器的 avigator.userAgent都很不可靠,这里可以参考下mooltools判断浏览器的思路,应用到我们的移动领域上。

3.强大的选择器

选择器可以说是一个框架灵魂,在将来的web移动应用中会大量使用CSS3的高级伪类,因此我们的框架必须能尽快遍历定位到尽可能多的HTML5标签和CSS3的伪类,哪怕是像E:first-of-type这种jquery选择器都不支持的结构。

4.页面动画效果

与桌面web应用不同的是,移动应用在页面的切换效果方面要炫的多,比如:滑动切换,遮罩弹出,渐入渐出,闪屏,iPhone上的zoomin,zoomout效果等。看看CSS关于fadein和zoomin动画的定义:

Web移动应用开发框架的8个技术构想 狼人:第1张

再看看JS端对页面切换的处理:Web移动应用开发框架的8个技术构想 狼人:第2张

5.Ajax解析

移动设备浏览器受性能和带宽限制,ajax的应用也与桌面应用有较大的区别,因此低带宽和易用性就成了ajax应用的目标,最典型的例子就是翻页,哈,一丝一毫的带宽都不能放过,这方面可以参考下iUI的思想。

Web移动应用开发框架的8个技术构想 狼人:第3张Web移动应用开发框架的8个技术构想 狼人:第4张

6.手势操作

Web移动应用开发框架的8个技术构想 狼人:第5张

这就是Touch,一个给移动互联网带来革命的事件。把mouseOut、mouseover这些桌面相关的鼠标事件从你的移动框架里去除吧,与之替换的是各种Touch和Gesture(手势)事件:

◆touchstart : 手指放在屏幕上时触发

◆touchend : 手指离开屏幕时触发

◆touchmove : 手指在屏幕上移动时触发

◆touchcancel : 取消Touch事件(这个貌似是系统触发的)

◆gesturestart : 开始手势事件

◆gestureend : 停止手势事件

◆gesturechange : 改变手势事件

监控Touch操作,我们需要利用Touch事件相对于整个页面视图的X轴和Y轴位置来定位(PageX、PageY),并重载默认的Touch事件来扩展我们的需求,对于没有Touch支持的浏览器,我们依然可以重载相应Mouse事件,而Gesture(手势)事件由于需要两根手指触发的放大、缩小、旋转,鼠标是无法模拟,比如下面使用CSS3的webkitTransform样式属性缩放和旋转一个对象Box:

Web移动应用开发框架的8个技术构想 狼人:第6张

7.重力感应

当然,一般的应用很少会用到重力感应,它更适应于游戏方面。对于浏览器更多的是正屏与侧屏的区分。我们要做的就是重载浏览器默认的resize监控事件并对正屏和侧屏做出相应的操作处理。

Web移动应用开发框架的8个技术构想 狼人:第7张

8.离线存储

由于手机网络的特殊性,离线存储技术就变得相当重要,相关的API可以看看W3C提供的有关Client-Side的描述。Client-Side提供了3种离线存储的方案:

◆Database storage : 数据库

◆Local storage : 本地储存

◆Session storage : 区段储存

我们的框架必须能很好的封装这3种离线存储方式,提供一个方便易扩展的API,比如storage能直接储存JSON参数数据段,就好像下面的Demo:

Web移动应用开发框架的8个技术构想 狼人:第8张

以上这些构想可以整理成下面的框架结构图:

Web移动应用开发框架的8个技术构想 狼人:第9张

当然,这仅仅是个开始,关于移动应用框架的构思还待我们进一步深入挖掘。

免责声明:文章转载自《Web移动应用开发框架的8个技术构想 狼人:》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ubuntu新建用户不能使用ll等指令,显示出来的信息没有颜色区分的解决方案SQL Server 存储过程具体解释下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

IOS崩溃日志解析(crash log)

IOS的应用程序少不了crash,互联网统计分析工具友盟有一项目错误分析的功能,专门用于应用程序崩溃日志统计,最近研究友盟上统计到的崩溃日志,在此对崩溃日志做一个简单的总结。 IOS崩溃日志分类: 一、低内存崩溃:IOS设备检测到低内存时,虚拟内存系统发出通知请求应用释放内存。这些通知发送到所有正在运行的应用和进程,试图收回一些内存。如果内存使用依然居高不...

lisp安装使用

lisp自从看了paul的黑客与画家,断断续续阅读ANSI COMMON LISP、practice common lisp 和on lisp ,做书中练习题,之前通过lisp on a box 可以在https://lisp-in-a-box.software.informer.com/下载,后来使用私人版本的lispworks,官网下载http://w...

02_iOS 沙盒及各个目录详解

处于安全考虑,一个iosAPP对系统文件的交互权限被限制在app的沙盒目录下。 在安装一个新的app的时候,安装程序会在沙盒目录下创建许多的容器,每个容器目录都有特定的角色。 bundle容器目录:保存应用程序的包(主bundle的资源等) 数据容器目录:就是我们平时开发中用到的Documents,library temp。运行的时候app可以额外的申请容...

Redhat更新源

1.注册系统给我们提供了什么?如果我们点击系统的RHN,会提示注册系统的种种好处: 1)从官方获得软件源 2)免费或者系统的安装镜像和升级 3)系统故障以后,有专门的维护人员来协同我们处理 对于大部分人员,我们往往只关系,系统能否正常安装软件就够了。而redhat上yum的机理是这样的,通过yum读取配置文件/etc/yum.repos.d/file.re...

详解angularJs中自定义directive的数据交互

就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离。后者我暂时没接触,但数据交互部分却是一样的。所以举几个前者的例子,以备以后忘记。 directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope。例子如下: <body ng-app="myAp...

基于Unity的AR开发初探:发布AR应用到Android平台

本文接上一篇,介绍一下如何通过Unity发布第一个AR应用至Android平台,在Android手机上使用我们的第一个AR应用。 一、一些准备工作 1.1 准备Java JDK 这里选择的是JDK 1.8.x版本,可以从这里下载。 1.2 准备Android SDK 这里选择的是R24.1.x-Windows版本,可以从这里下载。 Note:为了减少配置的...