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个重复的参数减少为1来将updateAnimationProperties函数减少为仅使用2个参数？

以下完整代码

＆＃13;

//\ \ \ \ \ \ \ 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' );

＆＃13;

/* \ \ \ \ \ \ \ \ \ \ \ \ \ 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 );
  }
}

＆＃13;

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

＆＃13;

RECAP

在这样的功能中：

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
  //...
}

函数使用两个参数：变量和具有相同名称的字符串。将它们减少到一个参数？

1 个答案: