【JavaScript】解决let变量重复定义报错问题

1. 问题描述

有两个js文件定义了一个相同的变量，如果在同一个页面引入就会报错。

比如a.js定义了一个observer。

//隐藏动态加载的内容
function hideDom(){
    //doSomething
}
let observer = new MutationObserver(hideDom);
observer.observe(document, { childList: true, subtree: true });

然后b.js也定义了一个observer。

//隐藏动态加载的内容
function hideDom(){
    //doSomething
}
let observer = new MutationObserver(hideDom);
observer.observe(document, { childList: true, subtree: true });

这样，页面同时引入a.js和b.js，必然会报observer重复定义。

因为let不允许定义重复定义。

而let只会在一个作用域内起作用，也就是一个{}内部。

那么解决办法，也就只要限定作用域就好了。

2. 解决办法

使用(function(){})();可以解决上面的问题。

(function(){
    //隐藏动态加载的内容
    function hideDom(){
        //doSomething
    }
    let observer = new MutationObserver(hideDom);
    observer.observe(document, { childList: true, subtree: true });
})();