Question

下面的add8函数里面有很多for个循环。我为了这个问题的目的截断了它，但是我的源代码中的原始函数中有更多的循环。看看：

function select( selector ){
  return document.querySelectorAll( selector );
}

function add8(){
  var x = select( '[ x ]' ), y = select( '[ y ]' ),
    x1 = select( '[ x1 ]' ), y1 = select( '[ y1 ]' ),
    x2 = select( '[ x2 ]' ), y2 = select( '[ y2 ]' ),
    cx = select( '[ cx ]' ), cy = select( '[ cy ]' ),
    i = 0,
    val = 0;

  for( i = 0; i < x.length; i++ ){
    val = x[ i ].getAttribute( 'x' );
    val = Number( val ) + 8;
    x[ i ].setAttribute( 'x', val );
  }  
  for( i = 0; i < y.length; i++ ){
    val = y[ i ].getAttribute( 'y' );
    val = Number( val ) + 8;
    y[ i ].setAttribute( 'y', val );
  }    
  for( i = 0; i < x1.length; i++ ){
    val = x1[ i ].getAttribute( 'x1' );
    val = Number( val ) + 8;
    x1[ i ].setAttribute( 'x1', val );
  }    
  for( i = 0; i < y1.length; i++ ){
    val = y1[ i ].getAttribute( 'y1' );
    val = Number( val ) + 8;
    y1[ i ].setAttribute( 'y1', val );
  }
  // Alot more 'for' loops follow...
}

add8();

您可能会注意到这些for循环中只需要更改一些值，因此我迫切希望能够重用大量代码，同时使整个代码更简洁，更简洁。

类似

function dynamicFunc( dynamicVar, dynamicStr ) {
  for( i = 0; i < dynamicVar.length; i++ ){
    val = dynamicVar[ i ].getAttribute( dynamicStr );
    val = Number( val ) + 8;
    dynamicVar[ i ].setAttribute( dynamicStr, val );
  } 
}

function add8(){
  var x = select( '[ x ]' ), y = select( '[ y ]' ),
    x1 = select( '[ x1 ]' ), y1 = select( '[ y1 ]' ),
    x2 = select( '[ x2 ]' ), y2 = select( '[ y2 ]' ),
    cx = select( '[ cx ]' ), cy = select( '[ cy ]' ),
    i = 0,
    val = 0;

  dynamicFunc( x, 'x' );
  dynamicFunc( y, 'y' );
  dynamicFunc( x1, 'x1' );
  dynamicFunc( y1, 'y1' );

  // Alot more follow...
}

add8();

自动执行这些for循环，但下面的示例似乎不起作用。我还不是很擅长JS，并认为我需要一点帮助。我怎样才能做到这一点？谢谢。

注意：我在源代码中处理了很多SVG，因此选择了属性x，y，x1等...我的JavaScript。

额外注意：我在这里使用香草JS。

Answer 1

使用一些ES6功能：

function add8(){
  var attributes = ['x', 'y', 'x1', 'y1']; // all the attributes you care about
  attributes.forEach(attribute => {
    [...select(`[${attribute}]`)].forEach(el => {
      el.setAttribute(attribute, Number(el.getAttribute(attribute)) + 8);
    });
  });
}

更详细：

function add8(){
  var attributes = ['x', 'y', 'x1', 'y1']; // all the attributes you care about
  var i, j;
  // loop over the attributes:
  for (i = 0; i < attributes.length; i++) {
    var attribute = attributes[i];
    var elements = select('[' + attribute + ']');
    // loop over the selected elements:
    for (j = 0; j < elements.length; j++) {
      var element = elements[i];
      var val = Number(el.getAttribute(attribute)) + 8;
      el.setAttribute(attribute, val);
    }
  }
}

将重复代码注入函数：JavaScript

1 个答案: