所谓模块，可以简单的理解为一个js文件。比如说，一个 JqueryJS 就是一个模块。有了模块，我们便可以很方便的引用并使用别人编写或封装好的代码，需要什么功能，就引入什么模块。

引入模块的形式可以分为很多种，最原始的，要从 script标签 说起。

原文地址：Guide To Using WebP Images Today: A Case Study

俗话说一图胜千言，但在网上，一图却可以抵过上千字节甚至更多。HTTP 文档表明图片平均占整个网页的64%，基于此，图片的压缩是非常关键的，尤其当用户因为你的页面加载过慢时而关闭它。

图片压缩的主要问题是保证图片大小的情况下而不牺牲图片质量，相对于JPEG, PNG 和 GIF这些标准格式，在过去通过尝试创建新类型文件去压缩图片并不是太成功。

在之前的移动端开发中，基础库采用的都是zetpo.js，一些基本的手势交互也是用原生的touch事件完成。但最近一个项目里涉及了拖拽和缩放等一些多点触控的复杂操作，考虑项目时间紧、自己封装多点触控库的复杂，于是就决定使用hammer.js作为多点触控开发库。一个项目用下来，对hammer.js也有大概的认知了。接下来的内容描述了hammer.js的所有触摸行为和一些方法，其中有些方法和属性默认是禁止的，需要手动开启：

在前端交互中，拖拽是比较常见的。比如页面里弹出的登录框，或者一些个人主页的自定义布局，这种布局允许用户自由的拖拽不同模块到不同位置，当然这种自定义布局涉及到后台数据记录，再或者我们曾经玩过的拼图游戏，这些都是拖拽的应用。

倘若说到拖拽的表现形式，有通过js结合mouse事件(mousedown、mousemove、mouseup)来改变DOM元素的left、top值的，也有html5里拖放API，而今天讲的则是canvas里的图形拖拽。

在canvas还未成为规范前，对于html元素的动画都是通过定时器不断改变DOM属性来实现的，当到了某个目标值，我们要做的只是判断属性值是否相等然后再决定是否清空定时器。元素的动画包括线性和变速，这样的动画可以自己去写，当然也有很多类似的动画库，比如之前在做 flappy bird时里面提到的tween.js。