javascript - 有没有办法重写这个基本函数，这样我就不会重复相同的行两次？

Question

const body = document.querySelector( `body` );

function getRandomNumber( max ) {
  return Math.floor( Math.random() * max )
}
function getRandomRGB() {
  const colors = [];
  
  for( let i = 0; i < 3; i++ ) {
    const  n = getRandomNumber( 100 + 1 );
    
    colors.push( n );
  }
  return `rgb(${ colors.join( '%,' )}%)`; 
}
function changeRGB() {
  const divs = body.querySelectorAll( `div` );
  
  for( let i = 0; i < divs.length; i++ ) {
    divs[ i ].style.backgroundColor = getRandomRGB();
    divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
  }
}

for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );
  
  div.style.backgroundColor = getRandomRGB();
  div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
  body.appendChild( div ); 
}

setInterval( changeRGB, 1000 );

* {
  box-sizing: border-box; margin: 0; padding: 0;
}
html, body {
  height: 100%;
}
body {
  display: flex; flex-wrap: wrap;
  filter: saturate( 200% );
}
section {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  backdrop-filter: blur( 5rem );
  -webkit-backdrop-filter: blur( 5rem );
}
div {
  flex-grow: 1;
  min-width: 25%; min-height: 10%; background-color: #222;
  transition-property: background-color;
  transition-duration: 2s;
}

<section></section>

函数changeRGB():

function changeRGB() {
  const divs = body.querySelectorAll( `div` );
  
  for( let i = 0; i < divs.length; i++ ) {
    divs[ i ].style.backgroundColor = getRandomRGB();
    divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
  }
}

以及其后的for循环:

for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );
  
  div.style.backgroundColor = getRandomRGB();
  div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
  body.appendChild( div ); 
}

包含几乎相同的代码行:

divs[ i ].style.backgroundColor = getRandomRGB();
divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;

和

div.style.backgroundColor = getRandomRGB();
div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;

分别。

在 changeRGB() 中，我们操作已经存在的 div，在 for 循环中，我们首先创建这些 div 然后以相同的方式操作它们。我的目标是重构此代码以减少重复性。

我需要用动态的东西替换 div 和 divs[ i ] ，这样我就可以只调用一个函数并在此处输入正确的值。我不确定循环是否使事情变得更加复杂，但我尝试过 window[variable].style.backgroundColor 等，其中 variable 是动态变量，但没有运气。可能实现错误。

如何使 changeRGB() 函数和 for 循环更少重复且更简洁？

Answer 1

你可以编写另一个像这样的函数:

function applyChange(element) {
    element.style.backgroundColor = getRandomRGB();
    element.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
}

你只需这样调用它:

function changeRGB() {
  const divs = body.querySelectorAll( `div` );
  
  for( let i = 0; i < divs.length; i++ ) {
    applyChanges(divs[i]); // <- Call it here
  }
}

for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );
  
  applyChanges(div); // <- Call it here
  body.appendChild( div ); 
}

这样，您只需传递 div 元素作为提示即可动态使用它。