二

1.zepto.js & iscroll.js

a.Touch事件&Gesture事件简介

Touch事件和更高级的&Gesture事件，能让你的网页交互起来像native应用一样。 

    touchstart:  // 手指放到屏幕上的时候触发 
    touchmove:  // 手指在屏幕上移动的时候触发 
    touchend:  // 手指从屏幕上拿起的时候触发 
    touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详。。

这个对象（event.changedTouches属性）包括一些重要的属性： 
        clientX / clientY：// 触摸点相对于浏览器窗口viewport的位置 
        pageX / pageY：// 触摸点相对于页面的位置 
        screenX /screenY：// 触摸点相对于屏幕的位置 
        identifier： // touch对象的unique ID 
event.changedTouches[0].clientY

Gesture事件则是对touch事件的更高级的封装，主要处理手指slide、rotate、scale等动作

b.ios下使用iscroll，当手势滑出屏幕外滚动区域不回弹的bug

 document.getElementById('scroller2').addEventListener('touchmove', function(event) {
          // console.log(this.parentNode.offsetHeight);
          // console.log(event.changedTouches[0].clientY);
          // console.log(event.changedTouches[0].pageY);
          // console.log(event.changedTouches[0].screenY);
          //划出就不能监听touchend事件
          if(event.changedTouches[0].screenY>this.parentNode.offsetHeight){
              $('#scroller2').trigger('touchend');
          }
          if(event.changedTouches[0].clientY<0){
              $('#scroller2').trigger('touchend');
          }
  });

  document.getElementById('scroller2').addEventListener('touchend', function(event) {
    //litsen touchend event，then ajax load new data;
  }）

c.获取css3属性

  //today ios browser can use:
  //var translate = parseInt(document.getElementById('scroller2').style.webkitTransform.split(' ')[1].split('px)')[0]);
  //android browser can't distinguish webkit prefix
  var translate = parseInt($('#scroller2').css('transform').split(' ')[1].split('px)')[0]);

d.zepto.js初次尝鲜

//because i need to use tap event,but the official package don't include related module;
//related api:
[zepto.js API](http://www.css88.com/doc/zeptojs_api/)

3.css3动画

[Transition,Animation,Transform](http://beiyuu.com/css3-animation)

[css3动画模拟工具](http://isux.tencent.com/css3/tools.html)

@-webkit-keyframes loading {
    from { -webkit-transform:rotate(0deg) translateZ(0); }
    to { -webkit-transform:rotate(360deg) translateZ(0); }
}

{
    -webkit-animation-name:loading;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-transition-property:-webkit-transform;
    -webkit-transition-duration:250ms;
}

4.sass运用到项目中

why less & sass?

less好处是测试起来比较方便,因为可以引用JS直接在浏览器上编译,这比sass好

1.屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

2：变量定义，@navColor:#96CDCD,这样后面就不用还去取样，查表之类的。

3：mixin，减少n多代码量。ps：带参数的更帅（例如：css3的特效圆角阴影，可以去国外网站直接抄成熟的mixin，大大节省了开发时间，而且兼容性也不错）

4：嵌套，逻辑清楚。

5：颜色函数。

总之：复用，结构清晰，模块化；