成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

jsyzchen / 1038人閱讀

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

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

回顧

在上一步我們實現(xiàn)了一個簡易的事件管理的類，接下來我們把它給優(yōu)化下，方便我們的使用。主要優(yōu)化內(nèi)容：

方便為多個事件添加同一個函數(shù)

方便為一個事件添加多個函數(shù)

有針對性的取消事件的函數(shù)

第一點和第二點都要修改 $on 函數(shù)，所以我們一起改：

之前的代碼

$on(eventName, fn) {
    let ctx = this;
    if(!ctx._events[eventName]){
        ctx._events[eventName] = []
    }
    ctx._events[eventName].push(fn)
    return ctx
}

優(yōu)化之后的代碼

$on(eventName, fn) {
    let ctx = this
    // 處理事件名是數(shù)組的情況
    if (Array.isArray(eventName)) {
        // 遞歸調(diào)用 $on 函數(shù)
        eventName.forEach(name => this.$on(name, fn))
    } else {
        // 處理處理函數(shù)為數(shù)組的情況
        // 將處理函數(shù)統(tǒng)一成數(shù)組方便添加
        if (!Array.isArray(fn)) {
            fn = [fn]
        }
        if(!ctx._events[eventName]){
            ctx._events[eventName] = []
        }
        ctx._events[eventName].push(fn)
    }
    return ctx
}

很簡單的優(yōu)化，但卻讓 $on 函數(shù)更加方便的使用。

接著我們來優(yōu)化 $off 。我們先看看之前的代碼：

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

我們只做了清空特定事件，其實我們能做的還有很多，

清空所有事件

清空多個事件

取消特定事件的特定處理函數(shù)

優(yōu)化的細(xì)節(jié)看代碼中的注釋

$off(eventName, fn) {
    let ctx = this
    // 清空所有事件
    if (!arguments.length) {
        ctx._events = Object.create(null)
        return ctx
    }
    // 清空多個事件
    if (Array.isArray(eventName)) {
        eventName.forEach(name => this.$off(name, fn))
        return ctx
    }
    // 若沒有事件對應(yīng)的函數(shù)列表則不用處理
    const cbs = ctx._events[eventName]
    if (!cbs) {
        return ctx
    }
    // 清空特定事件
    if (!fn) {
        ctx._events[eventName] = null
        return ctx
    }
    // 取消特定事件的特定處理函數(shù)
    if (fn) {
        let cb
        let i = cbs.length
        // 處理一次取消多個的情況
        if (Array.isArray(fn)) {
            fn.forEach(fnc => this.$off(eventName, fnc))
        }
        while (i--) {
            cb = cbs[i]
            if (cb === fn || cb.fn === fn) {
                cbs.splice(i, 1)
                break
            }
        }
    }
    return ctx
}

ok 優(yōu)化好了，測試一下：

import {Event} from "./Event";

let eventTest = new Event()

eventTest.$on("eventName1", (e) => {
    console.log("一次添加一個處理函數(shù)")
    console.log(e)
})

eventTest.$on("eventName2", [(e) => {
    console.log("一次添加多個處理函數(shù)，第一個")
    console.log(e)
}, (e) => {
    console.log("一次添加多個處理函數(shù)，第二個")
    console.log(e)
}])

eventTest.$on(["eventName3", "eventName4"], (e) => {
    console.log("多個事件添加同一處理函數(shù)")
    console.log(e)
})

eventTest.$on(["eventName5", "eventName6"], [(e) => {
    console.log("多個事件添加多個處理函數(shù)，第一個")
    console.log(e)
}, (e) => {
    console.log("多個事件添加多個處理函數(shù)，第二個")
    console.log(e)
}])

eventTest.$emit("eventName1", "傳入?yún)?shù)1")
// 一次添加一個處理函數(shù)
// 傳入?yún)?shù)1
eventTest.$emit("eventName2", "傳入?yún)?shù)2")
// 一次添加多個處理函數(shù)，第一個
// 傳入?yún)?shù)2
// 一次添加多個處理函數(shù)，第二個
// 傳入?yún)?shù)2
eventTest.$emit("eventName3", "傳入?yún)?shù)3")
// 多個事件添加同一處理函數(shù)
// 傳入?yún)?shù)3
eventTest.$emit("eventName4", "傳入?yún)?shù)4")
// 多個事件添加同一處理函數(shù)
// 傳入?yún)?shù)4
eventTest.$emit("eventName5", "傳入?yún)?shù)5")
// 多個事件添加多個處理函數(shù)，第一個
// 傳入?yún)?shù)5
// 多個事件添加多個處理函數(shù)，第二個
// 傳入?yún)?shù)5
eventTest.$emit("eventName6", "傳入?yún)?shù)6")
// 多個事件添加多個處理函數(shù)，第一個
// 傳入?yún)?shù)6
// 多個事件添加多個處理函數(shù)，第二個
// 傳入?yún)?shù)6
console.log("------------------------------")

eventTest.$off("eventName1")
eventTest.$off(["eventName2", "eventName3"])

eventTest.$emit("eventName1", "傳入?yún)?shù)1")
// 無輸出
eventTest.$emit("eventName2", "傳入?yún)?shù)2")
// 無輸出
eventTest.$emit("eventName3", "傳入?yún)?shù)3")
// 無輸出
eventTest.$emit("eventName4", "傳入?yún)?shù)4")
// 多個事件添加同一處理函數(shù)
// 傳入?yún)?shù)4
eventTest.$emit("eventName5", "傳入?yún)?shù)5")
// 多個事件添加多個處理函數(shù)，第一個
// 傳入?yún)?shù)5
// 多個事件添加多個處理函數(shù)，第二個
// 傳入?yún)?shù)5
eventTest.$emit("eventName6", "傳入?yún)?shù)6")
// 多個事件添加多個處理函數(shù)，第一個
// 傳入?yún)?shù)6
// 多個事件添加多個處理函數(shù)，第二個
// 傳入?yún)?shù)6
console.log("------------------------------")

eventTest.$off()
eventTest.$emit("eventName1", "傳入?yún)?shù)1")
// 無輸出
eventTest.$emit("eventName2", "傳入?yún)?shù)2")
// 無輸出
eventTest.$emit("eventName3", "傳入?yún)?shù)3")
// 無輸出
eventTest.$emit("eventName4", "傳入?yún)?shù)4")
// 無輸出
eventTest.$emit("eventName5", "傳入?yún)?shù)5")
// 無輸出
eventTest.$emit("eventName6", "傳入?yún)?shù)6")
// 無輸出
console.log("------------------------------")

這兩節(jié)吧，事件介紹了下，一個健壯的事件的類也編寫好了，接下來我們把這 8 步實現(xiàn)的內(nèi)容集合到一個對象下，也就是 Vue 下，敬請期待。

點擊查看相關(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94578.html

相關(guān)文章

  • VUE - MVVM - part7 - Event

    摘要：事件是什么在標(biāo)準(zhǔn)瀏覽器中，我們經(jīng)常使用來為一個添加一個事件等。仔細(xì)看這些情況，歸結(jié)到代碼中，無非就是一個行為或情況的名稱，和一些列的動作，而在中動作就是，一系列的動作就是一個函數(shù)的集合。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 事件是什么？ 在標(biāo)準(zhǔn)瀏覽器中，我們經(jīng)常使用：addEventListener 來為一個 DOM 添加一個事件（click、mouse...

    xialong 評論0 收藏0

  • VUE - MVVM - part1 - defineProperty

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

    liukai90 評論0 收藏0

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

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

    niuxiaowei111 評論0 收藏0

  • VUE - MVVM - part2 - Dep

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

    hover_lew 評論0 收藏0

  • VUE - MVVM - part9 - Vue

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

    yzd 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<