遊戲陪玩平臺原始碼開發，依賴收集和觸發的實現

雲豹科技程式設計師發表於2021-12-14
遊戲原始碼

概述

在遊戲陪玩平臺原始碼開發中，依賴收集和觸發比較複雜，不容易理解。今天我們們將它最簡化的講出來。

前期準備

1、宣告一個Map做儲蓄； 2、current用來傳遞資料； 3、data資料備用；
const map = new Map();
let current = null;
const data = {
    name: 'madapao',
    age: 18,
    sex: '男',
}

建立一個Watcher類

deps陣列收集遊戲陪玩平臺原始碼依賴，add方法新增遊戲陪玩平臺原始碼依賴。
class Watcher {
    constructor() {
        this.deps = [];
    }
    add(dep) {
        this.deps.push(dep)
    }
}

收集和觸發

對data中的資料進行劫持：
  • get：判斷map中有沒有這個key，如果沒有，就新建一個watcher，把current（current是什麼等訪問的時候就知道了）加進行watcher的deps中，每個key在map中對應一個watcher。如果已經有了，直接拿出來wathcer，把current加進行watcher的deps中。
  • set：拿出map中key對應的watcher，把它deps中的方法全部執行一次。
Object.keys(data).forEach(key => {
    Object.defineProperty(data, key, {
        get() {
            if (map.has(key)) {
                const watcher = map.get(key);
                watcher.add(current);
                map.set(key, watcher)
            } else {
                const watcher = new Watcher();
                watcher.add(current);
                deps.set(key, watcher);
            }
        },
        set() {
            if (map.has(key)) {
                map.get(key).deps.forEach(fn => fn())
            }
        }
    })
})

使用

在執行getAgeName方法，暫時把getAgeName賦值給current，使用data中資料key時。就會觸發key的get。把getAgeName放進key對應watcher的deps中。 當修改key的值時，就會觸發key對應watcher收集到的所有方法。
function getAgeName() {
    current = getAgeName;
    console.log('getAgeName執行了')
    return `${data.name}'今年'${data.age}歲。`
}
function getSexName() {
    current = getSexName;
    console.log('getSexName執行了')
    return `${data.name}'是一個'${data.sex}人。`
}
getAgeName();
getSexName();
data.name = 'mahaha';

全部程式碼

const deps = new Map();
let current = null;
class Watcher {
    constructor() {
        this.deps = [];
    }
    add(dep) {
        this.deps.push(dep)
    }
}
const data = {
    name: 'madapao',
    age: 18,
    sex: '男',
}
Object.keys(data).forEach(key => {
    Object.defineProperty(data, key, {
        get() {
            if (deps.has(key)) {
                const watcher = deps.get(key);
                watcher.add(current);
                deps.set(key, watcher)
            } else {
                const watcher = new Watcher();
                watcher.add(current);
                deps.set(key, watcher);
            }
        },
        set() {
            if (deps.has(key)) {
                deps.get(key).deps.forEach(fn => fn())
            }
        }
    })
})
function getAgeName() {
    current = getAgeName;
    console.log('getAgeName執行了')
    return `${data.name}'今年'${data.age}歲。`
}
function getSexName() {
    current = getSexName;
    console.log('getSexName執行了')
    return `${data.name}'是一個'${data.sex}人。`
}
getAgeName();
getSexName();
data.name = 'mahaha';
以上便是“遊戲陪玩平臺原始碼開發，依賴收集和觸發的實現”的全部內容，希望對大家有幫助。
本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理 原文連結：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69996194/viewspace-2847720/，如需轉載，請註明出處，否則將追究法律責任。

相關文章