继LayUI flow变更“加载更多”文字为自定义出现异常 Failed to execute 'appendChild' on 'Node': Identifier 'observer' has already been declared

异常

 背景

在增加了对LayUI的flow对“加载更多”文字处理后，页面原本的“window.location.href”重新加载页面出现了此异常

LayUI的flow对“加载更多”文字处理

关键代码

//创建观察者实例
let observer = new MutationObserver(flowCallback);

/**
 * flow 加载更多-多语言处理
 */
function flowCallback(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(i => {
                if (i.nodeName == 'CITE') {
                    i.lastChild.data = moreText
                    i.firstChild.data = moreText
                }
            })
        }
    }
}

 

原因

let observer = ... 是块级作用域变量，不能重复声明。

当页面通过 window.location.href 跳转后，如果新页面加载的是同一段脚本，浏览器会重新执行它，导致重复声明 observer，于是抛出错误。

 

解决

用 var 而不是 let，因为 var 是函数作用域，重复声明不会报错（只是覆盖）

 

更改后的代码：

//创建观察者实例
var observer = new MutationObserver(flowCallback);

/**
 * flow 加载更多-多语言处理
 */
function flowCallback(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(i => {
                if (i.nodeName == 'CITE') {
                    i.lastChild.data = moreText
                    i.firstChild.data = moreText
                }
            })
        }
    }
}