资讯专栏INFORMATION COLUMN

VUE - MVVM - part7 - Event

xialong / 1575人阅读

摘要:事件是什么在标准浏览器中,我们经常使用来为一个添加一个事件等。仔细看这些情况,归结到代码中,无非就是一个行为或情况的名称,和一些列的动作,而在中动作就是,一系列的动作就是一个函数的集合。

看这篇之前,如果没有看过之前的文章,可拉到文章末尾查看之前的文章。

事件是什么?

在标准浏览器中,我们经常使用:addEventListener 来为一个 DOM 添加一个事件(clickmousemovetap等)。

在我看来,一个事件是一种行为(或情况),当发生这种行为(或情况)时,我们要去做的事,比如今天下雨了,那我就得去找伞;闹钟响了,那我就得起床等等。

仔细看这些情况,归结到代码中,无非就是一个行为(或情况)的名称,和一些列的动作,而在 js 中动作就是 function,一系列的动作就是一个函数的集合。

实现

如上所说,我们把事件抽象成一个类

类下属性 & 方法

_events 一个对象 {key: eventName, value: Array}

$on(eventName, func) 添加具体事件的处理函数

$off(eventName) 取消事件处理函数

$emit(eventName, data1, data2, ...) 用于触发事件

$once(eventName, func) 设置仅触发一次的事件

ok 根据我们的构想,在来看这个实现好的 Event

let uid = 0

export class Event {
    constructor() {
        this.id = ++uid
        this._events = {}
    }

    $on(eventName, fn) {
        let ctx = this;
        // 若 _events 对象下无对应事件名,则新建一个数组,然后将处理函数推入数组
        if(!ctx._events[eventName]){
            ctx._events[eventName] = []
        }
        ctx._events[eventName].push(fn)
        return ctx
    }

    $once(eventName, fn) {
        let ctx = this

        function on() {
            // 先取消,然后触发,确保仅触发一次
            ctx.$off(eventName, on)
            fn.apply(ctx, arguments)
        }

        on.fn = fn
        ctx.$on(eventName, on)
        return object
    }

    $off(eventName) {
        let ctx = this
        const cbs = ctx._events[eventName]
        if (cbs) {
            // 取消置空即可
            ctx._events[eventName] = null
        }
        return ctx
    }

    $emit(eventName, ...args) {
        let ctx = this
        let cbs = ctx._events[eventName]
        if (cbs) {
            cbs.forEach(func => func.apply(ctx, args))
        }
        return ctx
    }

}

一个简单的事件管理的类便实现好了,让我们来测试一下:

import {Event} from "./Event";

let eventTest = new Event()

eventTest.$on("testEvent", function (event) {
    console.log("测试事件添加,传入参数为" + event)
})

eventTest.$emit("testEvent", "事件触发成功")
// 测试事件添加,传入参数为事件触发成功

eventTest.$emit("testEvent", "事件再次触发成功")
// 测试事件添加,传入参数为事件再次触发成功

eventTest.$off("testEvent")

eventTest.$emit("testEvent", "事件取消,不会有输出")
// 无输出

eventTest.$once("testOnce", function (event) {
    console.log("事件仅仅触发一次,传入参数为" + event)
})

eventTest.$emit("testOnce", "事件触发成功")
// 事件仅仅触发一次,传入参数为事件触发成功

eventTest.$emit("testOnce", "事件取消,不会有输出")
// 无输出

ok 一个简易的事件管理实现了,由于这节内容与上几节关系不大,所以这里再次说下测试代码的运行方式:

node 环境 8.11.1 往上,不然不能够支持 import 语法

为了不转码支持 import 语法,文件后缀为 .mjs

进入到 test.mjs 所在目录命令行运行:node --experimental-modules test.mjs 即可

点击查看相关代码

系列文章地址

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 优化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 优化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 总结

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94536.html

相关文章

  • VUE - MVVM - part8 - 优化Event

    摘要:看这篇之前,如果没有看过之前的文章,可拉到文章末尾查看之前的文章。回顾在上一步我们实现了一个简易的事件管理的类,接下来我们把它给优化下,方便我们的使用。接着我们来优化。 看这篇之前,如果没有看过之前的文章,可拉到文章末尾查看之前的文章。 回顾 在上一步我们实现了一个简易的事件管理的类,接下来我们把它给优化下,方便我们的使用。主要优化内容: 方便为多个事件添加同一个函数 方便为一个事件...

    jsyzchen 评论0 收藏0
  • VUE - MVVM - part1 - defineProperty

    摘要:在中关于如何实现在网上可以搜出不少,在看了部分源码后,梳理一下内容。换个说法,当我们取值的时候,函数自动帮我们添加了针对当前值的依赖,当这个值发生变化的时候,处理了这些依赖,比如说节点的变化。 在 VUE 中关于如何实现在网上可以搜出不少,在看了部分源码后,梳理一下内容。 首先,我们需要了解一下 js 中的一个 API :Object.defineProperty(obj, prop,...

    liukai90 评论0 收藏0
  • VUE - MVVM - part13 - inject & 总结

    摘要:通过装作这些变化,我们实现了从而到达了数据变化触发函数的过程。于此同时,我们还实现了来扩展这个可响应的结构,让这个对象拥有了触发和响应事件的能力。最后,根据我们的实现,这是最终的产出,一个框架,了解一下系列文章地址优化优化总结 看这篇之前,如果没有看过之前的文章,移步拉到文章末尾查看之前的文章。 provide / inject 在上一步我们实现了,父子组件,和 props 一样 pr...

    niuxiaowei111 评论0 收藏0
  • VUE - MVVM - part9 - Vue

    摘要:调用父类的方法类在我们上一步已经实现。我们先实现的绑定,因为是要被监听,所以要进行进一步的处理。调用父类的方法方法绑定完事,其实就这么简单。 看这篇之前,如果没有看过之前的文章,可拉到文章末尾查看之前的文章。 前言 激动人心的时候即将来临,之前我们做的 8 步,其实都在为这一步打基础,这一步,我们来简单实现一个 Vue 对象,还没有看过之前代码的同学,请确认看过之前的文章。 主要实现内...

    yzd 评论0 收藏0
  • VUE - MVVM - part2 - Dep

    摘要:看这篇之前,如果没看过先移步看实现中。同样的,在取值时收集依赖,在设置值当值发生变化时触发依赖。中实现了一个的类来处理以上两个问题,之后再说。以下语法下的,源码中差不多就这样点击查看相关代码系列文章地址优化优化总结 看这篇之前,如果没看过 step1 先移步看 实现 VUE 中 MVVM - step1 - defineProperty。 在上一篇我们大概实现了,Vue 中的依赖收集和...

    hover_lew 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<