前端之旅：手风琴效果和菜单

这十几天做的事情很少，很少看书，都在写代码，但是代码也写得很少，最开始只是单纯想写一个手风琴图片效果，但是找到一个手风琴的菜单，也想尝试一下，就同时设计写了几个菜单效果，但在实现的时候，可能是在大半夜思路不清晰的原因，导致写的代码混乱，对事件的处理也很混乱，在终于完成了几个效果后，几天前开始了重构，一下子就思路清晰了很多，代码实现思路也更简单，省去了些代码行数，今天在终于实现了手风琴图盘效果后，才想起最近的总结还没完成。

中间还看了IFE2015 task3的几篇关于作用域链和原型链的文章，除了理解作用域链和原型链外，还对其他几方面诸如闭包/this理解都更加清晰了。

今晚上对move.js（个人在完善的一个动画函数）进行了更新，加入了对 requestAnimationFrame 的支持，这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这样就可以将原来使用setTimeout的动画作为一种降级方案，当然只有比较新的浏览器才支持这个API，所以我是用了这篇文章: requestAnimationFrame for Smart Animating中提到的Erik Möller提供的Polyfill

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

上文提到的几个效果：

1. 几个菜单
   

2. 手风琴图片（图片来自C&A官网，侵删）