@k3000/ce 0.0.1 → 0.1.0

package/index.mjs

@@ -1,192 +1,948 @@
-const getCurrentUrl = name => {
+let dir = './comp'
+let ext = 'mjs'
+
+/**
+ * 读取模板字符串内变量集合
+ * @param {String} str
+ * @returns {Set<String>}
+ * @example
+ * getVariables('name: {{name}}, age: {{info.age}}')
+ * // {'name', 'info.age'}
+ */
+let getVariables = str => {
+    // 1. 匹配所有 {{ ... }} 结构
+    // result: ["{{age + test()}}"]
+    const templates = str.match(/\{\{.+?}}/g);
+
+    if (!templates) return new Set();
+
+    const variables = new Set();
+    // 简单的 JS 关键字黑名单，避免把 true/null 当作变量
+    const keywords = new Set(['true', 'false', 'null', 'undefined', 'this', 'new', 'typeof', 'in', 'instanceof']);
+
+    templates.forEach(tpl => {
+        // 去掉外层的 {{ }}，只保留内容: "age + test()"
+        const content = tpl.slice(2, -2);
+
+        // 2. 正则核心逻辑
+        // \b              -> 单词边界，防止匹配到单词的一部分
+        // [a-zA-Z_$]      -> 变量必须以字母、下划线或 $ 开头
+        // [\w$]* -> 后续可以是字母、数字、下划线或 $
+        // (?!\s*\()       -> 【关键】负向先行断言：排除后面紧跟（可能是空格+）左括号的情况
+        // (?!\s*:)        -> (可选) 排除对象键值对中的键 (如 { key: val })
+        const regex = /\b[a-zA-Z_$][\w$]*(?:\s*\.\s*[a-zA-Z_$][\w$]*)*(?!\s*\()/g;
+
+        const matches = content.match(regex);
+
+        if (matches) {
+            matches.forEach(item => {
+                // 过滤关键字
+                if (!keywords.has(item)) {
+                    variables.add(item);
+                }
+            });
+        }
+    });
 
-    if (document.currentScript) return new URL(document.currentScript.src)
+    // console.log('variables', variables)
 
-    for (const script of document.scripts) {
+    return variables;
+}
+/**
+ * 创建一个临时的 node
+ * @returns {Text}
+ */
+let createTmpNode = (data = '') => {
 
-        if (!script.src) continue
+    return document.createTextNode('')
+}
+/**
+ *
+ * @param {String} code
+ * @returns {`with (scope) { return \`${*}\` \n}`}
+ * @example
+ * literalsCode('name: {{name}}')
+ * // 'with (scope) { return `name: ${name}` \n}'
+ */
+let literalsCode = code => {
+
+    return `with (scope) {\n\treturn \`${code.replace(/{{(.*?)}}/g, (_, key) => `\${${key}}`)}\` \n}`
+}
+/**
+ *
+ * @param code
+ * @returns {`with (scope) { return ${*} \n}`}
+ * @example
+ * literalsCode('{{count() + 1}}')
+ * // 'with (scope) { return count() + 1 \n}'
+ */
+let functionCode = code => {
+
+    return `with (scope) {\n\treturn ${code} \n}`
+}
+/**
+ * 处理实现<element each="{{[1,2,3]}}"></element>的循环
+ * 期望得到<element>1</element><element>2</element><element>3</element>
+ * @param {{
+ *     ownerElement: Node
+ *     nodeMap: Array
+ *     mark: Node
+ * }} data
+ * @param {Array} array
+ * @returns {{
+ *     ownerElement: Node
+ *     nodeMap: Array
+ *     mark: Node
+ * }}
+ */
+let handleArray = (data, array) => {
+
+    const target = data.ownerElement
+
+    /**
+     * 第一次初始化好相关数据，后面用mark.parentNode去做替换，data.ownerElement变成克隆下来的快照，已经不是属性的归属element了。
+     */
+    if (!data.nodeMap) {
+
+        /**
+         * @type {[[*, Node]]}
+         */
+        data.nodeMap = []
+
+        data.mark = createTmpNode('数组结束标记')
+
+        target.parentNode.replaceChild(data.mark, target)
+
+        data.ownerElement = target.cloneNode(true)
+    }
 
-        const url = new URL(script.src)
+    if (!Array.isArray(array)) return data
 
-        if (url.pathname.includes(name)) return url
-    }
+    const parent = data.mark.parentNode
 
-    return {
-        searchParams: {
-            get() {
-                return ''
-            }
+    let i = 0
+
+    for (; i < array.length; i++) {
+
+        if (data.nodeMap[i] === undefined) {
+
+            const clone = target.cloneNode(true)
+
+            try {
+
+                array[i]._ = data.scope
+
+            } catch (e) { }
+
+            bindNode(array[i], clone, true)
+
+            parent.insertBefore(clone, data.mark)
+
+            data.nodeMap[i] = [array[i], clone]
+
+            continue
+        }
+
+        if (data.nodeMap[i][0] !== array[i]) {
+
+            const clone = target.cloneNode(true)
+
+            try {
+
+                array[i]._ = data.scope
+
+            } catch (e) { }
+
+            bindNode(array[i], clone, true)
+
+            parent.replaceChild(clone, data.nodeMap[i][1])
+
+            data.nodeMap[i] = [array[i], clone]
+
+            // continue
         }
     }
+
+    const index = i
+
+    for (; i < data.nodeMap.length; i++) {
+
+        parent.removeChild(data.nodeMap[i][1])
+    }
+
+    data.nodeMap.splice(index, data.nodeMap.length - index)
+
+    return data
+}
+/**
+ * 调用该方法完成可配置参数合方法的初始化
+ * @param options
+ * @example
+ * import { config } from '../index.mjs'
+ * config({
+ *  dir: './app/comp',
+ *  getVariables: () => {...}
+ *  ...
+ * })
+ */
+export const config = (options) => {
+
+    if (options.dir) {
+
+        dir = options.dir
+    }
+
+    if (options.ext) {
+
+        ext = options.ext
+    }
+
+    if (typeof options.getVariables === 'function') {
+
+        getVariables = options.getVariables
+    }
+
+    if (typeof options.createTmpNode === 'function') {
+
+        createTmpNode = options.createTmpNode
+    }
+
+    if (typeof options.literalsCode === 'function') {
+
+        literalsCode = options.literalsCode
+    }
+
+    if (typeof options.functionCode === 'function') {
+
+        functionCode = options.functionCode
+    }
+
+    if (typeof options.handleArray === 'function') {
+
+        handleArray = options.handleArray
+    }
 }
+/**
+ * 获取自定义元素的名称，如果不只自定义元素返回undefined
+ * @param {Node} node
+ * @returns {string | undefined}
+ */
+const getCEName = node => {
 
-const url = getCurrentUrl('custom-element.mjs')
-const params = url.searchParams
-const dir = params.get('dir') || '/comp'
-const ext = params.get('ext') || 'mjs'
-const prod = !params.get('dev')
+    if (node.tagName.includes('-')) {
 
-const tools = {
+        return node.tagName.toLowerCase()
+    }
 
-    createTmpNode() {
+    if (node.hasAttribute('is')) {
 
-        return window.document.createTextNode('')
+        return node.getAttribute('is')
     }
 }
+/**
+ * 函数节流
+ * @param {Function} fn
+ * @param {Number} delay
+ * @returns {(function(...[*]): void)|*}
+ */
+export const throttle = (fn, delay = 41) => {
 
-const style = document.createElement('style')
+    let timer
 
-style.innerHTML = `
-*:not(:defined) {
-    display: none
+    return (...args) => {
+
+        clearTimeout(timer)
+
+        timer = setTimeout(() => fn(...args), delay)
+    }
 }
-`
 
-window.document.head.appendChild(style)
+/**
+ * 实现对象属性变化更新相应节点的函数池
+ * @type {WeakMap<WeakKey, Map<String, Set<Function>>>}
+ */
+const objectPool = new WeakMap
+/**
+ * 避免重复处理自定义元素引入处理的节点池
+ * @type {WeakSet<Node>}
+ */
+const importPool = new WeakSet
+/**
+ * 记录监听属性变化更新相应函数的方法
+ * @param {Object} scope
+ * @param {String} code
+ * @param {Function} update
+ * @example
+ * addListener({name: 'test'}, 'name', () => {})
+ */
+const addListener = (scope, code, update) => {
+
+    getVariables(code).forEach(variables => {
+
+        // 处理这种属性 {{user.info.name}} 达到监听info的name变化的效果
+        let key = '', obj = scope, index = 0, list = variables.split('.')
+
+        for ([index, key] of list.entries()) {
+
+            if (index === list.length - 1) {
+
+                break
+            }
+
+            if (obj === null || typeof obj !== 'object' || !Reflect.has(obj, key)) return
+
+            if (Array.isArray(obj[key]) && index === list.length - 2) break
+
+            obj = obj[key]
+        }
+
+        if (obj === null || typeof obj !== 'object') return
+
+        if (Object.getOwnPropertyDescriptor(obj, key) && !Object.getOwnPropertyDescriptor(obj, key).configurable) return
+
+        /**
+         * 如果没有记录该对象就新增对象、属性、更新函数的对应关系
+         * 如果记录了对象，没有记录属性，就添加属性、更新函数的对应关系
+         * 如果属性也存在了，那么就添加更新函数，因为是 Set 所以不用担心函数重复添加
+         */
+        if (objectPool.has(obj)) {
 
-const importPool = new Set
+            const map = objectPool.get(obj)
 
-const importComp = node => {
+            if (map.has(key)) {
+
+                map.get(key).add(update)
+
+            } else {
+
+                const set = new Set([update])
+
+                map.set(key, set)
+
+                let value = obj[key]
+
+                Object.defineProperty(obj, key, {
+
+                    get: () => value,
+
+                    set: (newValue) => {
+
+                        if (value === newValue) return
+
+                        value = newValue
+                        // 数值变化就执行相应的更新函数
+                        set.forEach(fn => fn())
+                    }
+                })
+            }
+
+        } else {
+
+            const set = new Set([update])
+
+            objectPool.set(obj, new Map([[key, set]]))
+
+            let value = obj[key]
+
+            Object.defineProperty(obj, key, {
+
+                get: () => value,
+
+                set: (newValue) => {
+
+                    if (value === newValue) return
+
+                    value = newValue
+                    // 数值变化就执行相应的更新函数
+                    set.forEach(fn => fn())
+                }
+            })
+        }
+    })
+}
+/**
+ * 用于记录自定义元素引入后的相关数据
+ */
+const ceMap = Object.create(null)
+/**
+ *
+ * @param {Node} node
+ * @param {String} name
+ */
+const disposeCE = (node, name) => {
+
+    node.querySelectorAll('*:not(:defined)').forEach(node => importCE(node))
+    // 提前创建的 shadowRoot nodes，clone绑定对象
+    if (ceMap[name].shadowRoot) {
+
+        node.attachShadow({mode: 'open'})
+
+        node.shadowRoot.appendChild(ceMap[name].shadowRoot.create(node))
+    }
+    // 提前创建的 innerHTML nodes，clone 绑定对象
+    if (ceMap[name].innerHTML || ceMap[name].outerHTML) {
+        const clone = (ceMap[name].innerHTML || ceMap[name].outerHTML).create(node)
+        // 如果没有 shadowRoot 然后子节点里面有 slot 就把标签内的内容插入到 slot 的位置，物理插入不同于 shadowRoot 的逻辑插入
+        if (!ceMap[name].shadowRoot) {
+            const slots = Array.from(clone.querySelectorAll('slot'))
+            const slotMap = slots.reduce((prev, curr) => {
+                prev[curr.getAttribute('name') || ''] = curr
+                return prev
+            }, {})
+            const children = Array.from(node.childNodes)
+            for (const child of children) {
+                const slot = typeof child.getAttribute === "function" ? child.getAttribute('slot') || '' : ''
+                if (slotMap[slot]) {
+                    slotMap[slot].parentNode.insertBefore(child, slotMap[slot])
+                }
+            }
+            for (const slot of slots) {
+                slot.parentNode.removeChild(slot)
+            }
+        }
+
+        if (ceMap[name].outerHTML) {
+
+            while (clone.firstChild) {
+
+                node.parentElement.insertBefore(clone.firstChild, node)
+            }
+
+            node.parentElement.removeChild(node)
+
+        } else {
+
+            node.appendChild(clone)
+        }
+    }
+    // 执行ready通知已经处理好 nodes
+    if (typeof node.ready === "function") {
+
+        node.ready()
+    }
+}
+let tmp = null
+/**
+ * 导入自定义元素
+ * @param {Node} node
+ * @param {String} name
+ */
+const importCE = (node, name = undefined) => {
+
+    name = name ?? getCEName(node)
 
     if (importPool.has(node)) return
 
+    importPool.add(node)
+    // 处理导入完成的自定义元素
+    if (customElements.get(name) !== undefined) {
+
+        disposeCE(node, name)
+
+        return
+    }
+
     // autonomous custom elements
     const ace = node.nodeName.includes('-')
 
-    const name = ace ? node.nodeName.toLowerCase() : node.attributes.is.value
+    let _dir = dir
+    // 处理组件目录
+    if (node.attributes.dir && node.attributes.dir.nodeValue) {
 
-    if (window.customElements.get(name) !== undefined) return
+        const value = node.attributes.dir.nodeValue
 
-    importPool.add(node)
+        node.removeAttribute('dir')
+
+        if (value.startsWith('/') || value.startsWith('./')) {
+            _dir = value
+        } else {
+            _dir = `${_dir}/${value}`
+        }
+    }
+
+    const path = `${_dir}/${name}.${ext}`
+
+    // console.log(path)
+
+    import(path).then(result => {
+        // 处理第一次导入的情况
+        if (customElements.get(name) === undefined) {
+
+            ceMap[name] = Object.create(null)
+            // 保存好 innerHTML、shadowRoot node
+            if (typeof result.innerHTML === 'string') {
+
+                ceMap[name].innerHTML = bind(result.innerHTML)
+            }
+
+            if (typeof result.outerHTML === 'string') {
+
+                ceMap[name].outerHTML = bind(result.outerHTML)
+            }
+
+            if (typeof result.shadowRoot === 'string') {
+
+                ceMap[name].shadowRoot = bind(result.shadowRoot)
+            }
+            // 注册自定义元素
+            if (ace) {
+
+                customElements.define(name, result.default)
+
+            } else {
 
-    let tmpNode = null
+                customElements.define(name, result.default, {
 
-    if (node.parentElement) {
+                    extends: node.nodeName.toLowerCase()
+                })
+            }
+        }
+
+        disposeCE(node, name)
+    })
+        .catch(error => {
+            console.error(error)
+        })
+}
+/**
+ * 处理节点内的模板字符串 <div>1 + 1 = {{1 + 1}}</div>
+ * @param {Object} scope
+ * @param {Node} node
+ */
+const disposeNode = (scope, node) => {
+
+    const value = node.nodeValue
+
+    if (value.match(/{{(.*?)}}/) === null) return
 
-        tmpNode = tools.createTmpNode()
+    const f = new Function('scope', literalsCode(value))
 
-        node.parentElement.replaceChild(tmpNode, node)
+    addListener(scope, value, throttle(() => node.nodeValue = f.call(node, scope)))
+
+    node.nodeValue = f.call(node, scope)
+}
+/**
+ * 处理属性的模板字符串，多种情况
+ * @param {Object} scope
+ * @param {Node} element
+ * @param {Attr} attr
+ * @param {String} code
+ */
+const disposeAttrValue = (scope, element, attr, code) => {
+    // 普通情况：class="theme-{{mode}}"
+    if (!code.startsWith('{{') || !code.endsWith('}}') || code.slice(2).includes('{{')) {
+
+        const f = new Function('scope', literalsCode(code))
+
+        return () => attr.nodeValue = f.call(element, scope)
     }
 
-    const path = `${dir}/${name}.${ext}`
+    const f = new Function('scope', functionCode(code.slice(2, -2)))
 
-    import(path).then(result => {
+    return () => {
+
+        const result = f.call(element, scope)
+        // 三种情况，如：<div disable="{{disable}}"></div>
+        // true - <div disable></div>
+        // false - <div></div>
+        // "disable" - <div disable="disable"></div>
+        switch (result) {
+
+            case true:
+
+                attr.nodeValue = ''
+
+                element.attributes.setNamedItem(attr)
+
+                break
+
+            case false:
 
-        if (window.customElements.get(name) === undefined) {
+                element.removeAttribute(attr.nodeName)
 
-            result.default.prototype.connectedCallback = async function (qwe) {
+                break
 
-                this.connectedCallback = undefined
+            default:
 
-                const {promise, resolve} = Promise.withResolvers()
+                attr.nodeValue = result
 
-                const dataFn = this.data
+                element.attributes.setNamedItem(attr)
+        }
+    }
+}
+/**
+ * 特殊情况处理属性的模板字符串，多种情况
+ * @param {Object} scope
+ * @param {Attr} attr
+ * @param {String} key
+ * @param {String} ceName
+ */
+const disposeSpecialAttr = (scope, attr, key, ceName) => {
 
-                this.data = () => promise
+    const ownerElement = attr.ownerElement
+    let name = attr.nodeName
+    // 处理属性的事件，是直接覆盖事件，不是 addEventListener
+    if (name.startsWith('on')) {
 
-                let data = await getScopeData(this)
+        ownerElement.removeAttribute(name)
+        // 如果绑定的是函数，直接把函数绑定在事件上
+        if (!key.includes('(')) {
 
-                if (typeof dataFn === "function") {
+            const list = key.split('.')
 
-                    data = await dataFn.call(this, data)
+            let k = '', obj = scope, index = 0
 
-                } else if (dataFn !== undefined) {
+            for ([index, k] of list.entries()) {
 
-                    data = dataFn
+                if (index === list.length - 1) {
+
+                    break
                 }
 
-                resolve(data)
+                if (obj !== null && typeof obj === 'object' && Reflect.has(obj, k)) {
+
+                    obj = obj[k]
 
-                if (typeof this.connected === "function") {
+                } else {
 
-                    this.connected(data)
+                    obj = {}
+
+                    break
                 }
             }
 
-            if (ace) {
+            if (typeof obj[k] === "function") {
 
-                window.customElements.define(name, result.default)
+                ownerElement[name] = event => obj[k](event)
 
-            } else {
+                return true
+            }
+        }
+        // 不是函数触发事件执行相应代码块
 
-                window.customElements.define(name, result.default, {
+        const f = new Function('scope', 'event', functionCode(key))
 
-                    extends: node.nodeName.toLowerCase()
-                })
+        ownerElement[name] = event => f.call(ownerElement, scope, event)
+
+        return true
+    }
+    // 动态把节点加入或者移除 DOM 树
+    if (name === 'connect') {
+
+        ownerElement.removeAttribute(name)
+
+        const f = new Function('scope', functionCode(key))
+
+        const tmpNode = createTmpNode('节点断开重连的标记')
+
+        const update = () => {
+
+            if (f(scope)) {
+
+                tmpNode.parentNode?.replaceChild(ownerElement, tmpNode)
+
+            } else {
+
+                ownerElement.parentNode?.replaceChild(tmpNode, ownerElement)
             }
         }
 
-        if (tmpNode === null) return
+        // console.log(scope, attr.nodeValue, update)
 
-        tmpNode.parentElement.replaceChild(node, tmpNode)
+        addListener(scope, attr.nodeValue, throttle(() => update()))
 
-    })
-        .catch(error => console.error(error))
-        .finally(() => importPool.delete(node))
+        update()
+
+        return true
+    }
+    // 在节点位置按照数组循环渲染节点
+    if (name === 'each') {
+
+        ownerElement.removeAttribute(name)
+
+        let data = {ownerElement, scope}
+        // 如果绑定的直接就是对象的值，则对象的值改变会重新根据变化的数组渲染
+        if (Reflect.has(scope, key)) {
+
+            const update = () => data = handleArray(data, scope[key])
+
+            addListener(scope, attr.nodeValue, throttle(() => update()))
+
+            update()
+
+            return true
+        }
+
+        const f = new Function('scope', functionCode(key))
+
+        handleArray(data, f(scope))
+
+        return true
+    }
+    // 自定义元素的属性会以键值对的形式更新到自定义属性的对象里面
+    if (ceName) {
+
+        ownerElement.removeAttribute(name)
+
+        const f = new Function('scope', functionCode(key))
+
+        if (name.includes('-')) {
+
+            name = name.split('-').map((key, i) => key && i ? key[0].toUpperCase() + key.slice(1) : key).join('')
+        }
+
+        const update = () => {
+
+            const result = f(scope)
+
+            ownerElement[name] = typeof result === 'function' ? result.bind(scope) : result
+        }
+
+        // const update = () => ownerElement[name] = f(scope)
+
+        addListener(scope, attr.nodeValue, throttle(() => update()))
+
+        update()
+
+        return true
+    }
+
+    return false
 }
+/**
+ * 处理节点属性
+ * @param {Object} scope
+ * @param {Attr} attr
+ * @param {String} name
+ */
+const disposeAttr = (scope, attr, name) => {
+
+    const value = attr.nodeValue
+
+    if (value.match(/{{(.*?)}}/) === null) return
 
-for (const node of window.document.querySelectorAll(':not(:defined)')) {
+    // console.log('disposeAttr', attr, value)
+    // 如果属性绑定的是特殊值就按照特殊情况处理
+    if (value.startsWith('{{') && value.endsWith('}}') && disposeSpecialAttr(scope, attr, value.slice(2, -2), name)) return
 
-    importComp(node)
+    const fn = disposeAttrValue(scope, attr.ownerElement, attr, value)
+
+    addListener(scope, value, throttle(() => fn()))
+
+    fn()
 }
+/**
+ * 处理自身或者子 node 的属性或者节点内容
+ * @param scope
+ * @param node
+ * @param self
+ * @returns {*}
+ */
+export const bindNode = (scope, node, self) => {
 
-new MutationObserver(mutations => {
+    const list = self ? [node] : Array.from(node.childNodes)
 
-    for (const mutation of mutations) {
+    for (const n of list) {
 
-        for (const node of mutation.addedNodes) {
+        if (n.attributes) {
 
-            if (node.nodeType !== 1) continue
+            for (const attr of Array.from(n.attributes)) {
 
-            if (node.attributes.is || node.nodeName.includes('-')) {
+                disposeAttr(scope, attr, getCEName(n))
 
-                importComp(node)
+                if (attr.nodeName === 'each'
+                    && attr.nodeValue.startsWith('{{')
+                    && attr.nodeValue.endsWith('}}')) return node
             }
+        }
+
+        if (n.childNodes) {
+
+            bindNode(scope, n)
+        }
+
+        if (n.nodeType === 3 && n.nodeValue !== null) {
+
+            disposeNode(scope, n)
+        }
 
-            for (const n of node.querySelectorAll(':not(:defined)')) {
+        if (n.nodeType === 1) {
 
-                importComp(n)
+            const name = getCEName(n)
+
+            if (name) {
+
+                importCE(n, name)
             }
         }
     }
 
-}).observe(document, {
-    subtree: true,
-    childList: true,
-})
+    return node
+}
+/**
+ * 把节点字符串转化为节点对象
+ * @param html
+ * @returns {{create: function(*): *}}
+ */
+export const bind = html => {
+
+    const content = document.createElement('template')
+
+    content.innerHTML = html
+
+    return {create: scope => bindNode(scope, document.importNode(content.content, true))}
+}
+
+const style = document.createElement('style')
 
-const getScopeData = async node => {
+style.innerHTML = `
+*:not(:defined) {
+    display: none
+}
+`
+// 通过样式隐藏没有加载的自定义标签
+document.head.appendChild(style)
 
-    const f = []
+// DOM 加载完成后集中处理没有加载的自定义元素
+addEventListener('DOMContentLoaded', () => document.querySelectorAll('*:not(:defined)').forEach(node => importCE(node)))
 
-    const attrs = Object.values(node.attributes).filter(attr => attr.name.startsWith(':'))
+class EventBus {
 
-    while (node.parentElement) {
+    value = undefined
+    /**
+     * @type {Map<Function, {once: Boolean, preValue: Boolean}>}
+     */
+    targets = new Map()
 
-        node = node.parentElement
+    add(callback, options = Object.create(null)) {
 
-        if (typeof node.data === "function") {
+        this.targets.set(callback, options)
 
-            const dataFn = node.data
+        if (options.preValue && this.value !== undefined) {
 
-            f.unshift(data => dataFn(data))
+            callback(...this.value)
         }
     }
 
-    return Promise.resolve(f.reduce((d, f) => f(d), {})).then(data => {
+    remove(callback) {
 
-        data = {...data}
+        this.targets.delete(callback)
+    }
 
-        return Promise.all(
-            attrs.map(({name, value}) => Promise.resolve(new Function(
-                'data', `with (data) {${value.match(/^return[ `~!@#$(-+<"{\/;'\[]/) ? value : `return ${value}`}}`
-            )(data)).then(value => ({name, value})))
-        )
-            .then(attrs => {
-                for (const {name, value} of attrs) {
-                    data[name.substring(1)] = value
-                }
-                return data
-            })
-    })
+    dispatch(...args) {
+
+        this.value = args
+
+        return Promise.allSettled(this.targets.entries().map(([callback, {once}]) => {
+
+            if (once) {
+
+                this.targets.delete(callback)
+            }
+
+            return callback(...args)
+        }))
+    }
 }
+
+const eventBusObj = Object.create(null)
+// eventBus 实现订阅和分发，订阅是能选择是否获取上一个分发内容，在事件产生后订阅的也能拿到分发的内容
+const eventBus = Object.defineProperties(Object.create(null), {
+    add: {
+        value: (name, callback, options) => {
+
+            if (!Reflect.has(eventBusObj, name)) {
+
+                eventBusObj[name] = new EventBus()
+            }
+
+            eventBusObj[name].add(callback, options)
+        }
+    },
+    remove: {
+        value: (name, callback) => {
+
+            if (!Reflect.has(eventBusObj, name)) return
+
+            eventBusObj[name].remove(callback)
+        }
+    },
+    dispatch: {
+        value: (name, ...args) => {
+
+            if (!Reflect.has(eventBusObj, name)) {
+
+                eventBusObj[name] = new EventBus()
+            }
+
+            return eventBusObj[name].dispatch(...args)
+        }
+    }
+})
+
+/**
+ * @returns {{
+ *     add: (name: String, callback: Function, options: Object) => void,
+ *     remove: (name: String, callback: Function) => void,
+ *     dispatch: (name: String, ...args) => void
+ * }}
+ */
+export const useEvent = () => eventBus
+/**
+ * 通过 ref 或者子节点
+ * @param {Node} node
+ * @returns {any}
+ */
+export const useRef = node => {
+
+    const result = Object.create(null)
+
+    for (const n of node.querySelectorAll('[ref]')) {
+
+        result[n.attributes.ref.nodeValue] = n
+    }
+
+    return result
+}
+/**
+ * 把属性转化为简单的键值对对象
+ * @param node
+ * @returns {any}
+ */
+export const useAttr = node => {
+
+    const result = Object.create(null)
+
+    for (const n of node.attributes) {
+
+        result[n.nodeName] = n.nodeValue
+    }
+
+    return result
+}
+/**
+ * @param {Object} target
+ * @returns {(function(*, boolean=): void)|*}
+ */
+export const useWatch = target => (props, call = false) => {
+
+    for (const [key, f] of Object.entries(props)) {
+
+        if (typeof f !== 'function') continue
+
+        let value = target[key]
+
+        Object.defineProperty(target, key, {
+
+            get: () => value,
+            set: val => {
+
+                const result = f(val, value)
+
+                if (result !== false) return value = val
+            }
+        })
+
+        call && f(value, value)
+    }
+}