@ 原子/ 频道

@atomico/channel 允许WebComputers或DOM之间轻松共享状态.

这个API的灵感来自React Context的目标,但消除了复杂性,是一种不可知的执行.

什么是频道?

一个频道是发送者和通过 DOM 的本地事件系统获得状态的接收者,一个频道有以下逻辑:

1. 读取父的上下文
2. 修改儿童的上下文

示例

这是网络组件订阅父节点的例子 :

import { Channel } from "@atomico/channel";

const CHANNEL = "MyChannel";
// Parent channel
const parentChannel = new Channel(document.body, CHANNEL);

class MyComponent extends HTMLElement {
    constructor() {
        super();
        // Child channel
        this.channel = new Channel(this, CHANNEL);
    }
    connectedcallback() {
        this.channel.connected(
            (data) => (this.textContent = JSON.stringify(data))
        );
    }
    disconnectedCallback() {
        this.channel.disconnect();
    }
}

// Connect the channel to the native DOM event system
parentChannel.connect();

parentChannel.cast("I'm your father");

API 密码

频道( )

const channel = new Channel(
    // Element
    host,
    // string
    "idString",
    // associates the composed option to the event
    // this allows bypassing the shadowDOM when connecting the channels
    true
);

频道. connect ()

channel.connect(optionalCallback);

地点:

1. optionalCallback:可选择的回调,允许读取父的传输.

频道. disconect ()

删除订阅

频道.cast ()

向儿童频道播放新节目

channel.cast(10);
channel.cast({ data });

执行这种方法可以防止从父方传出的任何传输向该通道的孩子传播.