HTML5触摸界面设计与开发 - 读书 - 张子阳的博客

HTML5触摸界面设计与开发

2017-12-14 张子阳 推荐: 3 难度: 3

这本书大体可以分为三个部分:移动端的优化、动画的实现方法、滑动和手势。

移动端的优化

首先讲了移动端和电脑端的一些不同,讲到了viewport的概念和相关的虚拟像素、媒体查询,借助媒体查询来实现横屏、竖屏的区别显示。

接着讲到了提高页面响应速度的优化策略。下面列出的优化策略,小部分书中未涉及,既然提到这个了,我就顺便补充一些。。。

除了上面这些小技巧以外,还专门用一个章节讲了“PJAX”,开始我也不懂这个是什么,看了以后其实就是使用 history api + ajax 来实现单页的效果。

这个例子我后面补上

动画的实现方法

这一节讲解了实现动画的几种方式:

使用requestAnimationFrame和setTimeout的一个最大区别就是:它只接受一个回调函数,并无法设置时间。因此,在不同浏览器下的执行频率是不同的!除此以外,它需要加浏览器前缀(webkit、moz、ms),不及setTimeout通用。下面的例子演示了固定函数执行时间(不限制次数),和固定函数执行次数(不限制时间)的不同。

例子:固定函数执行时间   Chrome 63下,每秒大概执行58次。

例子:固定函数执行次数   Chrome 63下,执行100次大概1800毫秒。

所有例子都通过查看源码来了解

滑动和手势

这部分几乎全是实例,也就是代码+代码讲解的方式进行,但是作者的讲述方式不够好,应该先展示最终结果,再讲一步步的实现过程。要么就是翻译的水平一般,总之看得有点晕。

几个例子是:

这些例子除非全部实现一遍,否则看一遍留下不了太多印象。这些都是很好的练习题,很多我之前实践过,但都耦合在项目中,没有提取出来。有时间的话也做几个范例出来。

其实知识点不多,实际都是对touchstart、touchmove、touchend三个事件的处理而已。

总得来说,这本书还可以,按是真正有价值的部分比较少。标题是“触摸界面的设计与开发”,实际一大半都在讲性能优化,而这些性能优化技巧又是很普遍的,和“触摸”没什么太大关系。而书本身又只有薄薄的200页,关于触摸的内容有多少可想而知。值得肯定的是,书中举得例子都比较接地气,实际项目中比较常见。

感谢阅读,希望这篇文章能给你带来帮助!