国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

VUE - MVVM - part7 - Event

xialong / 1591人閱讀

摘要：事件是什么在標準瀏覽器中，我們經(jīng)常使用來為一個添加一個事件等。仔細看這些情況，歸結到代碼中，無非就是一個行為或情況的名稱，和一些列的動作，而在中動作就是，一系列的動作就是一個函數(shù)的集合。

看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。

事件是什么？

在標準瀏覽器中，我們經(jīng)常使用：addEventListener 來為一個 DOM 添加一個事件（click、mousemove、tap等）。

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

仔細看這些情況，歸結到代碼中，無非就是一個行為（或情況）的名稱，和一些列的動作，而在 js 中動作就是 function，一系列的動作就是一個函數(shù)的集合。

實現(xiàn)

如上所說，我們把事件抽象成一個類

類下屬性 & 方法

_events 一個對象 {key: eventName, value: Array}

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

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

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

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

ok 根據(jù)我們的構想，在來看這個實現(xiàn)好的 Event 類

let uid = 0

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

    $on(eventName, fn) {
        let ctx = this;
        // 若 _events 對象下無對應事件名，則新建一個數(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
    }

}

一個簡單的事件管理的類便實現(xiàn)好了，讓我們來測試一下：

import {Event} from "./Event";

let eventTest = new Event()

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

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

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

eventTest.$off("testEvent")

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

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

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

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

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

node 環(huán)境 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 - 優(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 & 總結

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94536.html

相關文章

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

    摘要：看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。回顧在上一步我們實現(xiàn)了一個簡易的事件管理的類，接下來我們把它給優(yōu)化下，方便我們的使用。接著我們來優(yōu)化。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 回顧 在上一步我們實現(xiàn)了一個簡易的事件管理的類，接下來我們把它給優(yōu)化下，方便我們的使用。主要優(yōu)化內(nèi)容： 方便為多個事件添加同一個函數(shù) 方便為一個事件...

    jsyzchen 評論0 收藏0

  • VUE - MVVM - part1 - defineProperty

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

    liukai90 評論0 收藏0

  • VUE - MVVM - part13 - inject & 總結

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

    niuxiaowei111 評論0 收藏0

  • VUE - MVVM - part9 - Vue

    摘要：調(diào)用父類的方法類在我們上一步已經(jīng)實現(xiàn)。我們先實現(xiàn)的綁定，因為是要被監(jiān)聽，所以要進行進一步的處理。調(diào)用父類的方法方法綁定完事，其實就這么簡單。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 前言 激動人心的時候即將來臨，之前我們做的 8 步，其實都在為這一步打基礎，這一步，我們來簡單實現(xiàn)一個 Vue 對象，還沒有看過之前代碼的同學，請確認看過之前的文章。 主要實現(xiàn)內(nèi)...

    yzd 評論0 收藏0

  • VUE - MVVM - part2 - Dep

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

    hover_lew 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<