Function handleAttribute

tech-study.js:1477–1597

* @description 处理属性 * @param ele * @param key * @param value

(ele, key, value, subscribe, unsubscribe)

 * @param value
 */
function handleAttribute(ele, key, value, subscribe, unsubscribe) {
    // 处理完的key
    const formatKey = key.toLowerCase();
    // 事件绑定
    if (formatKey.startsWith('on')) {
        // 事件监听
        const [event] = formatKey.match(/(?<=on).*/);
        // 事件类型
        if (event) {
            const [eventType, ...option] = event.split('_');
            const options = handleEventOptions(option);
            // Ref 函数
            if (isRef(value)) {
                const refVal = value;
                const refListener = watchRef(refVal, () => refVal.value
                    ? (e) => {
                        option.includes('prevent') && e.preventDefault();
                        option.includes('stop') && e.stopPropagation();
                        const callback = refVal.value;
                        callback(e);
                    }
                    : undefined);
                // 设置事件监听
                refListener.value &&
                    ele.addEventListener(eventType, refListener.value, options);
                // 监听事件变化
                watch(refListener, (newVal, oldVal) => {
                    // 移除旧事件监听
                    oldVal && ele.removeEventListener(eventType, oldVal);
                    // 设置新事件监听
                    newVal && ele.addEventListener(eventType, newVal, options);
                });
                return;
            }
            // 普通函数
            if (value instanceof Function) {
                // 设置事件监听
                ele.addEventListener(eventType, value, options);
            }
        }
        return;
    }
    // 特殊属性
    const specificAttrs = ['checked', 'selected', 'disabled', 'enabled'];
    // 特殊 key
    if (specificAttrs.includes(formatKey)) {
        // Ref
        if (isRef(value)) {
            const refVal = value;
            watchEffect(() => {
                if (refVal.value) {
                    ele.setAttribute(formatKey, '');
                }
                else {
                    ele.removeAttribute(formatKey);
                }
            });
            return;