论坛 产品库 视频 专题 CIO俱乐部 Windows8 实验室 CMO俱乐部 案例

浅析企业移动Web架构的设计

发布时间:2013-07-19 11:13:00 来源:比特网 作者:互联网
关键字:移动Web架构

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

  1.轻量级

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

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

  面对如此多的手机平台和浏览器,要你的移动应用在所有浏览器上表现如一是很困难的,有时候你需要对不同浏览器加载不同的样式文件,又或是运行不一样的函数来实现效果。因此我们的框架必须有能识别各种主流浏览器的方法,具体点,你的框架必须能区分如iPhoneiPadAndroid、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的思想。


比特微信账号
比特微信账号

微信扫一扫
关注Chinabyte

返回首页 长微博 返回顶部