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框架这方面的兴趣和经验,欢迎一起来讨论下:)。

  • 相关阅读:
    DVWA 黑客攻防演练(十)反射型 XSS 攻击 Reflected Cross Site Scripting
    DVWA 黑客攻防演练(九) SQL 盲注 SQL Injection (Blind)
    DVWA 黑客攻防演练(八)SQL 注入 SQL Injection
    DVWA 黑客攻防演练(七)Weak Session IDs
    DVWA 黑客攻防演练(六)不安全的验证码 Insecure CAPTCHA
    DVWA 黑客攻防演练(五)文件上传漏洞 File Upload
    工作流表结构设计
    Visual Studio 2019尝鲜----新建空项目体验
    《使用CSLA 2019:CSLA .NET概述》原版和机译文档下载
    .NET快速开发平台的在线预览
  • 原文地址:https://www.cnblogs.com/bmate/p/1849901.html
Copyright © 2011-2022 走看看