手机触屏版页面开发总结

在最初进行JS 框架的选型， 选择的是jQuery + jquery.mobile。

框架选型问题： 

   【1】大小问题， jQuery 是 277KB ，jquery.mobile 是 451KB ，当用户处于弱网络时，这个大小对于手机端的加载来说，彻底是一场灾难。
  【2】抛开 jquery.mobile 的大小不说， 对于移动端的开发而言， jquery.mobile并没有出色的优点可言。在使用的过程当中jquery.mobile  会给页面的DOM元素附加居多无用的CSS样式名， 大大减低了DOM布局的不稳定性。

框架选型解决办法： 
 
【1】zepto.js 是一款专为 移动端而生的JS 框架，压缩前大小为 54.6KB   压缩后以后只有 9.7KB 大大增长了JS的下载速度。
【2】 zepto.js 的使用和 JQ 几乎如出一辙， 大大减少了学习成本， 只要用过JQ 的， 直接用就行了，且他不会给页面的 dom元素附加垃圾样式。


tap事件点透：

点击事件尽可能减小使用  click ， 而改用 tap， 缘由在于 click 点击会出现 300ms左右的延时。
可是在使用 tap 做为点击事件的时候， 当你点击的元素定位方式为 固定定位 或者是 绝对定位时， 会出现点透的状况。


如上图， 灰色为半透明遮罩层， 用来作会弹出框的背景，遮住APP页面，点击 A 时，遮罩层消失， 点击 B 时 ， 进入 【100%本息保障】 栏目的详情页面， 若是此时 会在 A 上绑定 tap 事件。 当你点A 的时候你会发现一个神奇的现象， 遮罩层会消失， 可是消失后页面会进入到 【100%本息保障】 栏目的详情页面 。 是由于 tap 事件被点透了。

tap事件点透解决办法：
e.preventDefault(); // 阻止“默认行为”
是否是以为很简单？简单没关系，最主要的是完美的解决了tap的点透问题 ，这个有点相似 原生JS 中的阻止事件冒泡， 关于事件冒泡， 在此不作解释和记录。 



zepto.js 中的animate问题：
在移动端，常常会处理一些动画效果， 比方页面的图片焦点轮播效果， 弹出框的渐隐效果， zepto.js 中提供了一个处理动画的函数，animate， 在处理PC端的动画时，此函数很是优雅， 可是在处理速度不如PC的移动端来讲， animate 函数就有点爱莫能助了， 在处理动画时， 勉强能够完成， 可是在一些性能较差的手机上， 动画效果并不明显， 甚至会明显看到动画很卡。


zepto.js 中的animate问题处理办法：
touchslider.js 是一款专门处理移动端页面 图片焦点轮播效果的JS插件， 这款插件很是小，只有几KB大， 代码量也不大， 那天下午读过插件源码， 其实逻辑并不复杂， 主要是 JS + CSS3 来处理动画的， 用JS 对动画进行初始化处理， 而动画的执行则交给CSS3， 你们都知道， CSS3中的  animation 和 transition 有兴趣的则能够本身私下去了解。


webapp页面数据缓存问题：
在制做页面的过程当中，页面的离线缓存卡了我很长一段时间，中间各类尝试，各类纠结，其中的心酸且听老衲细细道来。
html5提供了多种页面的离线缓存解决办法。

第一种：application cache
application  是一种较简单的数据缓存方式， 可将你要进行缓存的文件写入到 name.manifest  配置文件中。可是研究了一段时间发现此方案不可行，缘由在于，只能对写入了配置项的内容进行缓存，且当使用手机360等软件清理手机缓存时， 缓存的数据会被清理掉。

第二种：localstorage 和 sessionstorage
因而想到了第二种解决方案，localstorage 和  sessionstorage ， 这两种方式均可以将网络数据存储在本地， 前者保存的数据在浏览器关闭后， 依然存在手机中， 即便是你卸载掉此应用，如若不是你手动删除数据，数据将永久存在手机中。 然后者保存的数据会随着浏览器的关闭而被清理掉， 因此选择了使用 localstorage 。 可是仅仅有数据， 必需要有页面框架让其渲染。 就像是水同样， 若是没有杯子盛水，水永远不可能成为杯子的形状，如今数据有了，可是须要一个容器来装载它。 而当手机没有移动网络是， 咱们没法从网络上获取页面，即便是有数据， 也无用， 因而用了一个不太好的方法， 将静态页面放到 webapp包中，这样的好处在于无须去网络下载CSS ， JS 等内容， 数据的加载直接用 ajax 就行了！
到这里， 问题貌似获得了解决， 且慢， 又遇到问题了， 我如何判断手机是否有网络？ 固然， web端能够经过 ajax 向服务器发送一个请求是否失败， 若是失败则证实无网络， 这个办法看似可行， 可是， 当用户处于弱网络时， ajax  请求必然会很慢， 有很是大的可能会请求失败， 虽然只是弱网络仍是有网络的。那怎么呢？ 可让 安卓 和 IOS 来进行网络判断 ， 而后将网络参数 token 带在 url 地址后面， 如: http://www.baidu.com?token=0 当传入的 token=0时， 为无网络 ； token=1 时为有网络。 IOS 一切正常， 看似问题解决了同样， 可是， 骚年， 没关系， 在安卓4.0下测试， 没法获取到参数， 这是由于， 安卓 4.0 系统不支持将参数带在 url 后面，才刚刚看到曙光，在发现此问题后， 又陷入迷茫， 不过没关系， 男人嘛？ 就应该激流勇进， 迎难而上。 因而找 安卓开发沟通，找解决办法， 在一番痛苦的查找后，发现能够经过 安卓 调用 webapp端 JS 来完成传参，测试成功。因而大功告成，

localstorage 的写入方式
     var json_data = {id:12,name:"yang",email:"aaa@aaa.com"};   
     storage.setItem("json_data",JSON.stringify(json_data));

localstorage 的读取方式
    var json_data = JSON.parse(storage.getItem("json_data")) ;

注：localstorage 只能保存 5M左右大小的数据，1M = 1024KB  1KB= 1024字节， 按一个汉子两个字节来算， 大概能够存储2621440个汉字，若是是英文字母或者是数字的话能够存储5242880 个， 这个大小彻底够用。

第三种： webSQL
看名字就知道， webSQL 就是一个web端的数据库，IE9~IE9+、chrome、Firefox、 Opera、Safari。webSQL和 localstorage区别在于， webSQL能够创建多张数据表， 每一张表至关因而一个localstorage ，很明显在存储的数据大小上远远要大于 localstorage ，可是复杂程度也是远远高于 localstorage 的，webSQL的使用和 localstorage 差很少，就不作细细解说了！