亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

VUE - MVVM - part7 - Event

xialong / 1647人閱讀

摘要：事件是什么在標(biāo)準(zhǔn)瀏覽器中，我們經(jīng)常使用來(lái)為一個(gè)添加一個(gè)事件等。仔細(xì)看這些情況，歸結(jié)到代碼中，無(wú)非就是一個(gè)行為或情況的名稱(chēng)，和一些列的動(dòng)作，而在中動(dòng)作就是，一系列的動(dòng)作就是一個(gè)函數(shù)的集合。

看這篇之前，如果沒(méi)有看過(guò)之前的文章，可拉到文章末尾查看之前的文章。

事件是什么？

在標(biāo)準(zhǔn)瀏覽器中，我們經(jīng)常使用：addEventListener 來(lái)為一個(gè) DOM 添加一個(gè)事件（click、mousemove、tap等）。

在我看來(lái)，一個(gè)事件是一種行為（或情況），當(dāng)發(fā)生這種行為（或情況）時(shí)，我們要去做的事，比如今天下雨了，那我就得去找傘；鬧鐘響了，那我就得起床等等。

仔細(xì)看這些情況，歸結(jié)到代碼中，無(wú)非就是一個(gè)行為（或情況）的名稱(chēng)，和一些列的動(dòng)作，而在 js 中動(dòng)作就是 function，一系列的動(dòng)作就是一個(gè)函數(shù)的集合。

實(shí)現(xiàn)

如上所說(shuō)，我們把事件抽象成一個(gè)類(lèi)

類(lèi)下屬性 & 方法

_events 一個(gè)對(duì)象 {key: eventName, value: Array}

$on(eventName, func) 添加具體事件的處理函數(shù)

$off(eventName) 取消事件處理函數(shù)

$emit(eventName, data1, data2, ...) 用于觸發(fā)事件

$once(eventName, func) 設(shè)置僅觸發(fā)一次的事件

ok 根據(jù)我們的構(gòu)想，在來(lái)看這個(gè)實(shí)現(xiàn)好的 Event 類(lèi)

let uid = 0

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

    $on(eventName, fn) {
        let ctx = this;
        // 若 _events 對(duì)象下無(wú)對(duì)應(yīng)事件名，則新建一個(gè)數(shù)組，然后將處理函數(shù)推入數(shù)組
        if(!ctx._events[eventName]){
            ctx._events[eventName] = []
        }
        ctx._events[eventName].push(fn)
        return ctx
    }

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

        function on() {
            // 先取消，然后觸發(fā)，確保僅觸發(fā)一次
            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
    }

}

一個(gè)簡(jiǎn)單的事件管理的類(lèi)便實(shí)現(xiàn)好了，讓我們來(lái)測(cè)試一下：

import {Event} from "./Event";

let eventTest = new Event()

eventTest.$on("testEvent", function (event) {
    console.log("測(cè)試事件添加，傳入?yún)?shù)為" + event)
})

eventTest.$emit("testEvent", "事件觸發(fā)成功")
// 測(cè)試事件添加，傳入?yún)?shù)為事件觸發(fā)成功

eventTest.$emit("testEvent", "事件再次觸發(fā)成功")
// 測(cè)試事件添加，傳入?yún)?shù)為事件再次觸發(fā)成功

eventTest.$off("testEvent")

eventTest.$emit("testEvent", "事件取消，不會(huì)有輸出")
// 無(wú)輸出

eventTest.$once("testOnce", function (event) {
    console.log("事件僅僅觸發(fā)一次，傳入?yún)?shù)為" + event)
})

eventTest.$emit("testOnce", "事件觸發(fā)成功")
// 事件僅僅觸發(fā)一次，傳入?yún)?shù)為事件觸發(fā)成功

eventTest.$emit("testOnce", "事件取消，不會(huì)有輸出")
// 無(wú)輸出

ok 一個(gè)簡(jiǎn)易的事件管理實(shí)現(xiàn)了，由于這節(jié)內(nèi)容與上幾節(jié)關(guān)系不大，所以這里再次說(shuō)下測(cè)試代碼的運(yùn)行方式：

node 環(huán)境 8.11.1 往上，不然不能夠支持 import 語(yǔ)法

為了不轉(zhuǎn)碼支持 import 語(yǔ)法，文件后綴為 .mjs

進(jìn)入到 test.mjs 所在目錄命令行運(yùn)行：node --experimental-modules test.mjs 即可

點(diǎn)擊查看相關(guān)代碼

系列文章地址

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 優(yōu)化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 優(yōu)化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94536.html

相關(guān)文章

  • VUE - MVVM - part8 - 優(yōu)化Event

    摘要：看這篇之前，如果沒(méi)有看過(guò)之前的文章，可拉到文章末尾查看之前的文章?；仡櫾谏弦徊轿覀儗?shí)現(xiàn)了一個(gè)簡(jiǎn)易的事件管理的類(lèi)，接下來(lái)我們把它給優(yōu)化下，方便我們的使用。接著我們來(lái)優(yōu)化。 看這篇之前，如果沒(méi)有看過(guò)之前的文章，可拉到文章末尾查看之前的文章。 回顧 在上一步我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的事件管理的類(lèi)，接下來(lái)我們把它給優(yōu)化下，方便我們的使用。主要優(yōu)化內(nèi)容： 方便為多個(gè)事件添加同一個(gè)函數(shù) 方便為一個(gè)事件...

    jsyzchen 評(píng)論0 收藏0

  • VUE - MVVM - part1 - defineProperty

    摘要：在中關(guān)于如何實(shí)現(xiàn)在網(wǎng)上可以搜出不少，在看了部分源碼后，梳理一下內(nèi)容。換個(gè)說(shuō)法，當(dāng)我們?nèi)≈档臅r(shí)候，函數(shù)自動(dòng)幫我們添加了針對(duì)當(dāng)前值的依賴(lài)，當(dāng)這個(gè)值發(fā)生變化的時(shí)候，處理了這些依賴(lài)，比如說(shuō)節(jié)點(diǎn)的變化。 在 VUE 中關(guān)于如何實(shí)現(xiàn)在網(wǎng)上可以搜出不少，在看了部分源碼后，梳理一下內(nèi)容。 首先，我們需要了解一下 js 中的一個(gè) API :Object.defineProperty(obj, prop,...

    liukai90 評(píng)論0 收藏0

  • VUE - MVVM - part13 - inject & 總結(jié)

    摘要：通過(guò)裝作這些變化，我們實(shí)現(xiàn)了從而到達(dá)了數(shù)據(jù)變化觸發(fā)函數(shù)的過(guò)程。于此同時(shí)，我們還實(shí)現(xiàn)了來(lái)擴(kuò)展這個(gè)可響應(yīng)的結(jié)構(gòu)，讓這個(gè)對(duì)象擁有了觸發(fā)和響應(yīng)事件的能力。最后，根據(jù)我們的實(shí)現(xiàn)，這是最終的產(chǎn)出，一個(gè)框架，了解一下系列文章地址優(yōu)化優(yōu)化總結(jié) 看這篇之前，如果沒(méi)有看過(guò)之前的文章，移步拉到文章末尾查看之前的文章。 provide / inject 在上一步我們實(shí)現(xiàn)了，父子組件，和 props 一樣 pr...

    niuxiaowei111 評(píng)論0 收藏0

  • VUE - MVVM - part9 - Vue

    摘要：調(diào)用父類(lèi)的方法類(lèi)在我們上一步已經(jīng)實(shí)現(xiàn)。我們先實(shí)現(xiàn)的綁定，因?yàn)槭且槐O(jiān)聽(tīng)，所以要進(jìn)行進(jìn)一步的處理。調(diào)用父類(lèi)的方法方法綁定完事，其實(shí)就這么簡(jiǎn)單。 看這篇之前，如果沒(méi)有看過(guò)之前的文章，可拉到文章末尾查看之前的文章。 前言 激動(dòng)人心的時(shí)候即將來(lái)臨，之前我們做的 8 步，其實(shí)都在為這一步打基礎(chǔ)，這一步，我們來(lái)簡(jiǎn)單實(shí)現(xiàn)一個(gè) Vue 對(duì)象，還沒(méi)有看過(guò)之前代碼的同學(xué)，請(qǐng)確認(rèn)看過(guò)之前的文章。 主要實(shí)現(xiàn)內(nèi)...

    yzd 評(píng)論0 收藏0

  • VUE - MVVM - part2 - Dep

    摘要：看這篇之前，如果沒(méi)看過(guò)先移步看實(shí)現(xiàn)中。同樣的，在取值時(shí)收集依賴(lài)，在設(shè)置值當(dāng)值發(fā)生變化時(shí)觸發(fā)依賴(lài)。中實(shí)現(xiàn)了一個(gè)的類(lèi)來(lái)處理以上兩個(gè)問(wèn)題，之后再說(shuō)。以下語(yǔ)法下的，源碼中差不多就這樣點(diǎn)擊查看相關(guān)代碼系列文章地址優(yōu)化優(yōu)化總結(jié) 看這篇之前，如果沒(méi)看過(guò) step1 先移步看 實(shí)現(xiàn) VUE 中 MVVM - step1 - defineProperty。 在上一篇我們大概實(shí)現(xiàn)了，Vue 中的依賴(lài)收集和...

    hover_lew 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<