VUE - MVVM - part7 - Event

xialong 发布于2019-08-22 16:39 / 1563人阅读

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

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

事件是什么？

在标准浏览器中，我们经常使用：addEventListener 来为一个 DOM 添加一个事件（click、mousemove、tap等）。

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

仔细看这些情况，归结到代码中，无非就是一个行为（或情况）的名称，和一些列的动作，而在 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 & 总结

GPU云服务器云服务器 MVVM mvvm模式 javascript_mvvm MVVM_Android

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

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

VUE - MVVM - part8 - 优化Event

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

jsyzchen 2019-08-22 16:42 评论0 收藏0
VUE - MVVM - part1 - defineProperty

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

liukai90 2019-08-22 16:12 评论0 收藏0
VUE - MVVM - part13 - inject & 总结

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

niuxiaowei111 2019-08-22 17:12 评论0 收藏0
VUE - MVVM - part9 - Vue

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

yzd 2019-08-22 16:45 评论0 收藏0
VUE - MVVM - part2 - Dep

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

hover_lew 2019-08-22 16:12 评论0 收藏0