javascript - 一个函数使用两个参数 : a variable and a string with the same name. 将它们减少为一个参数？

Question

我创建了一个函数，可以使用一组关键参数(例如:animation-name 和 animation-duration 等)轻松地向任何元素添加动画。这是下面的函数:

addAnimation( h1, 'blur', '50s', '0s', 'ease' );

我的问题与前者中使用的较小函数有关。它更新动画属性并采用 3 个参数其中两个具有完全相同的名称，只有 1 个是变量，1 个是字符串:

  updateAnimationProperties( element, 'name', name ); 
  updateAnimationProperties( element, 'duration', duration );
  updateAnimationProperties( element, 'delay', delay ); 
  updateAnimationProperties( element, 'timing', timing );
  updateAnimationProperties( element, 'fill', fill );

看到冗余了吗？ 'name', name, 'duration', duration 等。我知道这不是大多数开发人员会担心的主要问题，但我很想知道JavaScript 可以做什么的来龙去脉。有没有办法通过将 2 个重复的参数减少为一个来减少我的 updateAnimationProperties 函数总共只使用 2 个参数？

完整代码如下

//\ \ \ \ \ \ \ UPDATE ANIMATION PROPERTIES / / / / / / / / / / / / / / / / / /
function updateAnimationProperties( element, property, value ){
  var style = element.style,
      property = 'animation' + property.charAt( 0 ).toUpperCase() + 
                  property.slice( 1 );
  
  if( style[ property ] === '' ){
    style[ property ] = value;
  }
  else {
    style[ property ] += ', ' + value;
  }  
}
/// / / / / / / UPDATE ANIMATION PROPERTIES \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

//\ \ \ \ \ \ \ \ \ \ ADD ANIMATION / / / / / / / / / / / / / / / / / / / / / /
function addAnimation( 
  element, name, duration, delay, timing, fill 
){    
  element.classList.add( 'animation' );
  
  updateAnimationProperties( element, 'name', name ); 
  updateAnimationProperties( element, 'duration', duration );  //default = 1s
  updateAnimationProperties( element, 'delay', delay );  //default = 0s
  updateAnimationProperties( element, 'timing', timing );  //default = ease
  updateAnimationProperties( element, 'fill', fill );  //default = forwards);
}
/// / / / / / / / / / ADD ANIMATION \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

var h1 = document.querySelector( 'h1' );

addAnimation( h1, 'blur', '50s', '0s', 'ease' );
addAnimation( h1, 'fade', '2s', '1s', 'ease' );
addAnimation( h1, 'shrink', '20s', '0s', 'ease' );

/* \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION DEFINITIONS / / / / / / / / / / / / / */
.animation {
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
.blur {
  animation-name: blur;
}
.fade {
  animation-name: fade;
}
.shrink {
  animation-name: shrink;
}

/*\ \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION KEYFRAMES / / / / / / / / / / / / / /*/
@keyframes blur {
  100% {
    filter: blur( 5rem );
  }
}
@keyframes fade {
  100% {
    opacity: 0;
  }
}
@keyframes shrink {
  100% {
    transform: scale( 0 );
  }
}

<h1 style="display: inline-block; font-family: sans-seirf; font-weight: normal">
  Blur me, fade me, and shrink me
</h1>

---

回顾

在这样的函数中:

someFunction( 'value', value ) 我怎样才能把它变成

someFunction( value ) 或 someFunction( 'value' )。

特别是关于我上面的代码？

Answer 1

使用 ES6 Object Literal Property Value Shorthand你可以让函数接受一个对象，然后调用看起来像 updateAnimationProperties(element, {name}); 然后在函数中你可以获得对象键和值

function updateAnimationProperties(element, obj) {
  let key = Object.keys(obj)[0];
  let value = obj[key];
  // whatever else the function does with the values
  //...
}