核心思路：监听被委托人相关事件，通过当前taget判断当前是否是委托人，是的就执行相关回调。

<ul>
  <li class='target'>
      <span>test</span>
 </li>
</ul>

点击class为 target 的li可以 alert 出其所含内容（如上方代码点击弹出“test”）
在ul动态新增li元素的情况下，也要有相同效果
使用原生js实现，不使用jQuery

    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        var target = e.target,
            f = function (t) { console.log(t);
                var className = t.className;
                if (t.tagName === 'LI' && className && className.indexOf('target') >= 0) {
                    alert(t.innerHTML)
                } else if(t != ul) {
                    f(t.parentNode)
                }
            };
        f(target)
    }, false)

现在有一个按钮 $btn，我们给它绑定了点击事件，让它点一次就发一次POST请求去后端提交统计数据：

 var $btn = $('#btn');
    $btn.click(function(){
        $.ajax({ url: "a.php", type: 'POST', success: function(){
            console.log(ret);
        }});
    });

但是如果用户在很短的时间内点了好几下按钮（比如在1s里快速地点了5下），会向服务器发送很多条数据，这样并发量大的情况下服务器可能吃不消。
而且有时候我们也希望当前一条请求结束了（服务器返回数据了）之后才可以发起第二条请求。

所以请你封装一个叫 $.smartAjax 方法来做防抖处理，它可以有一个参数smartType用于确定防抖方式——如果其值为 0 则要求在 500ms 内只允许发出一条请求；
如果参数smarType值为 1 则表示只允许在前一条收到服务器响应（包括失败的响应）后才可以继续发送新请求。

示例：

    var $btn1 = $('#btn1');
    var $btn2 = $('#btn2');

    $btn1.click(function(){
        //每500ms最多只会发出一条请求
        $.smartAjax({ smartType: 0, url: "a.php", type: 'POST', success: function(){
            console.log(ret);
        }});
    });
    $btn2.click(function(){
        //只有当前一条请求收到服务器响应了，才能再发出新的请求
        $.smartAjax({ smartType: 1, url: "a.php", type: 'POST', success: function(){
            console.log(ret);
        }});
    });

    $.smartAjax = ....   //实现它

实现

$.smartAjax = (function () {
      var _time_start = 0,
          _flag = 1; //用于判断是否可以发送请求

      return function (opt) {
        var noop = function () {},
            validFun = function (f) {
              return typeof f === 'function' ? f : null
            },
            smartType = opt && opt.smartType,
            processResponse = function (callback) {
              ['success', 'error'].forEach(function (resFunName) {
                var resFun = validFun(opt[resFunName]) || noop;
                opt[resFunName] = function () {
                  callback();
                  resFun.call(this, arguments)
                }
              });
            },
            typeCallback = {
              0: function () {
                _flag && (_time_start = Date.now());
                if(_flag==0 && Date.now() - _time_start > 300) {
                  _flag = 1;
                  _time_start = Date.now()
                }
              },
              1: function () {
                if(_time_start) { //防止先调用smartType=0再调用smartType=1会失效
                  _flag = 1;
                  _time_start = 0
                }
                processResponse(function(){
                  _flag = 1;
                })
              }
            };
        var hasSmartType = typeCallback[smartType];
        hasSmartType && typeCallback[smartType]();
        if(_flag) {
          hasSmartType && (_flag = 0);
          return $.ajax(opt);
        } else {
          return $.Deferred()
        }
      }
    })();

简介

hammer.js是一个多点触摸手势库，能够为网页添加多点触摸事件，免去自己监听底层touchstart、touchmove、touchend事件。hammer.js不但支持触摸事件的浏览器，在桌面浏览器也能将鼠标点击事件当做触摸，方便开发人员进行调试。

特点

不需要依赖任何其他的框架，并且整个框架非常小。

事件架构

hammer.js主要对触屏的六大事件进行监听。

1.pan事件：在指定的dom区域内，一个手指放下并移动时间，即触屏中的拖动事件。这个事件在触屏中比较常用。该事件还可以对以下事件进行监听并处理：
panstart拖动开始、panmove拖动过程、panend拖动结束、pancancel拖动取消、panleft向左拖动、panright向右拖动、panup向上拖动、pandown向下拖动。
2.pinch事件：在指定区域内两个手指（默认）或多个手指相对移动（越来越近）或相对移动（越来越远）事件。该事件分别对以下事件进行监听:
pinchstart多点触控开始、pinchmove多点触控过程、pinchend多点触控结束、pinchcancel多点触控取消、pinchin多点触控手指靠近、pinchout多点触控手指越来越远。
3.press事件：在指定的dom区域内按压，该事件不能包含移动，最小按压时间为500毫秒。常用于手机上的“复制、粘贴”等功能。该事件对以下事件进行监听处理：
pressup按压事件离开时触发
4.rotate事件：在指定的dom区域内，当两个手指或更多手指呈圆形旋转的时候触发。该事件对以下事件进行监听：
rotatestart旋转开始、rotatemove旋转过程、rotateend旋转结束、rotatecancel旋转取消。
5.swipe事件：一个手指在屏幕上滑动，即滑动事件。该事件对以下事件进行监听：
Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动。
6.tap事件：在指定dom事件区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。

注意点

tap和click在安卓系统上可以同时触发，但click事件会有几百毫秒的延迟判断是否是点击事件，即tap事件先触发，过一段时间在触发click事件。

使用方法

<script>
//创建一个新的hammer对象并且在初始化时，指定要处理的dom元素
var hammertime=new Hammer(document.getElementById('test'))
//为该dom元素添加指定的事件，如触屏移动事件
hammertime.on('pan',function(e){
    console.log(e)
})
</script>
rotate,pinch需要手动添加事件监听程序。

//如
 var hammertime = new Hammer(document.getElementById("test"));
 hammertime.add(new Hammer.rotate());
 hammertime.on("rotate",function(){.......})

现象：
在某些手机上，height 和 line-height 设置相同时，文字不垂直居中，文字会偏上一点，height 越小时越明显。尝试多种方法无果，有人说是字体问题，参考其他 UI 框架，也存在此问题。

解决方法：
line-height的兼容问题不太好解决，容器高度越小，显示效果的差距越明显。稍微大一点的高度，最好把line-height设置为高度+1px，两个平台显示都还不错。

参考：
https://segmentfault.com/a/1190000006237977

以下是转自知乎的一个回答，这个回答的问题是“在国内前端领域里优秀的人很多，为什么没人做出 angularjs 、jQuery 之类优秀的框架？”
而我认为这个回答正好回答了前端的发展轨迹，这些框架到底解决了什么问题，给前端新人一个整体上的理解。更好的在学习之前能有个全面了解，不至于盲人摸象。

一个框架能不能火，最关键的不是技术实现上多 nb，而是在于这个框架是否代表了一种（在其所处的时代）先进的开发理念。

举例来说，在大部分开发者都在为浏览器兼容性和设计糟糕的原生 DOM API 叫苦连天的时候，jQuery 的横空出世自然显得光彩夺目。那个年代，大家根本不把前端当应用来写，能爽快的操作 DOM 就已经足够成为王道了。jQuery 简洁的语法，华丽的链式 API，同时掩盖了各种兼容问题，能不火吗？

慢慢地，大家发现前端要做应用，光有华丽的 DOM 操作也不够，还得有应用结构。所以 Backbone 出现了，把 MVX 的概念引入了前端，让大家发现原来前端也是可以有架构的。

再接着，大家发现 Backbone 的视图层依然需要手动侦听 model 的变化做各种 DOM 操作，数据到视图的映射依然繁琐。于是大家开始推崇 MVVM 数据绑定，（其实 Knockout 是和 Backbone 差不多时间出现的，只不过由于其实现不如 Backbone 来得简明易懂，所以不如 Backbone 火），于是 Angular 火了。

不得不承认，即使是放眼全球，前端开发理念相比软件开发的其他领域，也基本上是属于一个跟随的状态。比如最近函数式编程就在对前端开发产生着巨大的冲击 - 首当其冲的就是以幂等渲染函数为核心概念的 React。由于 React 本身的函数式血脉，以它作为渲染层引入其他函数式理念变得触手可及，于是我们看见现在国外前端在研究的都是 immutability, FRP, uni-directional data flow, stateless stores, isomorphic application 之类看上去高大上的话题。

如果你现在去基于一个已经普及的理念新写一个框架，即使实现得再好，也不过是造了一个轮子。当然，造一个同类理念中最好的轮子，还是会有很多人来用，但这毕竟只是一个改进的轮子，大家不会把你当做一个划时代的东西去推崇。只有当你把一个从没在这个领域出现过的理念实现了，才能够达到 jQuery, Backbone, Angular, React 这些里程碑式的框架所达到的地位。（顺便广告下，在前后端数据通信这块，Meteor 可以算是一个里程碑式的存在，Relay 可能是下一个）

所以说到底，能不能搞出风靡的东西，一部分是眼界，一部分是时势。首先只有把眼界开拓到当前领域的边界之外，才可能做出开拓这个领域的东西。国内的前端界目前基本是处于跟随国外前端界的状况（就像国外前端界跟随整个软件开发领域一样），从眼界上来说就差了一个身位，又如何奢求能够做出划时代的东西？

作者：尤雨溪
链接：http://www.zhihu.com/question/30809709/answer/52499916
来源：知乎
著作权归作者所有，转载请联系作者获得授权。