杂七杂八

面试

lensh

微醺岁月

http://yrq110.me/

滴滴FE

路易斯

玩转prototype

前端性能优化之 DOM 篇【5星级】

https://github.com/yrq110/odds-and-ends

jQuery->JavaScript一览表

2017前端面试题及答案总结|掘金技术征文

JS如何判断一个对象为空

this、apply、call、bind

notebook

从原理到轮子之JS模块化

 var head = document.getElementsByTagName(\'head\')[0] || document.body;

function loadJsModule(url) {
    var script = document.createElement(\'script\');
    script.charset = \'utf-8\';
    script.type = \'text/javascript\';
    script.onload = script.onreadystatechange = function() {
        if (!this.readyState || this.readyState === \'loaded\' || this.readyState === \'complete\') {
            /*
             * 加载逻辑, callback为define的回调函数, args为所有依赖模块的数组
             * callback.apply(window, args);
             */
            script.onload = script.onreadystatechange = null;
        }  
    };
}

史上最全面、最透彻的BFC原理剖析

移动 Web 开发问题和优化小结

JS对象的深浅复制

BetterScroll：可能是目前最好用的移动端滚动插件

vue移动助手实践【5】

聊聊Vue.js的template编译

为什么 call 比 apply 快？

setTimeout(fn, 0) 的作用

发布-订阅模式

互联网大厂求职面经及总结

js的事件循环

25 个最基本的 JavaScript 面试问题及答案

前端常见跨域解决方案（全）

Websocket

JS 的正则表达式

CSS 伪类选择器

vh,vw单位你知道多少？【扫盲】

Event Loop

前端性能优化之加载技术【5星级】

JavaScript Event Loop 机制详解与Vue.js 中 nextTick 【干货】

CSS技巧：逐帧动画抖动解决方案

理解构造函数与原型对象

设计模式系列课程-委托模式实战微博发布功能

Javascript 黑科技【4星级】

从性能的角度看CSS选择器

【整理】CSS布局方案

getElementsByClassName与classList兼容性问题与解决方案

Ajax知识体系大梳理

Fetch进阶指南

Promise使用手册

你不知道的CSS 【干货】

CSS实现长宽比的几种方案

高性能滚动 scroll 及页面渲染优化，函数节流【干货】

JS面试高级技巧【干货】

你不知道的JS 【扫盲】

你不知道的CSS（二）

浮动两端对齐【扫盲】

面试必备之JS继承方式总结【干货】

整理下《前端江湖面试》对自己有益的题目。

阿里校招前端面经【干货】

重新认识JS的this

H5拖放和WebWorker 【扫盲】

史上前端面试最全知识点（附答案）【干货】

JSONP原理及简单实现【扫盲】

移动端Click点击300毫秒延迟及其解决办法

zepto的tap点透问题

JS开发中的一些小技巧和方法

周末读fastclick.js源码有感在touchend合成一个事件立即触发解决300ms问题

fastclick是将事件绑定到你传的元素（一般是document.body）
② 在touchstart和touchend后（会手动获取当前点击el），如果是类click事件便手动触发了dom元素的click事件
所以click事件在touchend便被触发，整个响应速度就起来了，触发实际与zepto tap一样
既然浏览器有这300ms的延迟，那么我们来代替浏览器判断，手动触发click事件，这也是fastClick的解决方案。

// 自定义事件
var eve = new Event(\'自定义事件名\');
el.addEventListener(\'自定义事件名\', function(){
    console.log(\'自定义事件\')
});
el.dispatchEvent(eve);
//

fastClick的核心代码

FastClick.prototype.onTouchEnd = function(event){

  // 一些状态监测代码 

  // 从这里开始，
  if (!this.needsClick(targetElement)) {
    // 如果这不是一个需要使用原生click的元素，则屏蔽原生事件，避免触发两次click
    event.preventDefault(); 
    // 触发一次模拟的click
    this.sendClick(targetElement, event);
  }
}
这里可以看到，FastClick在touchEnd的时候，在符合条件的情况下，主动触发了click事件，这样避免了浏览器默认的300毫秒等待判断。为了防止原生的click被触发，这里还通过event.preventDefault()屏蔽了原生的click事件。

我们来看看他是怎么模拟click事件的

FastClick.prototype.sendClick = function(targetElement, event) {

  // 这里是一些状态检查逻辑

  // 创建一个鼠标事件
  clickEvent = document.createEvent(\'MouseEvents\');
  // 初始化鼠标事件为click事件
  clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);

  // fastclick的内部变量，用来识别click事件是原生还是模拟
  clickEvent.forwardedTouchEvent = true;

  // 在目标元素上触发该鼠标事件，
  targetElement.dispatchEvent(clickEvent);
我们在网上搜索fastClick，大部分都在说他解决了zepto的点击穿透问题，他是怎么解决的呢？就是上面最后一句，他模拟的click事件是在touchEnd获取的真实元素上触发的，而不是通过坐标计算出来的元素。