zoukankan      html  css  js  c++  java
  • 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的方向发展,确实不是一件易事,我们也不禁惊叹移动应用所带来的重大改变。

    OK,在这里我并不是想跟大家介绍各种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动画的定义:

    再看看JS端对页面切换的处理:

    5.Ajax解析

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

    6.手势操作

    对,就是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:

    7.重力感应

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

    8.离线存储

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

    • Database storage : 数据库
    • Local storage : 本地储存
    • Session storage : 区段储存

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

    恩,基本上是这样,然后就是构思整个框架的结构图了:

    需要做的东西还蛮多的,构想归构想,这仅仅是个开始,如果你也有Touch框架这方面的兴趣和经验,欢迎一起来讨论下:)。

  • 相关阅读:
    echarts图例全选功能实现
    前端面试基础整理(一)
    echarts自定义折线图横坐标时间间隔踩坑总结
    快应用开发总结
    vue3.0学习笔记(一)
    完整开发vue后台管理系统小结
    多状态组件封装有感
    vue容易混淆的点小记
    h5定位geolaction无法调试解决方法
    Mysql数据库主从心得整理
  • 原文地址:https://www.cnblogs.com/bmate/p/1849901.html
Copyright © 2011-2022 走看看