Typescript 该系统中如何在嵌套属性的子集更改时获得回调

以下是一些初步 idea :

• 根据我的理解，第一个参数a.watch3('b', {c: {d: true}}, cb)的名称必须与其中一个属性匹配，Matcher对象应该"映射"到该属性的值.但是，我建议将Matcher对象映射到current对象(this)，并将b放入该Matcher中，这样您就可以省略第一个参数:

  a.watch3({b: {c: {d: true}}}, cb);
  

• 我将对所有签名使用一个watch方法，其中回调始终是第一个参数，而Matcher对象是可选的第二个参数.在我看来，名字的争论是没有必要的(上一点).

• 我将假设回调只能被调用一次.这是一个在以下场景中变得重要的假设:

  const a = new TreeObject();
  const b = a.createObject('b');
  const c = b.createObject('c');
  const d = c.createLiteral('d');
  
  a.watch(() => console.log("a resolved"));
  
  d.set('foo'); // This triggers "a resolved"
  
  // This makes a unresolved again
  const e = c.createLiteral('e');
  // but resolving a again will not trigger the same callback
  e.set('bar'); // This does not trigger "a resolved" anymore
  // Let's do that again: unresolve a...
  const f = c.createLiteral('f');
  // But now we add a new callback before the resolution occurs:
  a.watch(() => console.log("a resolved AGAIN"));
  f.set('baz'); // This triggers "a resolved AGAIN" (only)
  

  这一假设意味着，一旦被调用，回调可以/必须是unregistered.

• 如果在还没有文本的情况下注册了回调，则该对象将被视为not yet个已解析对象--要被解析，(下游)对象 struct 中必须至少有一个文本，并且所有下游文本都必须已接收值(如果提供了Matcher对象，则为其子集)

• 如果提供的Matcher对象引用的 struct 不是(完全)存在的，则在该 struct completely构建并且相应的文字已经接收值之前，不会调用已注册的回调.因此，我们需要一种"待处理匹配器"属性，只要创建了丢失的属性，就需要判断该属性，以使一个或多个匹配器能够应用于该新属性.

• 如果Matcher对象的值为true，其中实际的对象 struct 具有更深的嵌套对象 struct ，而不是文字，则该true将被解释为"所有低于此点"必须已接收到值.

• 如果Matcher对象有一个对象，其中实际对象有一个文本，则该匹配器将永远不会得到解析.

• 我更新了这个答案，以便只要有可能(当相应的 struct 完成时)，匹配器就会变成端点 node 上的标准监视器(没有匹配器)，这样就可以使用从文字到根的upstream 更新的计数器来管理所有匹配器.当计数器变为零时，意味着所有必需的项都被解决了.这里的一个重要细节是，Matcher对象将为其每个终结点创建自己的回调，并且当调用这些回调时，它将跟踪单独的计数器.当该值变为零时，将调用原始回调.

以下是它的编码方式:

type Matcher = true | {
    [key: string]: Matcher
};

type Callback = () => void;

type Listener = { callback: Callback, matcher: Matcher };

type TreeNode = TreeObject | TreeLiteral;

abstract class TreeElement  {
    #parent?: TreeObject;
    #unresolvedCount = 0;
    #hasLiterals = false;
    #callbacks: Array<Callback> = [];
    
    constructor(parent?: TreeObject) {
        this.#parent = parent;
    }

    notify(isResolved: boolean) { // bubbles up from a TreeLiteral, when created and when resolved
        if (isResolved) {
            this.#unresolvedCount--;
            if (this.#unresolvedCount == 0) {
                for (const cb of this.#callbacks.splice(0)) {
                    cb();
                }
            }
        } else {
            this.#unresolvedCount++;
            this.#hasLiterals = true;
        }
        this.#parent?.notify(isResolved); // bubble up
    }
    
    watch(callback: Callback) {
        if (this.#hasLiterals && this.#unresolvedCount == 0) {
            callback();
        } else {
            this.#callbacks.push(callback);
        }
    }

}

class TreeObject extends TreeElement {
    #properties: Record<string, TreeNode> = {};
    #pendingMatchers: Record<string, Array<Listener>> = {};

    #attach(name: string, child: TreeNode) {
        this.#properties[name] = child;
        // If this name is used by one or more pending matchers, remove them as pending,
        //   and watch the nested matcher(s) on the newly created child.
        if (this.#pendingMatchers[name]) {
            for (const {callback, matcher} of this.#pendingMatchers[name].splice(0)) {
                child.watch(callback, matcher);
            }
        }
    }

    createObject(name: string) {
        if (this.#properties[name]) throw new Error(`Cannot create ${name}: it is already used`);
        const obj = new TreeObject(this);
        this.#attach(name, obj);
        return obj;
    }

    createLiteral(name: string) {
        if (this.#properties[name]) throw new Error(`Cannot create ${name}: it is already used`);
        const obj = new TreeLiteral(this);
        this.#attach(name, obj);
        return obj;
    }

    watch(callback: Callback, matcher: Matcher=true) {
        if (matcher === true) {
            super.watch(callback);
        } else {
            let counter = Object.keys(matcher).length;
            // Create a new callback that will call the original callback when all toplevel
            //   entries specified by the matcher have been resolved.
            const newCallback = () => {
                counter--;
                if (counter == 0) {
                    callback();
                }
            };
            for (const key of Object.keys(matcher)) {
                if (this.#properties[key]) {
                    this.#properties[key].watch(newCallback, matcher[key]);
                } else { // suspend the watch until the structure is there
                    (this.#pendingMatchers[key] ??= []).push({
                        callback: newCallback,
                        // Copy the matcher so the caller cannot mutate our matcher
                        matcher: JSON.parse(JSON.stringify(matcher[key]))
                    });
                }
            }
        }

    }
}

class TreeLiteral extends TreeElement {
    #literalValue: any;

    constructor(parent?: TreeObject) {
        super(parent);
        this.notify(false); // Notifiy to the ancestors that there is a new literal
    }

    set(value: any) {
        this.#literalValue = value;
        this.notify(true); // Notifiy to the ancestors that this literal resolved
    }

    valueOf() {
        return this.#literalValue;
    }

    watch(callback: Callback, matcher: Matcher=true) {
        if (matcher === true) {
            super.watch(callback);
        } // else, the matcher references an endpoint that will never be created
    }
}

在TS Playground上使用一些测试函数来查看它