Question

我有一个简单的功能，可以为元素添加动画：addAnimation().我遇到的主要问题是它调用的函数：updateAnimationProperties()。此功能最多需要4个参数，其中至少有3个将使用相同的单词，例如：

updateAnimationProperties( name, element, 'animationName', nameStr );

字符串name使用了3次。这就是每次调用此函数时的方式。另一个例子：

updateAnimationProperties( duration, element, 'animationDuration', durationStr );

duration重复3次。所以我想创建一个带有基本单词的函数：name或duration并自动将其余部分与字符串连接起来。例如'animation' + baseVariable或baseVariable + 'Str'。

我尝试过使用这样的窗口方法：

function updateAnimationProperties( target, element, property ){
  if( target === '' ){
    element.style[ property ] = window[ target + 'Str' ];
  }
  else {
    element.style[ property ] += ', ' + window[ target + 'Str' ];
  }  
}

但它似乎没有帮助。任何想法如何通过使用动态变量来减少此功能所需的参数数量？

以下是包含4个参数的普通代码。我想将这些减少到可能只有2个参数。

//\ \ \ \ \ \ \ UPDATE ANIMATION PROPERTIES / / / / / / / / / / / / / / / / / /
function updateAnimationProperties( target, element, property, result ){
  if( target === '' ){
    element.style[ property ] = result;
  }
  else {
    element.style[ property ] += ', ' + result;
  }  
}
/// / / / / / / UPDATE ANIMATION PROPERTIES \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

//\ \ \ \ \ \ \ \ \ \ ADD ANIMATION / / / / / / / / / / / / / / / / / / / / / /
function addAnimation( element, nameStr, durationStr ){    
  element.classList.add( 'animation' );
    
  var name = element.style.animationName,
      duration = element.style.animationDuration;
    
  updateAnimationProperties( name, element, 'animationName', nameStr ); 
  updateAnimationProperties( duration, element, 'animationDuration', durationStr );
}
/// / / / / / / / / / ADD ANIMATION \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \

var p = document.querySelector( 'p' );

addAnimation( p, 'blur', '100s' );

/* \ \ \ \ \ \ \ \ \ \ \ \ \ 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;
}

/*\ \ \ \ \ \ \ \ \ \ \ \ \ \ ANIMATION KEYFRAMES / / / / / / / / / / / / / /*/
@keyframes blur {
  100% {
    filter: blur( 5rem );
  }
}

<p>Blur this paragraph</p>

Answer 1

问题不在于如何动态访问这些变量，问题在于您首先创建了这些变量。您应该删除target参数并在函数内计算它，从而大大简化了代码。

function updateAnimationProperty(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;
  }  
}

function addAnimation(element, name, duration){    
  element.classList.add('animation');
  updateAnimationProperty(element, 'name', name); 
  updateAnimationProperty(element, 'duration', duration);
}

您也可以使用结构，以便迭代键值对：

function addAnimation(element, name, duration){    
  element.classList.add('animation');
  var props = {name, duration}; // short for {"name": name, "duration": duration}
  for (var p in props)
    updateAnimationProperty(element, p, props[p]);
}

（这不是真的值得）

Answer 2

我找到了这个，希望它适合你。使用参数对象：

function foo() {
  for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]);
  }
}

Here the source

以下是Mozilla的文档： source

===============================================

或者您可以使用 apply 功能。 source 2

希望可以提供帮助。

如何创建由连接函数参数值和字符串组成的变量名？

2 个答案: