SOURCE

const { log, dir, table, clear, warn, error } = console; clear();

const input = document.querySelector('input')
const textarea = document.querySelector('textarea')
const p = document.querySelector('p')
const btn1 = document.querySelector('.btn1')
const btn2 = document.querySelector('.btn2')

const signal = createSignal('hello world')
const unsubscribe = signal.subscribe(update)

signal.set('hello')
input.onkeyup = () => signal.set(input.value)
textarea.onkeyup = () => signal.set(textarea.value)
btn1.addEventListener('click', unsubscribe)
btn2.addEventListener('click', e => signal.subscribe(update))

function update(value) {
    input.value = value
    textarea.value = value
    p.innerText = value
}

function createSignal(initialValue) {
    let value = initialValue;
    const subscribers = new Set()

    return {
        get() { return value },
        set(newValue) {
            if (value !== newValue) {
                value = newValue
                subscribers.forEach((subscriber) => subscriber(value))
            }
        },
        subscribe(callback) {
            subscribers.add(callback)
            return () => subscribers.delete(callback)
        }
    };
}

// es5版本
function createSignalES5(initialValue) {
    var value = initialValue; // 状态值
    var subscribers = []; // 用数组存储订阅者

    return {
        get: function () {
            return value; // 返回当前状态
        },
        set: function (newValue) {
            if (value !== newValue) { // 如果值有变化
                value = newValue; // 更新状态值
                for (var i = 0; i < subscribers.length; i++) {
                    subscribers[i](value); // 通知每个订阅者
                }
            }
        },
        subscribe: function (callback) {
            if (subscribers.indexOf(callback) === -1) {
                subscribers.push(callback); // 添加订阅者
            }
            return function () {
                var index = subscribers.indexOf(callback);
                if (index !== -1) {
                    subscribers.splice(index, 1); // 取消订阅
                }
            };
        }
    };
}

<div class="container">
    <p></p>
    <input id="elm1" type="text">
    <textarea id="elm2" name="" cols="" rows=""></textarea>
    <button class="btn1">取消订阅（取消后数据不再同步）</button>
    <button class="btn2">重新订阅</button>
</div>

:root {
    --tiny-width: 70%;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 10px;
    background: #f2f5f7;
}
.hide {
    visibility: hidden;
    pointer-events: none;
    right: calc(-1 * var(--tiny-width)) !important;
}
.CodeMirror {
    flex: 1;
}
.popup {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: var(--tiny-width);
    min-width: 300px;
    height: 100%;
    top: 0;
    right: 0px;
    padding: 20px;
    z-index: 99999;
    background: #ffffffdd;
    backdrop-filter: blur(5px);
    transition: .3s;
    box-shadow: 0 0 8px #00000033;
}