如何改造src_observer方法支持传入自定义函数与元素实现逻辑复用

DevOps 小满

2026-9-25

实现方案

该需求完全可以实现，核心思路是把固定的src变化触发逻辑抽离为可传入的自定义回调函数，同时支持传入自定义上下文参数供回调内部使用。

改造后的src_observer方法

function src_observer(target_node, options = {}) {
    // 解构参数，保留原有默认逻辑作为降级，旧代码无需修改即可正常运行
    const { 
        callback = () => {
            target_node.show();
            target_node.next().remove();
        }, 
        ...customParams 
    } = options;

    let observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'src') {
                // 执行回调，将mutation、监听目标节点、自定义参数全部透出
                callback(mutation, target_node, customParams);
            }
        });
        observer.disconnect();
    });

    // 兼容JQuery对象和原生DOM节点两种传入格式
    observer.observe(target_node[0] ?? target_node, {
        attributes: true,
        attributeFilter: ['src']
    });
}

调用示例

原有业务场景（无兼容成本）

原有调用方式无需修改即可沿用旧逻辑：

src_observer(your_target_node);

新自定义业务场景

const target_node = videoWrapper.html(videoElement).children('iframe');
// 传入自定义逻辑和需要的额外元素
src_observer(target_node, {
    videoWrapper,
    element,
    cover,
    callback: (mutation, target_node, params) => {
        const { videoWrapper, element, cover } = params;
        videoWrapper.parents().eq(1).children('.onetrust_container').remove();
        videoWrapper.parent().show();
        videoWrapper.show();
        element.fadeOut(500);
        cover.fadeOut(500);
    }
});