前言
前端在最近几年实在火爆异常, vuereactangular 各路框架层出不穷, 咱们要是不知道个双向数据绑定, 不晓得啥是虚拟 DOM, 也许就被鄙视了火热的背后往往也是无尽的浮躁, 学习这些先进流行的类库或者框架可以让我们走的更快, 但是静下心来回归基础, 把基石打牢固, 却可以让我们走的更稳, 更远
最近一直在看 zepto 的源码, 希望通过学习它掌握一些框架设计的技巧, 也将很久不再拾起的 js 基础重新温习巩固一遍如果你对这个系列感兴趣, 欢迎点击下方地址 watch, 随时关注动态这篇文章主要想说一下 zepto 中事件模块 (event.js) 的 trigger 实现原理
仓库地址
event.js 模块
zepto 中由许多小的模块组合合成, 基础的 zepto.js 模块, event.js 事件处理模块, ajax.js 请求处理模块等等其中 event.js 事件处理模块的核心完成了 zepto 中事件绑定 on, 移除 off 还有手动触发 trigger 等功能我们简单回顾下如何使用 zepto 的这三大功能
哥们你逗我呢, jQuery,zepto 多熟了, 谁不会用这个啊! 客观别急, 我们今天主要是慢慢来看看它源码怎么实现的
一步步看 trigger 怎么实现
直接上代码
直接贴出 trigger 函数的代码可能我们是懵逼的
$ 是啥啊!!!
$.fn 是啥啊!!!
$.isPlainObject 又是啥啊!!!
$.Event 又是什么鬼?
仿佛有一连串的问题等待着我们解决
为了直接切入不易理解, 我们先来看看 zepto 中是如何给基础的 zepto.js 模块添加功能的
首先看看 zepto.js 模块
尽量删除了一些不必要的代码, 可以看到我们平时使用的 Zepto 其实就是其匿名函数自执行内部导出的一个函数而 $.fn 就是其原型
如何给 zepto.js 模块增添功能
zepto.js 模块只有一些基础的功能, 比如给 dom 添加事件的功能就没有, 怎么添加呢?
最后缩减掉其他的干扰代码, 可以看到所谓的给 zepto.js 模块增添功能,基本上就是在其原型上添加新的方法或者直接在 $ 函数上定一些静态方法
好啦我们已经解决了 $,$.fn 是啥的疑问了, 现在回去开始一步步解读如何实现手动触发事件
重新看 trigger 函数源码
先把后面的一些代码给删除了, 我们先理解这几句代码其中非常重要的一个函数就是 $.Event, 至于
isString => 判断是不是字符串
isPlainObject => 判断是不是存粹的对象(必须是对象, window 对象除外, 该对象的原型必须和 Object 的原型一致)
compatible => 其实就是对事件对象 event 做一些扩展, 比如添加一些方法, 重写一些方法之类的
这几个方法暂时可以不需要太多关心.
我们主要看看 $.Event, 这里面几乎含有如何手动触发一个 dom 事件的大部分步骤和内容
我们主要看看 $.Event, 这里面几乎含有如何手动触发一个 dom 事件的大部分步骤和内容
我们主要看看 $.Event, 这里面几乎含有如何手动触发一个 dom 事件的大部分步骤和内容
$.Event 是个啥
创建并初始化一个指定的 dom 事件对象, 如果给定了 props, 则将其扩展到事件对象上
注释已经写的很清楚了, 这个函数就是返回一个经过初始化了的事件对象
到这里我们直接归纳一下要手动触发一个 dom 事件的基本步骤
手动触发一个 dom 事件, 需要 3 步, 如果你对 document.createEvent,不是很熟悉, 可以点击查看
创建一个事件对象 document.createEvent(event)
初始化事件对象 event.initEvent(type, bubbles, true)
分发事件 dom.dispatchEvent(event)
到这里已经完成了前面两步, 还剩最后一步了, 在来看 trigger 剩下的代码
手动触发 dom 事件最后一步
最后一步其实就是将当前选中的元素进行一次each 遍历, 然后判断要触发的事件是不是 focus 或者 blur, 如果是就直接执行
再进一步, 如果 dispatchEvent 方法在当前的 dom元素属性中存在, 那么便将该事件触发 (为什么要这一步呢? 因为我们知道 $() 函数的使用方式有很多, 有些方式得到的 zepto 对象是没有选中 dom 节点的)
最后还有一个 else 分支, 这个分支处理走的不是手动触发事件, 而是直接触发注册事件时添加的事件处理程序(因为这里涉及到 zepto 事件模块中如何管理元素与事件队列的映射关系,篇幅会比较长, 会在接下来的文章中说, 这里不展开说明)
手动 diy 一个
根据上面的描述, 手动触发 DOM 事件, 原来并没有那么神奇, 完成三步, 即可达到目标我们自己来手动写一个示例
这个时候控制台打印出了
1 是 item1 的事件处理函数打印出来的
后面的 li 那部分则是 list 打印出来的
如果将 initEvent 的第二个参数设置为 false, 将不允许冒泡, 则只会打印出 1
结尾
如果这部分对你有点点帮助, 点个 star 好不好呀!
仓库地址
来源: http://www.qdfuns.com/article/16956/6b58fcf0ee67cfdb3c535253f26f1dec.html