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

資訊專欄INFORMATION COLUMN

VUE - MVVM - part2 - Dep

hover_lew / 681人閱讀

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

看這篇之前，如果沒看過 step1 先移步看 實(shí)現(xiàn) VUE 中 MVVM - step1 - defineProperty。

在上一篇我們大概實(shí)現(xiàn)了，Vue 中的依賴收集和觸發(fā)，但我們僅僅是將依賴維護(hù)在一個(gè)內(nèi)置數(shù)組中，這樣做雖然容易理解，但畢竟不好維護(hù)，為了更容易的維護(hù)這些依賴，我們來實(shí)現(xiàn)一個(gè)維護(hù)依賴的類。

確定功能

首先我們可以先確定這個(gè)類下的屬性，以及一些功能：

類下屬性：

target 函數(shù)，用于存放需要添加的依賴

實(shí)例下屬性及方法：

subs/Array 用于存放依賴

addSub/Function 用于添加依賴

removeSub/Function 用于移除依賴

notify/Function 用于執(zhí)行依賴

實(shí)現(xiàn)

考慮到直接放在瀏覽器上執(zhí)行，所以直接用 ES5 的類寫法。

let Dep = function(){

    // 實(shí)例屬性
    this.subs = []
    
    // 實(shí)例方法
    this.addSub = function(sub){
        this.subs.push(sub)
    }
    
    this.removeSub = function(sub){
        const index = this.subs.indexOf(item)
        if (index > -1) {
            this.subs.splice(index, 1)
        }
    }
    
    this.notify = function(newValue, oldVaule){
        this.subs.forEach(fnc=>fnc(newValue, oldVaule))
    }
}

// 類屬性
Dep.target = null

好了，現(xiàn)在我們擁有了一個(gè)管理依賴的類（這里將依賴簡化為一個(gè)方法），現(xiàn)在我們就可以動(dòng)手來改一下之前的代碼了。

let defineReactive = function(object, key, value){
    let dep = new Dep()
    Object.defineProperty(object, key, {
        configurable: true,
        enumerable: true,
        get: function(){
            if(Dep.target){
                dep.addSub(Dep.target)
            }
            return value
        },
        set: function(newValue){
            if(newValue != value){
                dep.notify(newValue, value)
            }
            value = newValue
        }
    })
}

可以發(fā)現(xiàn)，之前我們用來存放依賴的數(shù)組變成了一個(gè)依賴管理（Dep）的實(shí)例。同樣的，在取值時(shí)收集依賴，在設(shè)置值（當(dāng)值發(fā)生變化）時(shí)觸發(fā)依賴。

由于依賴的處理由 Dep 的實(shí)例管理了，這里僅僅調(diào)用一下相關(guān)方法即可。

接下來試一試效果：

let object = {}
defineReactive(object, "test", "test")
Dep.target = function(newValue, oldValue){
    console.log("我被添加進(jìn)去了，新的值是：" + newValue)
}
object.test
// test

Dep.target = null
object.test = "test2"
// 我被添加進(jìn)去了，新的值是：test2

Dep.target = function(newValue, oldValue){
    console.log("添加第二個(gè)函數(shù)，新的值是：" + newValue)
}
object.test
// test

Dep.target = null
object.test = "test3"
// 我被添加進(jìn)去了，新的值是：test3
// 添加第二個(gè)函數(shù)，新的值是：test3

但是上面的代碼暴露了幾個(gè)問題

Dep 這個(gè)類將監(jiān)聽屬性和處理依賴進(jìn)行了解耦，但是卻沒有完全解耦，在觸發(fā)依賴的時(shí)候，還是得傳新舊值。

上面代碼中 Dep 中定義的 removeSub 在代碼中并沒有用到，因?yàn)?Dep 的實(shí)例是在 defineReactive 函數(shù)的作用域中，外部并不能直接調(diào)用，而刪除依賴肯定是在外部的環(huán)境中，也就是說即使我們將代碼改成這樣，我們還是不能直接取刪除已經(jīng)沒用的依賴。

Vue 中實(shí)現(xiàn)了一個(gè) Watcher 的類來處理以上兩個(gè)問題，之后再說。

以下 ES6 語法下的 Dep ，Vue 源碼中差不多就這樣

class Dep {

    constructor() {
        this.subs = []
    }

    addSub(sub) {
        this.subs.push(sub)
    }

    removeSub(sub) {
        const index = this.subs.indexOf(item)
        if (index > -1) {
            this.subs.splice(index, 1)
        }
    }

    notify() {
        this.subs.forEach(fnc=>fnc(oldValue, newValue))
    }
}

Dep.target = null

點(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://hztianpu.com/yun/94133.html

相關(guān)文章

  • VUE - MVVM - part3 - Watcher

    摘要：解決第一個(gè)問題很簡單，我們把某個(gè)屬性的值對(duì)應(yīng)值變化時(shí)需要執(zhí)行的函數(shù)抽象成一個(gè)對(duì)象，然后把這個(gè)對(duì)象當(dāng)成是依賴，推入依賴管理中。的實(shí)現(xiàn)有了以上的考慮，那個(gè)依賴對(duì)象在中就是。新值作為添加的第一個(gè)函數(shù)，很自豪。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 前言 在 step2 中，我們實(shí)現(xiàn)了一個(gè)管理依賴的 Dep ，但是僅僅使用這個(gè)類并不能完成我們想實(shí)現(xiàn)的功能，而且代碼...

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

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

    摘要：關(guān)于中的的實(shí)現(xiàn)，差不多也就這樣了，當(dāng)然這僅僅是基礎(chǔ)的實(shí)現(xiàn)，而且視圖層層渲染抽象成一個(gè)函數(shù)。不同于中的實(shí)現(xiàn)，這里少了很多各種標(biāo)記和應(yīng)用標(biāo)記的過程。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 回顧 首先我們思考一下截止當(dāng)前，我們都做了什么 通過 defineReactive 這個(gè)函數(shù)，實(shí)現(xiàn)了對(duì)于數(shù)據(jù)取值和設(shè)置的監(jiān)聽 通過 Dep 類，實(shí)現(xiàn)了依賴的管理 通過 Wa...

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

  • VUE - MVVM - part6 - Array

    摘要：回顧在前面的幾個(gè)中，我們實(shí)現(xiàn)對(duì)象的屬性的監(jiān)聽，但是有關(guān)于數(shù)組的行為我們一直沒有處理。并且上述的幾個(gè)數(shù)組方法是數(shù)組對(duì)象提供的，我們要想辦法去觸發(fā)下的函數(shù)。在設(shè)置值的時(shí)候就能成功觸發(fā)依賴。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 回顧 在前面的幾個(gè) step 中，我們實(shí)現(xiàn)對(duì)象的屬性的監(jiān)聽，但是有關(guān)于數(shù)組的行為我們一直沒有處理。我們先分析下導(dǎo)致數(shù)組有哪些行為： ...

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

  • VUE - MVVM - part5 - Observe

    摘要：具體代碼執(zhí)行方式進(jìn)入到的目錄下，命令行運(yùn)行即可。確保為一個(gè)對(duì)象如果對(duì)象下有則不需要再次生成函數(shù)返回該對(duì)象的實(shí)例，這里判斷了如果該對(duì)象下已經(jīng)有實(shí)例，則直接返回，不再去生產(chǎn)實(shí)例。這就確保了一個(gè)對(duì)象下的實(shí)例僅被實(shí)例化一次。 看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。 回顧 在 step4 中，我們大致實(shí)現(xiàn)了一個(gè) MVVM 的框架，由3個(gè)部分組成： defineRe...

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

  • VUE - MVVM - part1 - defineProperty

    摘要：在中關(guān)于如何實(shí)現(xiàn)在網(wǎng)上可以搜出不少，在看了部分源碼后，梳理一下內(nèi)容。換個(gè)說法，當(dāng)我們?nèi)≈档臅r(shí)候，函數(shù)自動(dòng)幫我們添加了針對(duì)當(dāng)前值的依賴，當(dāng)這個(gè)值發(fā)生變化的時(shí)候，處理了這些依賴，比如說節(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

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

0條評(píng)論

閱讀需要支付1元查看
<