如何解决复制JS代码后出现的“Cannot redeclare block-scoped variable”错误？

我要给网站做动态背景效果，第二页想设置不同背景色，就复制了第一页能正常运行的JS代码，只改了querySelectors，结果VSCode里出现“Cannot redeclare block-scoped variable”的红色波浪线错误，不知道怎么改const [red, green, blue]这部分让代码正常工作。

第一页原可运行代码 #

JavaScript

const [red, green, blue] = [255, 255, 255];
const background1 = document.querySelector('.background1');
window.addEventListener('scroll', () => {
  const y = 1 + (window.scrollY || window.pageYOffset) / 250
  const [r, g, b] = [red / y, green / y, blue / y].map(Math.round)
  background1.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
});

CSS

.background1 {
  background-color: rgb(255, 255, 255);
  height: 7000px;
}

HTML

<p>scroll</p>
<div class="background1"></div>

错误原因 #

这个错误是因为const声明的变量属于块级作用域，如果两个页面的JS代码都在全局作用域下运行（比如直接写在<script>标签里没做隔离），第一页已经声明了red、green、blue这些变量，第二页再用const声明同名变量就会触发重复声明冲突。

解决方法 #

方法1：用函数包裹代码，隔离作用域 #

把每一页的动态背景代码放进独立函数，变量只会在函数内部生效，不会污染全局作用域，也不会和其他页面变量冲突。

第二页修改后示例：

function initBackground2() {
  // 第二页自定义初始背景色
  const [red, green, blue] = [0, 150, 255];
  const background2 = document.querySelector('.background2');
  window.addEventListener('scroll', () => {
    const y = 1 + (window.scrollY || window.pageYOffset) / 250
    const [r, g, b] = [red / y, green / y, blue / y].map(Math.round)
    background2.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
  });
}
// 调用函数生效
initBackground2();

方法2：修改变量名，避免重复 #

直接给第二页的变量换个名字，比如加上页面标识或前缀，避免和第一页变量重名。

示例：

// 第二页使用差异化变量名
const [bg2Red, bg2Green, bg2Blue] = [0, 150, 255];
const background2 = document.querySelector('.background2');
window.addEventListener('scroll', () => {
  const y = 1 + (window.scrollY || window.pageYOffset) / 250
  const [r, g, b] = [bg2Red / y, bg2Green / y, bg2Blue / y].map(Math.round)
  background2.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
});

方法3：用IIFE（立即执行函数）包裹 #

用立即执行函数创建独立作用域，变量仅在函数内部有效，不会和全局或其他页面变量冲突：

(function() {
  const [red, green, blue] = [0, 150, 255];
  const background2 = document.querySelector('.background2');
  window.addEventListener('scroll', () => {
    const y = 1 + (window.scrollY || window.pageYOffset) / 250
    const [r, g, b] = [red / y, green / y, blue / y].map(Math.round)
    background2.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
  });
})();

方法4：使用ES模块（推荐） #

如果项目支持ES模块，把每个页面的JS文件作为模块引入（在<script>标签加type="module"），模块自带独立作用域，变量不会泄漏到全局，自然不会有重复声明问题：

第二页JS文件（如background2.js）：

const [red, green, blue] = [0, 150, 255];
const background2 = document.querySelector('.background2');
window.addEventListener('scroll', () => {
  const y = 1 + (window.scrollY || window.pageYOffset) / 250
  const [r, g, b] = [red / y, green / y, blue / y].map(Math.round)
  background2.style.backgroundColor = `rgb(${r}, ${g}, ${b})`
});

第二页HTML引入：

<script type="module" src="background2.js"></script>

内容的提问来源于stack exchange，提问作者weti