1 Star 0 Fork 0

巧克力恋人 / libin_Blog

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
小程序历史栈最多只支持10层
当小程序业务比较复杂时,就很容易超过10层。
当超过10层后,有的机型是点击无反应,有的机型会出现一些未知错误

JavaScript数组所有API全解密

JavaScript字符串所有API全解密

二分查找、二分边界查找算法的模板代码总结

深度广度解析 call 和 apply 原理、使用场景及实现

移动端关闭虚拟键盘

document.activeElement.blur();

正则表达式匹配版本

"Mozilla/5.0 (Linux; Android 6.0.1; MI NOTE LTE Build/MMB29M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 Mobile Safari/537.36 Weibo (Xiaomi-MI NOTE LTE__weibo__8.5.3__android__android6.0.1)".match(/(__weibo__)([\d.]*)(__android|__iphone)/)[2]
"8.5.3"

浅谈微信小程序登陆与Oauth,OAuth 2.0

// 解决键盘弹出后挡表单的问题
    window.addEventListener('resize', function() {
      if(
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        window.setTimeout(function() {
          if('scrollIntoView' in document.activeElement) {
            document.activeElement.scrollIntoView();
          } else {
            document.activeElement.scrollIntoViewIfNeeded();
          }
        }, 0);
      }
    });

前端资源大全

转载自: 5bf1afb1-6eb7-45f1-a3e7-8e7f515601fe

JavaScript深入系列

Vue.js源码剖析 https://github.com/answershuto/learnVue

JavaScript数组所有API全解密

个人分享--web前端学习资源分享 - 掘金

小技巧|移动端网页调试神器Eruda使用技巧

浏览器中的图像识别 API

一起来聊聊table组件的固定列 - 掘金

使用mongo-express/adminMongo通过WEB管理MongoDB(可视化)

小技巧|H5禁止手机虚拟键盘弹出

"天龙八步"细说浏览器输入URL后发生了什么

H5页面中尝试调起APP - qize - 博客园

用css让一个容器水平垂直居中 - 最骚的就是你 - 博客园

你不知道的CSS(一)

你不知道的CSS(二)

你不知道的CSS(三)

你以为 CSS3 只是个简单的布局?

实现div毛玻璃背景 - 掘金

CSS常见布局解决方案 - 王郝 - 博客园

CSS经典布局之Sticky footer布局【绝对底部】

HTML 文档之 Head 最佳实践

CSS预加载:

关于Preload, 你应该知道些什么?

现代浏览器性能优化-CSS篇 - 掘金

[译]Preload,Prefetch 和它们在 Chrome 之中的优先级

使用 CSS 追踪用户 - 掘金

前端性能优化之缓存技术 - 掘金

怎麽把"滚动条"隐藏? - 掘金

JavaScript深入系列 【干货】

JavaScript数组所有API全解密 【干货】

移动端:页面->手淘互动动效的探索 - IT大咖说 - 大咖干货,不再错过 【扫盲】

Jonathan Zhang

sunshine小小倩

关于 React Router 4 的一切

anime.js 实战:实现一个 SVG 形变(morphing)动画 【干货】

React Redux 中间件思想遇见 Web Worker 的灵感 【干货】

在 Vue.js 中实用任意 JavaScript 第三方库 【干货】

前端每周清单半年盘点之 Vue.js 篇 【干货】

讲真,别再使用JWT了 【干货】

学习正则表达式的简单方法 learn-regex 中文版本 【扫盲】

嗨, 你知道 this 吗? 【扫盲】

EasyWebpack 【干货】

记一次webpack打包优化 【干货】

这些JavaScript编程黑科技 【干货】

webpack 【扫盲】

使用原生JS封装Tap事件,解决移动端300ms延迟 【一般】

极简风格个人博客

像VUE一样写微信小程序-深入研究wepy框架

从[] == ![] 看隐式强制转换机制

由返回上一页并刷新页面想到的

HTTP中的状态码

前端安全

DNS域名解析解剖

深入理解ES6

blog

编写自己的CSS3代码库(常用动画的实现) 【干货】

温习javascript之Array的使用 【扫盲】

前端学习之路 【干货】

七种实现左侧固定,右侧自适应 【扫盲】

链接文字超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战

编写自己的代码库

ES6常用新特性

es7-decorator修饰器

小火柴的蓝色理想

记录一些工作中遇到的问题,及解决方案

前端基础面试题

CSS Grid 网格布局

JavaScript 专题之如何判断两个对象相等 【干货】

读 Zepto 源码,分析 Zepto 源码

Async Functions (异步函数)

DOM扩展,DOM2和DOM3

event对象中 target和currentTarget 属性的区别。

WebSocket与消息推送

LESS学习:LESS的基础语法

var, let, const详解

js中的作用域与预解释

必备之常用正则表达式

从移动端click到摇一摇

HTML5中手势原理分析与数学知识的实践

宇cccc

JavaScript 专题之函数柯里化

原生JS实现AJAX、JSONP及DOM加载完成事件 【扫盲】

Ajax关于readyState(状态值)和status(状态码)的研究 【扫盲】

notebook

javascript中数组排序的秘密

高质量的 React 相关文档和翻译

RxJS入门

Async Functions (异步函数)

点击水波纹,滑块

HTTP协议详解 【基础】

原生JS实现最简单的图片懒加载

笔试题

彻底搞懂 async & defer

CC

如何区分Babel中的stage-0,stage-1,stage-2以及stage-3

wen

ES6必知必会

谈谈jquery的事件名称和命名空间

读Zepto源码

庖丁解牛React-Redux

加深对 JavaScript This 的理解

JavaScript中的this

换个思路理解Javascript中的this

this指向看JavaScript

面向初学者的高阶组件教程

关于Promise

彻底掌握Promise

从零实现一个简单的 Promise

八段代码彻底掌握 Promise

什么是cors跨域

移动混合开发中的 JSBridge

H5与Native交互之JSBridge技术

使用vue-cli工具构建的vue+webpack项目配置详解

在浏览器中输入一个url,敲击回车之后发生了啥

vue框架的基本原理

深刻理解Vue中的组件

如何更有效率和质量地开发Vue项目

Vue.js 中,7种定义组件模板的方法

vue插件--键盘

深入理解 JavaScript 数据双向绑定

VueJS 开发常见问题集锦

Vue 2.3、2.4 知识点小结

Vue 2.4.0 带来的 4 个重大变化

Vue2.4组件间通信

Vue 响应式源码分析

Vue平凡之路

Vue全局API

监听数组变动

从0开始实现Vue数据绑定

CommonJS

vi 常用快捷键笔记

链接文字理解 async/await

轻松理解vue框架的基本原理,简单实现一个todo-list

Vue.js 中,7种定义组件模板的方法

Vue组件通信实践记录

Vue-cli创建vue项目以及配置文件梳理

vue-cli源码分析

Vue的异步组件

如何优雅地写js异步循环

React 中的五种组件形式

浅尝初试 React 技术栈

React 组件性能优化

react-redux-router 一个完整项目解读

redux源码分析

React 进阶之高阶组件

React中的组件通信问题

Redux从设计到源码

React+redux+源码解析

Raect

聊聊 React Router v4 的设计思想

10个JavaScript难点

浅谈Flux架构及Redux实践

babel知多少

Redux 知识

webpack之loader和plugin简介

npm 与 package.json 快速入门

谈谈JavaScript中的this关键字

JavaScript的原型及原型链

React+node+redux 在线项目【react 扫盲】

React使用小记

带着三个问题一起深入浅出React高阶组件 【扫盲】

关于 React Router 4 的一切 【扫盲】

你不知道的 React Router 4 【干货】

react开发vscode插件推荐

JavaScript——单例模式

抽奖刮刮卡

谈谈JS中的高级函数

图片上传进阶【跨域】

ES6 Generator 基础指南

当你想监听DOM时,不尝试用一下 MutationObserver 吗?

Webpack 打包优化之速度篇

webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件

如何制作一个完美的全屏视频H5

移动 H5 首屏秒开优化方案探讨

http协议缓存机制

我的 Chrome 插件集

Chrome程序猿插件

用CSS让你的文字更有文艺范

H5玩法知多少 【扫盲】

vue-vscode-snippets 【干货】

2017 年最佳 Sublime Text 3 主题 【扫盲】

JavaScript 对象所有API解析

链接文字History API & Location 对象

白话原型和原型链

《JavaScript框架设计(第2版)》之语言模块 【扫盲】

HTML/CSS/JS编码规范

使用 ES2017 中的 Async(异步) 函数 和 Await(等待) 【扫盲】

JavaScript 骚操作

手机端页面自适应解决方案—rem布局进阶版(附源码示例)

BFC和 websocket

后jQuery时代

是时候和 jQuery 说拜拜了么?

10分钟学会ES7+ES8精读AsyncAwait

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

javascript 之模块化篇

javascript常用函数 【4星级】

vue2实践,填坑筆記(持续更新) 【***】

JavaScript数组所有API全解密 【干货】

JavaScript字符串所有API全解密 【干货】

js数组API--温故知新

数组扁平化、去重、排序,又搞定了一道校招题

数组的32场演唱会

详解JS之Arguments对象

JS中可能用得到的全部的排序算法

js 深拷贝 vs 浅拷贝 【扫盲】

你做的拷贝是真的深拷贝吗

Vue.js 2.0 快速上手精华梳理 ,Vue教程 【扫盲】

https://www.w3ctech.com/ 【干货】

等比例缩放的盒子 【干货】

CSS实现长宽比的几种方案 【扫盲】

css中如何做到容器按比例缩放

http://www.javascript.fun/ *

http://dunizb.com/ *

Grid布局学习 【干货】

js实现手机横竖屏事件

前端工程师都有用哪些比较靠谱的小工具?

npm scripts : 每个前端开发都应知道的一些使用提示

CreateJS中文网 *

Hover Buttons *

javaScript的数据结构与算法 【干货】

Alloy周刊

CSS 动画技巧与细节 【干货】

浏览器兼容性问题解决方案 · 总结 【扫盲】

前端每周清单

教你从零开始搭建一款前端脚手架工具

feather - 一个开源的SVG图标库

如何使用GitHub Pages在线加载静态网页

读Zepto源码

用纯CSS实现跳跳球动画

Vue 折腾记

编码过程中,我的常用网站工具

前端实用的在线工具推荐系列

meta 标签大全

通过JS判断网络状态调研及实例demo说明

BetterScroll:在移动端滚动场景的应用

如何用 js 获取虚拟键盘高度?

HTML5 video blob

JavaScript的记忆函数真的可以提升性能吗?

avaScript是如何工作的:内存管理 + 如何处理4个常见的内存泄漏(译)

原生JS实现最简单的图片懒加载

CSS 写作建议和性能优化小结

网站可以一键变色吗?

面试

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获取的真实元素上触发的,而不是通过坐标计算出来的元素。

读 Zepto 源码

你可能不知道的 border-radius

VS Code 折腾记

浏览器兼容性问题解决方案 · 总结

页面卡顿?操作慢?

margin-right右边距失效

JavaScript 专题之函数记忆

前端精读周刊

封装一个简易的异步队列

JavaScript 异步队列实现及拓展

JavaScript专题之递归

有意思的clip-path

可定制的 CSS 加载动画

https://github.com/microzz

https://lenshen.com/

https://microzz.com/

谦龙

(void 0) 与 undefined 之间的小九九

MVVM —— 如何进行 DOM 的操作

给axios做个挺靠谱的封装

这些Zepto中实用的方法集 【干货】

10个有趣的Javascript和CSS库 【干货】

改写你的checkout input默认样式 【干货】

HTML/CSS/JS编码规范 【扫盲】

写一个挺靠谱的Vue组件 【扫盲】

99%的人都理解错了HTTP中GET与POST的区别

网易前端面经 【干货】

JavaScript异步编程面试题 【干货】

巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 【干货】

【当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!】

阿里校招前端笔试题

koa2进阶学习笔记

Node.js 包教不包会

纯前端实现人脸识别-提取-合成

从零开始教你写一个NPM包

GitHub 开发的首个 Chrome Github代码查看

localStorage 还能这么用

React:

React 高阶组件浅析

React高阶组件实践

从 setState promise 化的探讨

npm 入门教程

Nestjs 文档

Boss-UI 【干货】

从零开始使用vue搭建带有SSR服务端渲染的前后台项目weeklyPlus

React组件类型

[React技术内幕] key带来了什么 【干货】

React技术内幕 【干货】

无状态组件你真的知道

Redux store 的动态注入

理解 React-redux connect

React、Redux与复杂业务组件的复用

koa源码--基础篇

Redux中间件对闭包的一个巧妙使用

总结个人使用过的移动端布局方法

理解和学习mobx-react

探索 React 中 es6 的继承机制

Redux 还是 Mobx,让我来解决你的困惑!

https://github.com/sunyongjian/blog

源码看React setState漫谈

聊聊React高阶组件(Higher-Order Components)

React-Redux源码分析

手把手教你写一个react validator 【表单验证】

React合成事件和DOM原生事件混用须知

Vue:

AT-UI 【干货】

Vue 进阶教程之:非父子组件通信方法(非Vuex)

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

从event loop看vue的nextTick 【干货】

从Vue.js源码看异步更新DOM策略及nextTick

Vuejs渡劫系列一:日常开发中必须掌握的细节

HTML5新特性之Mutation Observer,监听DOM变化

深入浅出基于“依赖收集”的响应式原理

剖析vue实现原理,自己动手实现mvvm

vue组件之间的通信

Vue.js数据绑定原理

Vue.js 依赖收集

Vue2.4组件间通信新姿势 【干货】

重复造轮子:从0开始实现Vue数据绑定

MVVM 开发总结 —— Vue 组件

vue 填坑系列总结——scoped 【干货】

从Vue.js源码角度再看数据绑定

用addRoutes实现动态路由

浅谈axios

axios 中文文档 翻译

处理 Vue 单页面 Meta SEO的另一种思路

说说VNode节点(Vue.js实现)

日常开发中必须掌握的细节

基于 vuejs 2.0 轻量级的 ui组件库

Vue.js 2.0 组件级懒加载方案

Vuex 源码分析

VirtualDOM与diff(Vue实现)

性能优化之组件懒加载: Vue Lazy Component 介绍

vue IOS一个页面阻塞问题的排查过程

VueJS 开发常见问题集锦

Vue.js源码——事件机制

Vuex2.0源码解析

Webpack

数据模拟神器 easy-mock 正式开源

加载优化

Web 的现状:网页性能提升指南

RxJS 数据板,将数据当作水流一样,集中管理和监视数据流, 监控每一次数据流动。

npm scripts : 每个前端开发都应知道的一些使用提示

基于React/Mobx/React-Router v4/Webpack v3的脚手架。

快一点, 再快一点

webpack 从入门到工程实践

Webpack你的包

67 个拯救前端开发者的工具、库和资源

深入浅出webpack教程系列1-安装与基本打包用法和命令参数

用Nodejs开发命令行工具

你真的会用 Babel 吗?

webpack:从入门到真实项目配置

vue-cli 自定义路径别名 assets和static文件夹的区别 --save-dev和--save的区别

[前端面试之webpack篇](http://link.zhihu.com/?target=https%3A//juejin.im/post/59cb6307f265da064e1f65b9

BFC和 websocket

10分钟学会ES7+ES8精读AsyncAwait

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

javascript 之模块化篇

vue2实践,填坑筆記(持续更新) 【***】

JavaScript数组所有API全解密 【干货】

JavaScript字符串所有API全解密 【干货】

数组扁平化、去重、排序,又搞定了一道校招题

数组的32场演唱会

详解JS之Arguments对象

JS中可能用得到的全部的排序算法

js 深拷贝 vs 浅拷贝 【扫盲】

你做的拷贝是真的深拷贝吗

Vue.js 2.0 快速上手精华梳理 ,Vue教程 【扫盲】

https://www.w3ctech.com/ 【干货】

等比例缩放的盒子 【干货】

CSS实现长宽比的几种方案 【扫盲】

css中如何做到容器按比例缩放

http://www.javascript.fun/ *

http://dunizb.com/ *

Grid布局学习 【干货】

js实现手机横竖屏事件

前端工程师都有用哪些比较靠谱的小工具?

npm scripts : 每个前端开发都应知道的一些使用提示

CreateJS中文网 *

Hover Buttons *

javaScript的数据结构与算法 【干货】

Alloy周刊

CSS 动画技巧与细节 【干货】

浏览器兼容性问题解决方案 · 总结 【扫盲】

前端每周清单

教你从零开始搭建一款前端脚手架工具

feather - 一个开源的SVG图标库

如何使用GitHub Pages在线加载静态网页

读Zepto源码

用纯CSS实现跳跳球动画

Vue 折腾记

编码过程中,我的常用网站工具

前端实用的在线工具推荐系列

meta 标签大全

通过JS判断网络状态调研及实例demo说明

面试

lensh

路易斯

玩转prototype

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

JS 的正则表达式

CSS 伪类选择器

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

Event Loop

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

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

理解构造函数与原型对象

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

Javascript 黑科技 【4星级】

【整理】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获取的真实元素上触发的,而不是通过坐标计算出来的元素。

读 Zepto 源码

你可能不知道的 border-radius

VS Code 折腾记

浏览器兼容性问题解决方案 · 总结

页面卡顿?操作慢?

margin-right右边距失效

JavaScript 专题之函数记忆

前端精读周刊

封装一个简易的异步队列

https://github.com/microzz

https://lenshen.com/

https://microzz.com/

谦龙

(void 0) 与 undefined 之间的小九九

MVVM —— 如何进行 DOM 的操作

给axios做个挺靠谱的封装

这些Zepto中实用的方法集 【干货】

10个有趣的Javascript和CSS库 【干货】

改写你的checkout input默认样式 【干货】

HTML/CSS/JS编码规范 【扫盲】

写一个挺靠谱的Vue组件 【扫盲】

99%的人都理解错了HTTP中GET与POST的区别

网易前端面经 【干货】

JavaScript异步编程面试题 【干货】

巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 【干货】

【当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!】

阿里校招前端笔试题

koa2进阶学习笔记

Node.js 包教不包会

纯前端实现人脸识别-提取-合成

从零开始教你写一个NPM包

React:

React 高阶组件浅析

React高阶组件实践

从 setState promise 化的探讨

npm 入门教程

Nestjs 文档

Boss-UI 【干货】

从零开始使用vue搭建带有SSR服务端渲染的前后台项目weeklyPlus

React组件类型

[React技术内幕] key带来了什么 【干货】

React技术内幕 【干货】

无状态组件你真的知道

Redux store 的动态注入

理解 React-redux connect

React、Redux与复杂业务组件的复用

koa源码--基础篇

Redux中间件对闭包的一个巧妙使用

总结个人使用过的移动端布局方法

Vue:

AT-UI 【干货】

Vue 进阶教程之:非父子组件通信方法(非Vuex)

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

从event loop看vue的nextTick 【干货】

Vuejs渡劫系列一:日常开发中必须掌握的细节

HTML5新特性之Mutation Observer,监听DOM变化

剖析vue实现原理,自己动手实现mvvm

vue组件之间的通信

Vue.js数据绑定原理

Vue.js 依赖收集

Vue2.4组件间通信新姿势 【干货】

重复造轮子:从0开始实现Vue数据绑定

MVVM 开发总结 —— Vue 组件

vue 填坑系列总结——scoped 【干货】

从Vue.js源码角度再看数据绑定

用addRoutes实现动态路由

浅谈axios

axios 中文文档 翻译

处理 Vue 单页面 Meta SEO的另一种思路

说说VNode节点(Vue.js实现)

日常开发中必须掌握的细节

Webpack

数据模拟神器 easy-mock 正式开源

加载优化

RxJS 数据板,将数据当作水流一样,集中管理和监视数据流, 监控每一次数据流动。

npm scripts : 每个前端开发都应知道的一些使用提示

基于React/Mobx/React-Router v4/Webpack v3的脚手架。

快一点, 再快一点

webpack 从入门到工程实践

Webpack你的包

67 个拯救前端开发者的工具、库和资源BFC和 websocket

10分钟学会ES7+ES8精读AsyncAwait

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

javascript 之模块化篇

vue2实践,填坑筆記(持续更新) 【***】

JavaScript数组所有API全解密 【干货】

JavaScript字符串所有API全解密 【干货】

数组扁平化、去重、排序,又搞定了一道校招题

数组的32场演唱会

详解JS之Arguments对象

JS中可能用得到的全部的排序算法

js 深拷贝 vs 浅拷贝 【扫盲】

你做的拷贝是真的深拷贝吗

Vue.js 2.0 快速上手精华梳理 ,Vue教程 【扫盲】

https://www.w3ctech.com/ 【干货】

等比例缩放的盒子 【干货】

CSS实现长宽比的几种方案 【扫盲】

css中如何做到容器按比例缩放

http://www.javascript.fun/ *

http://dunizb.com/ *

Grid布局学习 【干货】

js实现手机横竖屏事件

前端工程师都有用哪些比较靠谱的小工具?

npm scripts : 每个前端开发都应知道的一些使用提示

CreateJS中文网 *

Hover Buttons *

javaScript的数据结构与算法 【干货】

Alloy周刊

CSS 动画技巧与细节 【干货】

浏览器兼容性问题解决方案 · 总结 【扫盲】

前端每周清单

教你从零开始搭建一款前端脚手架工具

feather - 一个开源的SVG图标库

如何使用GitHub Pages在线加载静态网页

读Zepto源码

用纯CSS实现跳跳球动画

Vue 折腾记

编码过程中,我的常用网站工具

前端实用的在线工具推荐系列

meta 标签大全

通过JS判断网络状态调研及实例demo说明

面试

lensh

路易斯

玩转prototype

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

JS 的正则表达式

CSS 伪类选择器

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

Event Loop

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

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

理解构造函数与原型对象

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

Javascript 黑科技 【4星级】

【整理】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获取的真实元素上触发的,而不是通过坐标计算出来的元素。

读 Zepto 源码

你可能不知道的 border-radius

VS Code 折腾记

浏览器兼容性问题解决方案 · 总结

页面卡顿?操作慢?

margin-right右边距失效

JavaScript 专题之函数记忆

前端精读周刊

封装一个简易的异步队列

https://github.com/microzz

https://lenshen.com/

https://microzz.com/

谦龙

(void 0) 与 undefined 之间的小九九

MVVM —— 如何进行 DOM 的操作

给axios做个挺靠谱的封装

这些Zepto中实用的方法集 【干货】

10个有趣的Javascript和CSS库 【干货】

改写你的checkout input默认样式 【干货】

HTML/CSS/JS编码规范 【扫盲】

写一个挺靠谱的Vue组件 【扫盲】

99%的人都理解错了HTTP中GET与POST的区别

网易前端面经 【干货】

JavaScript异步编程面试题 【干货】

巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 【干货】

【当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!】

阿里校招前端笔试题

koa2进阶学习笔记

Node.js 包教不包会

纯前端实现人脸识别-提取-合成

从零开始教你写一个NPM包

React:

React 高阶组件浅析

React高阶组件实践

从 setState promise 化的探讨

npm 入门教程

Nestjs 文档

Boss-UI 【干货】

从零开始使用vue搭建带有SSR服务端渲染的前后台项目weeklyPlus

React组件类型

[React技术内幕] key带来了什么 【干货】

React技术内幕 【干货】

无状态组件你真的知道

Redux store 的动态注入

理解 React-redux connect

React、Redux与复杂业务组件的复用

koa源码--基础篇

Redux中间件对闭包的一个巧妙使用

总结个人使用过的移动端布局方法

Vue:

AT-UI 【干货】

Vue 进阶教程之:非父子组件通信方法(非Vuex)

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

从event loop看vue的nextTick 【干货】

Vuejs渡劫系列一:日常开发中必须掌握的细节

HTML5新特性之Mutation Observer,监听DOM变化

剖析vue实现原理,自己动手实现mvvm

vue组件之间的通信

Vue.js数据绑定原理

Vue.js 依赖收集

Vue2.4组件间通信新姿势 【干货】

重复造轮子:从0开始实现Vue数据绑定

MVVM 开发总结 —— Vue 组件

vue 填坑系列总结——scoped 【干货】

从Vue.js源码角度再看数据绑定

用addRoutes实现动态路由

浅谈axios

axios 中文文档 翻译

处理 Vue 单页面 Meta SEO的另一种思路

说说VNode节点(Vue.js实现)

日常开发中必须掌握的细节

Webpack

数据模拟神器 easy-mock 正式开源

加载优化

RxJS 数据板,将数据当作水流一样,集中管理和监视数据流, 监控每一次数据流动。

npm scripts : 每个前端开发都应知道的一些使用提示

基于React/Mobx/React-Router v4/Webpack v3的脚手架。

快一点, 再快一点

webpack 从入门到工程实践

Webpack你的包

67 个拯救前端开发者的工具、库和资源BFC和 websocket

10分钟学会ES7+ES8精读AsyncAwait

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

javascript 之模块化篇

vue2实践,填坑筆記(持续更新) 【***】

JavaScript数组所有API全解密 【干货】

JavaScript字符串所有API全解密 【干货】

数组扁平化、去重、排序,又搞定了一道校招题

数组的32场演唱会

详解JS之Arguments对象

JS中可能用得到的全部的排序算法

js 深拷贝 vs 浅拷贝 【扫盲】

你做的拷贝是真的深拷贝吗

Vue.js 2.0 快速上手精华梳理 ,Vue教程 【扫盲】

https://www.w3ctech.com/ 【干货】

等比例缩放的盒子 【干货】

CSS实现长宽比的几种方案 【扫盲】

css中如何做到容器按比例缩放

http://www.javascript.fun/ *

http://dunizb.com/ *

Grid布局学习 【干货】

js实现手机横竖屏事件

前端工程师都有用哪些比较靠谱的小工具?

npm scripts : 每个前端开发都应知道的一些使用提示

CreateJS中文网 *

Hover Buttons *

javaScript的数据结构与算法 【干货】

Alloy周刊

CSS 动画技巧与细节 【干货】

浏览器兼容性问题解决方案 · 总结 【扫盲】

前端每周清单

教你从零开始搭建一款前端脚手架工具

feather - 一个开源的SVG图标库

如何使用GitHub Pages在线加载静态网页

读Zepto源码

用纯CSS实现跳跳球动画

Vue 折腾记

编码过程中,我的常用网站工具

前端实用的在线工具推荐系列

meta 标签大全

通过JS判断网络状态调研及实例demo说明

面试

lensh

路易斯

玩转prototype

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

JS 的正则表达式

CSS 伪类选择器

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

Event Loop

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

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

理解构造函数与原型对象

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

Javascript 黑科技 【4星级】

【整理】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获取的真实元素上触发的,而不是通过坐标计算出来的元素。

读 Zepto 源码

你可能不知道的 border-radius

VS Code 折腾记

浏览器兼容性问题解决方案 · 总结

页面卡顿?操作慢?

margin-right右边距失效

JavaScript 专题之函数记忆

前端精读周刊

封装一个简易的异步队列

https://github.com/microzz

https://lenshen.com/

https://microzz.com/

谦龙

(void 0) 与 undefined 之间的小九九

MVVM —— 如何进行 DOM 的操作

给axios做个挺靠谱的封装

这些Zepto中实用的方法集 【干货】

10个有趣的Javascript和CSS库 【干货】

改写你的checkout input默认样式 【干货】

HTML/CSS/JS编码规范 【扫盲】

写一个挺靠谱的Vue组件 【扫盲】

99%的人都理解错了HTTP中GET与POST的区别

网易前端面经 【干货】

JavaScript异步编程面试题 【干货】

巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 【干货】

【当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!】

阿里校招前端笔试题

koa2进阶学习笔记

Node.js 包教不包会

纯前端实现人脸识别-提取-合成

从零开始教你写一个NPM包

React:

React 高阶组件浅析

React高阶组件实践

从 setState promise 化的探讨

npm 入门教程

Nestjs 文档

Boss-UI 【干货】

从零开始使用vue搭建带有SSR服务端渲染的前后台项目weeklyPlus

React组件类型

[React技术内幕] key带来了什么 【干货】

React技术内幕 【干货】

无状态组件你真的知道

Redux store 的动态注入

理解 React-redux connect

React、Redux与复杂业务组件的复用

koa源码--基础篇

Redux中间件对闭包的一个巧妙使用

总结个人使用过的移动端布局方法

Vue:

AT-UI 【干货】

Vue 进阶教程之:非父子组件通信方法(非Vuex)

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

从event loop看vue的nextTick 【干货】

Vuejs渡劫系列一:日常开发中必须掌握的细节

HTML5新特性之Mutation Observer,监听DOM变化

剖析vue实现原理,自己动手实现mvvm

vue组件之间的通信

Vue.js数据绑定原理

Vue.js 依赖收集

Vue2.4组件间通信新姿势 【干货】

重复造轮子:从0开始实现Vue数据绑定

MVVM 开发总结 —— Vue 组件

vue 填坑系列总结——scoped 【干货】

从Vue.js源码角度再看数据绑定

用addRoutes实现动态路由

浅谈axios

axios 中文文档 翻译

处理 Vue 单页面 Meta SEO的另一种思路

说说VNode节点(Vue.js实现)

日常开发中必须掌握的细节

Webpack

数据模拟神器 easy-mock 正式开源

加载优化

RxJS 数据板,将数据当作水流一样,集中管理和监视数据流, 监控每一次数据流动。

npm scripts : 每个前端开发都应知道的一些使用提示

基于React/Mobx/React-Router v4/Webpack v3的脚手架。

快一点, 再快一点

webpack 从入门到工程实践

Webpack你的包

67 个拯救前端开发者的工具、库和资源BFC和 websocket

10分钟学会ES7+ES8精读AsyncAwait

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

javascript 之模块化篇

vue2实践,填坑筆記(持续更新) 【***】

JavaScript数组所有API全解密 【干货】

JavaScript字符串所有API全解密 【干货】

数组扁平化、去重、排序,又搞定了一道校招题

数组的32场演唱会

详解JS之Arguments对象

JS中可能用得到的全部的排序算法

js 深拷贝 vs 浅拷贝 【扫盲】

你做的拷贝是真的深拷贝吗

Vue.js 2.0 快速上手精华梳理 ,Vue教程 【扫盲】

https://www.w3ctech.com/ 【干货】

等比例缩放的盒子 【干货】

CSS实现长宽比的几种方案 【扫盲】

css中如何做到容器按比例缩放

http://www.javascript.fun/ *

http://dunizb.com/ *

Grid布局学习 【干货】

js实现手机横竖屏事件

前端工程师都有用哪些比较靠谱的小工具?

npm scripts : 每个前端开发都应知道的一些使用提示

CreateJS中文网 *

Hover Buttons *

javaScript的数据结构与算法 【干货】

Alloy周刊

CSS 动画技巧与细节 【干货】

浏览器兼容性问题解决方案 · 总结 【扫盲】

前端每周清单

教你从零开始搭建一款前端脚手架工具

feather - 一个开源的SVG图标库

如何使用GitHub Pages在线加载静态网页

读Zepto源码

用纯CSS实现跳跳球动画

Vue 折腾记

编码过程中,我的常用网站工具

前端实用的在线工具推荐系列

meta 标签大全

通过JS判断网络状态调研及实例demo说明

面试

lensh

路易斯

玩转prototype

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

JS 的正则表达式

CSS 伪类选择器

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

Event Loop

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

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

理解构造函数与原型对象

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

Javascript 黑科技 【4星级】

【整理】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获取的真实元素上触发的,而不是通过坐标计算出来的元素。

读 Zepto 源码

你可能不知道的 border-radius

VS Code 折腾记

浏览器兼容性问题解决方案 · 总结

页面卡顿?操作慢?

margin-right右边距失效

JavaScript 专题之函数记忆

前端精读周刊

封装一个简易的异步队列

https://github.com/microzz

https://lenshen.com/

https://microzz.com/

谦龙

(void 0) 与 undefined 之间的小九九

MVVM —— 如何进行 DOM 的操作

给axios做个挺靠谱的封装

这些Zepto中实用的方法集 【干货】

10个有趣的Javascript和CSS库 【干货】

改写你的checkout input默认样式 【干货】

HTML/CSS/JS编码规范 【扫盲】

写一个挺靠谱的Vue组件 【扫盲】

99%的人都理解错了HTTP中GET与POST的区别

网易前端面经 【干货】

JavaScript异步编程面试题 【干货】

巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 【干货】

【当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!】

阿里校招前端笔试题

koa2进阶学习笔记

Node.js 包教不包会

纯前端实现人脸识别-提取-合成

从零开始教你写一个NPM包

React:

React 高阶组件浅析

React高阶组件实践

从 setState promise 化的探讨

npm 入门教程

Nestjs 文档

Boss-UI 【干货】

从零开始使用vue搭建带有SSR服务端渲染的前后台项目weeklyPlus

React组件类型

[React技术内幕] key带来了什么 【干货】

React技术内幕 【干货】

无状态组件你真的知道

Redux store 的动态注入

理解 React-redux connect

React、Redux与复杂业务组件的复用

koa源码--基础篇

Redux中间件对闭包的一个巧妙使用

总结个人使用过的移动端布局方法

Vue:

AT-UI 【干货】

Vue 进阶教程之:非父子组件通信方法(非Vuex)

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

从event loop看vue的nextTick 【干货】

Vuejs渡劫系列一:日常开发中必须掌握的细节

HTML5新特性之Mutation Observer,监听DOM变化

剖析vue实现原理,自己动手实现mvvm

vue组件之间的通信

Vue.js数据绑定原理

Vue.js 依赖收集

Vue2.4组件间通信新姿势 【干货】

重复造轮子:从0开始实现Vue数据绑定

MVVM 开发总结 —— Vue 组件

vue 填坑系列总结——scoped 【干货】

从Vue.js源码角度再看数据绑定

用addRoutes实现动态路由

浅谈axios

axios 中文文档 翻译

处理 Vue 单页面 Meta SEO的另一种思路

说说VNode节点(Vue.js实现)

日常开发中必须掌握的细节

Webpack

数据模拟神器 easy-mock 正式开源

加载优化

RxJS 数据板,将数据当作水流一样,集中管理和监视数据流, 监控每一次数据流动。

npm scripts : 每个前端开发都应知道的一些使用提示

基于React/Mobx/React-Router v4/Webpack v3的脚手架。

快一点, 再快一点

webpack 从入门到工程实践

Webpack你的包

67 个拯救前端开发者的工具、库和资源BFC和 websocket

10分钟学会ES7+ES8精读AsyncAwait

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

javascript 之模块化篇

vue2实践,填坑筆記(持续更新) 【***】

JavaScript数组所有API全解密 【干货】

JavaScript字符串所有API全解密 【干货】

数组扁平化、去重、排序,又搞定了一道校招题

数组的32场演唱会

详解JS之Arguments对象

JS中可能用得到的全部的排序算法

js 深拷贝 vs 浅拷贝 【扫盲】

你做的拷贝是真的深拷贝吗

Vue.js 2.0 快速上手精华梳理 ,Vue教程 【扫盲】

https://www.w3ctech.com/ 【干货】

等比例缩放的盒子 【干货】

CSS实现长宽比的几种方案 【扫盲】

css中如何做到容器按比例缩放

http://www.javascript.fun/ *

http://dunizb.com/ *

Grid布局学习 【干货】

js实现手机横竖屏事件

前端工程师都有用哪些比较靠谱的小工具?

npm scripts : 每个前端开发都应知道的一些使用提示

CreateJS中文网 *

Hover Buttons *

javaScript的数据结构与算法 【干货】

Alloy周刊

CSS 动画技巧与细节 【干货】

浏览器兼容性问题解决方案 · 总结 【扫盲】

前端每周清单

教你从零开始搭建一款前端脚手架工具

feather - 一个开源的SVG图标库

如何使用GitHub Pages在线加载静态网页

读Zepto源码

用纯CSS实现跳跳球动画

Vue 折腾记

编码过程中,我的常用网站工具

前端实用的在线工具推荐系列

meta 标签大全

通过JS判断网络状态调研及实例demo说明

面试

lensh

路易斯

玩转prototype

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

JS 的正则表达式

CSS 伪类选择器

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

Event Loop

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

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

理解构造函数与原型对象

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

Javascript 黑科技 【4星级】

【整理】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获取的真实元素上触发的,而不是通过坐标计算出来的元素。

读 Zepto 源码

你可能不知道的 border-radius

VS Code 折腾记

浏览器兼容性问题解决方案 · 总结

页面卡顿?操作慢?

margin-right右边距失效

JavaScript 专题之函数记忆

前端精读周刊

封装一个简易的异步队列

https://github.com/microzz

https://lenshen.com/

https://microzz.com/

谦龙

(void 0) 与 undefined 之间的小九九

MVVM —— 如何进行 DOM 的操作

给axios做个挺靠谱的封装

这些Zepto中实用的方法集 【干货】

10个有趣的Javascript和CSS库 【干货】

改写你的checkout input默认样式 【干货】

HTML/CSS/JS编码规范 【扫盲】

写一个挺靠谱的Vue组件 【扫盲】

99%的人都理解错了HTTP中GET与POST的区别

网易前端面经 【干货】

JavaScript异步编程面试题 【干货】

巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 【干货】

【当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!】

阿里校招前端笔试题

koa2进阶学习笔记

Node.js 包教不包会

纯前端实现人脸识别-提取-合成

从零开始教你写一个NPM包

React:

React 高阶组件浅析

React高阶组件实践

从 setState promise 化的探讨

npm 入门教程

Nestjs 文档

Boss-UI 【干货】

从零开始使用vue搭建带有SSR服务端渲染的前后台项目weeklyPlus

React组件类型

[React技术内幕] key带来了什么 【干货】

React技术内幕 【干货】

无状态组件你真的知道

Redux store 的动态注入

理解 React-redux connect

React、Redux与复杂业务组件的复用

koa源码--基础篇

Redux中间件对闭包的一个巧妙使用

总结个人使用过的移动端布局方法

Vue:

AT-UI 【干货】

Vue 进阶教程之:非父子组件通信方法(非Vuex)

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

从event loop看vue的nextTick 【干货】

Vuejs渡劫系列一:日常开发中必须掌握的细节

HTML5新特性之Mutation Observer,监听DOM变化

剖析vue实现原理,自己动手实现mvvm

vue组件之间的通信

Vue.js数据绑定原理

Vue.js 依赖收集

Vue2.4组件间通信新姿势 【干货】

重复造轮子:从0开始实现Vue数据绑定

MVVM 开发总结 —— Vue 组件

vue 填坑系列总结——scoped 【干货】

JavaScript 实用技巧和写法建议 【函数节流】

JavaScirpt 货币转换成千分位正则 (非捕组获匹配详解)

网页性能分析不完全指南 - 掘金【*****】

JavaScript权威面试指南【*****】

处理JavaScript异常的正确姿势 - 掘金

空对象动态添加属性(面试常考)返回JSON,曾经惨败的一道面试题 - 黄沙百战穿金甲,不破楼兰终不还。 - CSDN博客

-webkit-overflow-scrolling:touch属性副作用--QQ内置浏览器空白处理 - 掘金

web app 无限加载终极解决方案【better-scroll】

vue变化侦测原理

看完离编写高性能的JavaScript又近了一步 - 掘金【*****】

JSONP的P是什么?

【小程序踩坑】 扫普通二维码调起小程序bug:码地址传递错误,传为历史地址

Vue博客

渐进式Express学习课程

基于Vue的组织架构树组件 - 掘金

vue-cli打包后的思索--代码优化【****】

JavaScript设计模式之面向对象编程 【继承】 - 掘金

手写一个自己的 JavaScript Promise 类库

手摸手,带你优雅的使用 icon

Promise 与 Confirm 提示框

你可能不知道的14个JavaScript调试技巧 - WEB前端开发 - 专注前端开发,关注用户体验

js判断是移动端设备还是pc端设备代码-javascript教程-懒人建站

个人总结(css3新特性) - 掘金【***】

《前端面试江湖》读书笔记 - 掘金

为你的网站带上帽子 - 使用 helmet 保护 Express 应用

Nuxt.js服务端渲染实践,从开发到部署 - 掘金

NodeJS学习笔记

个人博客开发系列:Vue.js + Koa.js项目中使用JWT认证

React 整洁代码最佳实践 - 掘金

简单实现 3D 相册

transform 的副作用 - 掘金

用workbox 加速amp、pwa 访问 教程步骤精简

iOS 下实现 webview 标题修改

Web 性能优化 - TCP

Web自适应布局你需要知道的所有事儿 - 掘金

JavaScript 工作原理:内存管理 + 处理常见的4种内存泄漏

定时任务高效触发 - CSDN博客

CSS float相关详解 - 掘金

编写自己的代码库(css3常用动画的实现) - 掘金

微信小程序开发完工+问题汇总 - 掘金

基于Vue的组织架构树组件 - 掘金

基于 Electron 的前端文件处理工具

人类身份验证 - SegmentFault

前端不止:Retina屏幕下两倍图 - ThoughtWorks洞见

讲真,理解 HTTPS 这一篇就够了

九个问题从入门到熟悉HTTPS - 掘金

从 HTTP 到 HTTPS 再到 HSTS

基于element-ui实现table可配置化 - 掘金

scrollIntoView 与 scrollIntoViewIfNeeded API 介绍【解决移动端遮挡问题】

原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的

JS如何判断一个对象为空 - CSDN博客

JavaScript 数组遍历方法的对比

移动端-布局攻略

给一个元素同时绑定click和dbclick存在的问题

HTML5 录音的踩坑之旅

【quickhybrid】H5和Native交互JSBridge原理 - 掘金

【quickhybrid】如何实现一个Hybrid框架 · Issue #12 · quickhybrid/quickhybrid

JavaScript:(a==1 && a==2 && a==3)能输出ture么?

JS必知必会

JavaScript中prompt()函数的用法。 - 《》 - 博客园

如何绕过面试题中的小坑 | 百度EUX

[译] 如何取消你的 Promise?

从 lodash.merge 不能触发 Vue 自动更新说开去

Rxjs观察者模式在 Javascript 中的应用

zuopf769/notebook[666]

Aaaaaaaty/Blog【666】

移动端如何强制页面横屏

创建炫酷 CSS 背景效果的 10 个代码片段【渐变动画,背景渐变】

JavaScript设计模式之创建型设计模式 - 掘金

打造一个优雅的微信文章编辑器 - 掘金

DOMContentLoaded、readystatechange、load、ready详谈 - 掘金

javascript打怪升级--把业务逻辑当练习题做 - 掘金

两行 CSS 代码实现图片任意颜色赋色技术

用canvas绘制一个曲线动画--深入理解贝塞尔曲线 - 掘金

开发一个本地上传图片控件你需要知道的知识点 - 掘金

性能监控:

Chrome DevTools - 性能监控

搭建一个前端监控系统,不再错过BUG - 掘金

网站性能优化--DNS预热与合并HTTP请求 - 掘金

前端性能优化之性能测试 - 掘金

VasSonic:手Q开源Hybrid框架介绍

vue-cli之webpack3构建全面提速优化 - 掘金

面试:

跨域之由Request Method:OPTIONS初窥CORS

怎样拷贝数组(深/浅拷贝) · Issue #29 · wuxianqiang/exercises

H5自定义属性的一些方式 - 掘金

前端精选文摘:BFC 神奇背后的原理

快速理解JavaScript中call和apply原理 - 掘金

利用FormData对象实现AJAX文件上传功能及后端实现 - 掘金

很全很全的JavaScript的模块讲解

怎样做一个圆环放大的动画

傻傻的分也分不清楚的property和attribute

前端模块化,AMD与CMD的区别 - 掘金

lvzhenbang/article

前端性能优化之桌面浏览器优化策略 - 掘金

json与jsonp区别浅析(json才是目的,jsonp只是手段) - DOM哥 - 博客园

es6 Generators详解

手把手教你如何实现 《前端异常监控系统》

JSONP的原理与实现以及XSS,CSRF的相亲相爱

关于 react 那些小知识点儿

每天10个前端知识点:杂技

CSS常见布局解决方案 - 王郝 - 博客园

安卓版微信视频播放全屏处理

HTTP----HTTP2.0新特性 - 掘金

addEventListener()的第三个参数可以传对象了 - 掘金

聊聊 JavaScript 与浏览器的那些事 - 引擎与线程

常见 Web 安全攻防总结 - zoumiaojiang

你的Tree-Shaking并没什么卵用 - 掘金

前端面试之js相关问题(二) - 掘金

Promise的简单实现 - 掘金

canvas 微信海报分享(个人爬坑)

iphoneX适配

CSS:

CSS常用Mixin封装 - 掘金

我脑中飘来飘去的css魔幻属性 - 掘金

[翻译] 理解 CSS 布局和块级格式上下文

CSS3 Gradient_gradient, css3属性详解 教程_w3cplus渐变

水墨寒的博客 你不知道的CSS

深入理解 CSS:字体度量、line-height 和 vertical-align

CSS自定义属性:坚定地使用 CSS Custom Properties

纯CSS3写一个摇头晃脑的小哥

用CSS来计数 - 掘金

更便捷的css处理方式-PostCSS - 掘金

不可思议的混合模式 background-blend-mode

跨域:

不就是跨域么?慌个XX - 掘金

ajax跨域,这应该是最全的解决方案了

Web调试工具Charles使用心得 - 掘金

PWA:

PWA之Workbox缓存策略分析 - 掘金

[译]介绍一下渐进式 Web App(离线) - Part 1

PWA(Progressive Web App)入门系列:(三)PWA关键技术Manifest

Vue:

VueJs 监听 window.resize 方法

vue开发看这篇文章就够了

vue的input中,如何限制只能输入number

切换Web应用主题色的 (KU)

从Vue.js源码看nextTick机制

MutationObserver 监听DOM树变化

vue+webpack+amaze-vue实现省市区联动选择组件 - 掘金

再也不学AJAX了

Vue SPA 首屏加载优化实践

记一次 Weex 的 iPhone X 适配

「大前端」Weex在达人店的一年实践 - 掘金

Vue源码之旅(2)-nextTick

一步一步分析vue之observe - 掘金

Vue-OrgChart: 可编辑,可导出JSON的树形组织图

使用VUE分分钟写一个验证码输入组件 - 掘金【****】

Vue-Touch-Ripple by surmon-chinavuejs 水波纹框架

Vue响应式原理以及简单实现 - 掘金

我劝你别在数字键盘上刁难我--Vue自定义数字键盘组件 - 掘金

【只发精品】匠心打造Vue侧滑菜单组件 - 掘金

vue@2.0源码学习---从hello world学习vue的内部做了什么

Vue2技术栈归纳与精粹

解析vue2.0的diff算法 - 掘金

基于weex的考拉移动端动态化方案 - 掘金

React:

一篇文章告诉你React里为什么不能用index作为key - 掘金

【译】React 应用性能调优 - 掘金

写给新人的React快速入门手册 - 掘金

分享一个自己开发的 react拖拽排序组件

React + Canvas 像素风格取色器

React中组件通信的几种方式 - 掘金

react和immutable偶遇的那些事 - 掘金

React全家桶构建一款Web音乐App实战(二):字体图标制作及页面路由搭建 - 掘金

React同构与极致的性能优化

基于react16 webpack3 搭建前端spa基础框架 react-router的4种异步加载方式

redux v3.7.2源码解读与学习之 createStore(核心方法)

关于react我的理解与总结 - 掘金

React源码解析(四):事件系统 - 掘金

谈谈React--componentWillReceiveProps的使用 - 掘金

从0开始实现 react-router

探索Vue高阶组件

从0实现一个tiny react(一)

React Redux 与胖虎他妈

redux源码解析之五部曲(why:对外暴露了5个api)--第一部曲createStore.js - 掘金

Node:

基于node.js的脚手架工具开发经历 - 掘金

Webpack:

import、require、export、module.exports 混合使用详解

ES6和Babel你不知道的事儿

Webpack飞行手册 - 掘金

Webpack3.0小案例躺坑资源处理、服务器启动和打包优化 - 掘金

Vue SPA 打包优化实践 - 掘金【代码分割】

简单易懂的 webpack 打包后 JS 的运行过程

简单易懂的 webpack 打包后 JS 的运行过程(二)

知多一点 webpack 的 CommonsChunkPlugin【打包优化】

webpack3实战(5)打包一个多页、jQuery、图片转base64、压缩混淆、异步模块加载的项目 - 掘金

Webpack实战-构建同构应用 - 掘金

从 webpack 到全面拥抱 Parcel #1 探索 Parcel

你所不知的Webpack-多种配置方法 - 掘金

React16+Redux+Router4+Koa+Webpack服务器端渲染(按需加载,热更新) - 掘金

Webpack优化-缩小文件搜索范围 - 掘金

跟着Vue-cli来'学'并'改'Webpack之 打包优化

webpack优化不完全指南 - 掘金

webpack实用小功能 - 掘金

Tree-Shaking性能优化实践 - 实践篇

Tree-Shaking性能优化实践 - 原理篇

webpack多入口文件页面打包配置 - 掘金

教你用webpack搭一个vue脚手架[超详细讲解和注释!] - 掘金

分享:一篇webpack配置基础绝好文章 - 掘金

webpack对于公共资源的提炼之webpack.optimize.CommonsChunkPlugin | 丫丫加油个人博客

工具:

编写自己的代码库(javascript常用实例的实现与封装) - 掘金

css3实现多个元素依次显示 - 掘金

一看就懂的JS抽象语法树 - 掘金

网页内容复制粘贴(三种方案 兼容多种浏览器)

用不到20行代码写一个freestyle外挂后台

你必须知道的HTTP基本概念 - 掘金

Git提交历史的修改删除合并 - 掘金

LESS:

学习Less-看这篇就够了 - 掘金

再谈 CSS 预处理器 | EFE Tech

HTTP:

https://juejin.im/post/5a1d4e546fb9a0450f21af23

小程序:

学习小程序从“你”开始 - 掘金

这个冬天,让腾讯视频带给你温暖 - 掘金

人类身份验证 - SegmentFault

微信小程序的数据绑定与下拉刷新与template模块使用问题

小程序tabBar跳转页面并隐藏tabBar - 掘金

【小程序踩坑系列1】 扫普通二维码调起小程序bug:码地址传递错误,传为历史地址

手把手教你实现微信小程序中的自定义组件 - 掘金

基于盒马鲜生改编的微信小程序 - 掘金

微信小程序仿微信, QQ 向左滑动删除操作。

带你玩转小程序开发实践|含直播回顾视频 - 掘金 【组件通信】

当微信小程序遇上filter~ - 掘金

微信小程序 MinUI 组件库系列之 badge 徽章组件

函数式:

ikcamp/Functional-Light-JS

算法:

你需要知道的算法之基础篇 - 掘金

Async/Await

重构:从Promise到Async/Await | Fundebug博客

好用的 async/await

Promise 必知必会(十道题)

你不知道的 Promise 对象黑科技

async / await 替代Promise?

深入理解ES6 Async Functions (异步函数)

浅析Promise内部实现与原理 - 掘金

深入理解事件循环和异步流程控制 - 掘金

实现一个玩具 Promise ~

ES6 Promise 用法 - CSDN博客

JavaScript异步编程大冒险: Async/Await

ES6 Promise 用法 - CSDN博客

canvas:

canvas入门实战--邀请卡生成与下载 - 掘金

Loading:

Single Element CSS Spinners

Your SVG + GIF Ajax Loading Icons

插件:

简易版Swiper是怎么炼成的 - 掘金

libin1991/js-pluggs

轻量级swiper

源码:

读懂源码:一步一步实现一个 Vue

尝试造了个工具类库,名为 Diana 【AMD,CMD】

用ES6实现一个简单易懂的Promise(遵循Promise/A+ 规范并附详解注释)

KOA:

CCtalk 实时互动教育平台-专业的知识分享与在线教育平台

使用nodejs+express完成简单的文件上传功能 - 掘金

基于HTML5陀螺仪实现ofo首页眼睛移动效果 - 文章 - 掘金

GraphQL

GraphQL 搭配 Koa 最佳入门实践

SVG,canvas:

SVG morphing 动画应用大盘点

MAC工具:

新年新起点:从零配置 Mac 前端环境速查

[译文]Chrome63中开发者面板(Devtools)新增功能

Vue源码学习:

youngwind/blog

vue源码学习系列之十一:组件化原理探索(父子组件通信) · Issue #94 · youngwind/blog

2018 我所了解的 Vue 知识大全 (二)

自己动手写一个 SimpleVue

如何实现VM框架中的数据绑定 - 掘金

播放器:

从零开始写一个 Web 视频播放器

工具:

利用jsdoc为vue项目生成漂亮的文档 - 掘金

公众号的Markdown排版利器:Md2All - 掘金

面试:

子组件和父组件componentDidMount哪一个先执行 - 掘金

基于JS快速生成各种网格布局工具Grid介绍

CSS Gird 布局 指南 - 掘金

理论联系实际:从零理解WebSocket的通信原理、协议格式、安全性-网页端IM开发/专项技术区 - 即时通讯开发者社区!

display的32种写法

如何继承Date对象?由一道题彻底弄懂JS继承。 - 掘金

用本地运行的demo快速入门跨域

JavaScript从反转数组到链表反转 - 掘金

对服务端渲染的一次完全实践 - 掘金

antd源码解读(10)- notification

深入CSS优先级

利用HTML和CSS实现常见的布局

记一次网易前端实习面试

34 行 JavaScript 代码搞定粒子动画效果

用CSS来制作图标 - 掘金

ios微信下vue项目组件切换并自动播放音频的解决方案 - 掘金

parcel:

webpack 持久化缓存实践

Webpack原理-编写Plugin - 掘金

Vue尝鲜快速、零配置的打包工具---parcel~ - 掘金

Canvas:

canvas烟花锦集

Native:

React Native 网络层分析

我们编写 React 组件的最佳实践 【*****】

[贝聊科技]网页端「应用跳转」技术实现演变 - 掘金

你不知道的javaScript:

跨域之由Request Method:OPTIONS初窥CORS

一起来看 HTML 5.2 中新的原生元素

深入浅出 JavaScript 的Array.prototype.sort 排序算法

1657413883/The-Road-of-FE

可视化拖拽 UI 布局之拖拽篇 - 掘金

快速掌握JavaScript面试基础知识(二) | Fundebug博客

JavaScript tips -- 谈谈数组乱序

Javascript调试命令——你只会Console.log() ?

JavaScript for...in 循环出来的对象属性顺序到底是什么规律?

CSS奇巧淫技:

基于css的优雅的用户跟踪技术

从Vue.js源码角度再看数据绑定

用addRoutes实现动态路由

浅谈axios

axios 中文文档 翻译

处理 Vue 单页面 Meta SEO的另一种思路

说说VNode节点(Vue.js实现)

日常开发中必须掌握的细节

Webpack

数据模拟神器 easy-mock 正式开源

加载优化

RxJS 数据板,将数据当作水流一样,集中管理和监视数据流, 监控每一次数据流动。

npm scripts : 每个前端开发都应知道的一些使用提示

基于React/Mobx/React-Router v4/Webpack v3的脚手架。

快一点, 再快一点

webpack 从入门到工程实践

Webpack你的包

67 个拯救前端开发者的工具、库和资源

jQuery源码学习总结

类似淘票票 选座功能(svg)

空文件

简介

爬虫-博客大全 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/qiaokelilianren/libin_Blog.git
git@gitee.com:qiaokelilianren/libin_Blog.git
qiaokelilianren
libin_Blog
libin_Blog
master

搜索帮助