`
aiquantong
  • 浏览: 112610 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    Web移动应用框架构想.docx

    【Web移动应用框架构想】 Web移动应用框架是专门为移动设备设计和开发的,它们旨在提供高效、轻量级的解决方案,以优化在智能手机和平板电脑上的用户体验。这些框架允许开发者构建具有桌面级功能和流畅交互的Web...

    基于Web-GIS的森林资源管理信息系统构想

    再者,Web-GIS还支持移动设备接入,使得现场调查和管理更加便捷。林业工作人员可以在野外通过手机或平板电脑实时记录森林资源情况,数据直接上传到云端,降低了数据丢失的风险,也提升了数据的准确性。 此外,Web-...

    web3.0-PPt简介.ppt 文档

    9. 智能网络:Web 3.0 的发展也包括智能网络的发展,如资源描述框架、网络实体语言、SWRL、SPARQL、语义应用程序平台和基于声明的数据储备等。 10. Web 3.0 的发展趋势:Web 3.0 的发展趋势是朝向人工智能和语义...

    移动应用开发的六大编程语言

    在着手实现移动应用构想时,首先要明确目标市场和适用平台,然后选择合适的编程语言,这将取决于你是要构建本地应用、混合应用还是跨平台应用。 1. HTML5:如果你计划开发基于Web的移动应用,HTML5是一个理想的选择...

    PhoneGap实战与书内实例

    《PhoneGap实战》一共10章:第1章主要介绍PhoneGap的用途、与其他同类框架的比较,以及Web开发的入门知识;第2章详细讲解PhoneGap在各个移动平台上的安装与配置;第3章通过一个汇率计算器实例讲解PhoneGap应用开发的...

    web设计大全

    最后,我们还要了解一些前沿技术,如JavaScript框架(如React、Vue.js或Angular)、前端构建工具(如Webpack或Gulp)、以及渐进式Web应用(PWA)。这些工具和技术可以帮助设计师实现更复杂的功能,同时保持网页的高...

    移动互联网背景下企业信息管理系统的研究.pdf

    研究中提出了企业信息管理系统建设的技术框架构想,这个框架建立在云平台之上,并采用Java开发的开源接口,支持模块化定制,以便企业可以根据自身需求选择和定制适用的功能模块。技术框架主要包括以下关键部分: 1....

    WebAdmin 2005 完美版

    在C#中开发Web应用主要依赖于ASP.NET框架,这是一个由Microsoft提供的强大平台,用于构建动态网站、Web应用和服务。开发者可以利用ASP.NET的多种功能,如页面生命周期管理、控件模型、内置的安全机制以及易于部署的...

    pharo-gsoc:Pharo联盟为Google Summer of Code学生提出的项目构想

    2. **Web框架的改进**:Pharo有其内置的Web框架,如Seaside,学生可能被挑战去优化这些框架,使其更适应现代Web开发的需求,例如支持SPA(单页应用)、响应式布局、WebSocket实时通信等。 3. **性能优化**:Pharo的...

    基于Linux的远程控制系统综合实验设计.pdf

    上位机,即控制端,采用Web技术和Electron框架来构建桌面应用程序。这个应用程序能实现对下位机的远程控制,包括LED灯和蜂鸣器,并能实时显示下位机设备的状态。Electron技术允许开发者使用Web技术(如HTML、CSS和...

    Windows_Developer_Preview-Windows8_guide

    Windows 8 为开发者提供了丰富的工具和框架,支持他们构建高度定制化的 Web 应用程序,以满足不同用户群体的需求。 综上所述,Windows 8 代表了微软在操作系统领域的一次重大飞跃,它不仅引入了创新的设计理念和...

    webos:ld Web桌面项目

    8. **多平台支持**:作为一款Web应用,ld Web桌面项目应能在各种操作系统和浏览器上运行,包括Windows、MacOS、Linux,甚至移动设备上的Safari、Chrome、Firefox等。 9. **可定制性**:为了满足不同用户的需求,...

    JAVA二级摸底测验习题JAVA发展史详细

    这些版本的发布,使得Java在各种应用场景中得到广泛采用,包括Web服务器、数据库连接、企业级框架(如Spring、Hibernate)和移动开发(如Android应用开发)。 随着技术的演进,Java在21世纪初迎来了更多的改进,如...

    Mobile Services-开源

    通过这样的框架,开发者可以为不同的移动平台开发出互联互通的应用程序,这些应用程序能够通过网络传输数据和命令。移动服务的框架支持多种传输协议,可以灵活地适应不同的网络环境和需求。 在这个框架下,开发者...

    WebSphere Portal Server 白皮书

    WebSphere Portal Server构想中的门户网站不仅仅是一个简单的Web应用程序入口,它还是一个功能丰富的平台,提供包括安全性、搜索、协作和工作流在内的多种附加服务。通过集成内容、应用及提供协作工作环境,...

    Android编程快速入门——字节跳动.pptx

    Android 系统架构主要分为四层:应用层(相机、电话等 APP),应用框架层(各种 Java API),系统运行层,Linux 内核层。 Android 开发环境搭建需要 JDK、IDEA、Android Studio、虚拟机等。 Java 基本介绍 Java 是...

    node-todo-app:构想Todo avec NodeJS + PUG

    - Bootstrap是世界上最流行的前端开发框架,它提供了预设的CSS样式和组件,可以帮助快速构建响应式和移动优先的网页。 - 应用可能使用Bootstrap的类和组件,如网格系统、按钮、表单、模态框等,来创建用户界面。 ...

Global site tag (gtag.js) - Google Analytics