HTM5
Pages: 1/2 First page 1 2 Next page Final page [ View by Articles | List ]
Aug 24
HTML5 提供了两种在客户端存储数据的新方法:

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储



然而,今天我要说的是“localStorage如何实现定时存储”,正常情况下,localStorage存入key-value后,可以永久使用(前提:不清理cookie操作).
但是,项目中,我们或许需要实现1.需要在间隔某段时间后,刷新所存的值;2.存储一段时间,而非永久;

解决思路,由于localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。所以我们需要在存取方面重新处理,先上代码:


那如何实现数据过期则查询后台的数据,数据未过期,就使用存储的数据呢?
ajax请求数据为例:

最后提醒各位, 1.使用此方式存储(包括localStorage,sessionStoraage),需注意用户隐私:重要机密信息就不要使用localStorage了,慎重使用,毕竟客户端都可以读取值。 2.localStorage比较适用于存储不经常更新且不太重要的数据。
Nov 15
典型的场景
点击button请求一个同步的ajax,在ajax之前show loading效果,gif或之类,当展现的效果是 loading并没有show出来,这是因为ajax阻塞了ui的渲染,下面的方法可以参考
方法一:
使用settimeout


方法二:
上面的图片在IE与Chrome浏览器不显示,在firefox里面正常,通过Chrome debug模式发现,它是会显示的,由于后面的计算是JQuery同步操作,需要过长时间计算,导致界面UI卡死(来不及展示)。
浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求 时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线 程阻塞,不给它执行的时间。这就是代码失效的原因。
jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。
deferred对象就是jQuery的回调函数解决方案,deferred对象的含义就是"延迟"到未来某个点再执行。
$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。
解决方法:使用JQuery Deferred对象。
Oct 3

 随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些新特性,web开发人员也都兴趣十足地试用这些新特性开发出更绚丽有趣的应用,但是各大浏览器对这些新特性参差不齐地支持(尤其是令人头疼的IE)所带来的版本兼容性问题始终都是萦绕在开发人员心头的噩梦。传统的使用习惯使得我们很难摒弃老版本浏览器,开发人员只能选择令人厌烦的手工测试,测试,再测试。

为了解决这一难题,Modernizr应运而生了。它的名字听起来有点像Modernize, 确实,该名字起源于使得开发体验能够更现代化的目的,但它并非试图使旧的浏览器现代化,也就是使它支持这些新特性(尽管你确实可以通过添加shim/polyfill脚本来让浏览器支持某些不支持的新特性,后面会介绍)。

Aug 11
APP开发模式通常分为Web APP与Native APP原生模式两种,这两种模式均各自有自己的优势,到底是采用Native App开发还是采用Web App开发一直是业界争论的焦点,但是随着HTML5的发展及云服务普及,采用HTML5进行Web App开发正在成为一种趋势,用户可以根据应用特点和需求进行选择,亦可选择两者混合模式:

Native App开发

Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

Web App开发

Web App开发即是一种框架型APP开发模式(HTML5  APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。



原生APP开发及Web APP开发模式的区别

Web APP需开发“html5云网站”和“APP客户端”,昆明天度网络公司总结这类型APP应用呈现以下特点:

(1)每次打开APP,都要通过APP框架向云网站取UI及数据;

(2)手机用户无法上网则无法访问APP应用中的数据。

(3)框架型的APP无法调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

(4)框架型APP的访问速度受手机终端上网的限制,每次使用均会消耗一定的手机上网流量;

(5)框架型APP应用的安装包小巧,只包含框架文件,而大量的UI元素、数据内容刚存放在云端;

(6)APP用户每次都可以访问到实时的最新的云端数据;

(7)APP用户无须频繁更新APP应用,与云端实现的是实时数据交互;

适用企业:电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。

Native App(原生型APP)需要开发“云服务器数据中心”和“APP客户端”,昆明天度网络公司总结这类型的APP应用呈现以下特点:

(1)每次获取最新的APP功能,需要升级APP应用;

(2)原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架;

(3)手机用户无法上网也可访问APP应用中以前下载的数据。

(4)原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

(5)APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。

适用企业:游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。

到底该如何选择Web App和Native App开发模式

移动Web无所不在,移动Web是目前唯一的支持各种设备访问的平台,与桌面Web一样,移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与桌面任务有效地连接了起来;而开发Native App可以充分利用设备的特性,而这一点往往是Web浏览器做不到的,所以对一个产品本身而言,Native App是最佳的选择。下面几节将讨论一下Native App的一些主要功能。
Aug 6
touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
Jul 26
我现在使用的浏览器是Chrome版本 32.0.1664.3 m Aura,发现该版本的Chrome每次打开页面滚动页面对于position:fixed的元素会抖动,然而在重新应用position:fixed,抖动就不存在了,或者F5刷新页面后也不会抖动。

目前可能可以解决的方法目前可以解决的方法我也尝试了一些,只剩下几个。

第一种,给fixed的元素添加css的样式,我试过,这个可以解决此闪动的问题。
-webkit-transform: translateZ(0);

第二种,设置css。我是在不复杂的页面做的测试。
html, body {height:100%;overflow:auto;margin: 0;}
注意,引入这个CSS可能会导致原来的页面布局出现问题,慎重。我的同事也说,这个是为了解决IE6系列的fixed抖动问题。

第三种,引入jquery1.7.2的类库。
引入jQuery的方法不知道为什么可以,但是引入了1.11.0的版本就无法解决这个问题。很奇怪。
Jul 26
问题一,分辨率Resolution适配:
不同屏幕宽度,html元素宽高比和字体大小,元素之间的距离自适应,使用rem单位。

问题二,单位英寸像素数PPI适配:
使用rem单位,文字会发虚。段落文字,使用px单位,用media query或js来适配。标题文字可以直接使用rem单位。

问题三,设备像素比例DPR适配:
1物理像素在

显示效果不合需求。要根据devicePixelRatio来修改meta标签的scale

参考:
http://www.html-js.com/article/2402
http://isux.tencent.com/web-app-rem.html
https://github.com/amfe/lib.flexible

demo如下:
Pages: 1/2 First page 1 2 Next page Final page [ View by Articles | List ]