如何分配for循环的值

Question

我正在尝试为对编程一无所知的用户创建一个界面。所以我希望他们添加一些东西，然后他们可以复制粘贴代码，这一切都必须工作。

所以我有一个如下所示的配置对象：

var initSocialShare = {
  config: {
    facebook: false,
    linkedin: false,
    twitter: false,
    pocket: false,
    copy: false
  } 
}

而且我想在这样的文本区域内呈现它：

document.querySelector('#shareButton-code').innerHTML += 
   `<script> 
       var initSocialShare = {
           config: {
             facebook: ${obj},
             linkedin: ${obj},
             twitter: ${obj},
             pocket: ${obj},
             copy: ${obj}
          }
      } 
      ${initButtons} 
      ${showOverlay} 
      ${copyText} 
      initButtons()
</script>`;

如何在脚本中渲染 for 循环的结果：

for (var key in initSocialShare.config) {
  // if (!initSocialShare.config.hasOwnProperty(key)) continue;

  var obj = initSocialShare.config[key];
  console.log(obj);
}

这是在我的 init 方法中，我将链接推送到数组：

 if(initSocialShare.config.facebook){
    s.push( '"#" id="fs_facebook-btn" data-count="fb" onclick="window.open(\'https://www.facebook.com/sharer/sharer.php?u=' + u + "', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false\" title=\"Share on Facebook\"")
  }

所以当用户复制代码时，上面的这段代码必须工作

Answer 1

您可以像这样使用tagged template 在模板中循环替换。

document.querySelector('#shareButton-code').innerHTML +=
  foo`<script>
    var initSocialShare = {
      config: {
         facebook: ${initSocialShare},
         linkedin: ${initSocialShare},
         twitter: ${initSocialShare},
         pocket: ${initSocialShare},
         copy: ${initSocialShare}
      }
    }
  </script>`;

function foo(literals, ...substitutions) {
  let result = '';
  let i = 0;

  for (const key in initSocialShare.config) {
    result += literals[i];
    result += initSocialShare.config[key];
    i++;
  }

  result += literals[literals.length - 1];
  return result;
}

已编辑：（现在包括所有替换）

var initSocialShare = {
  config: {
    facebook: false,
    linkedin: false,
    twitter: false,
    pocket: false,
    copy: false
  }
}

const initButtons = 'foo';
const showOverlay = 'bar';
const copyText = 'baz';

document.querySelector('#shareButton-code').innerHTML +=
  foo`<script>
    var initSocialShare = {
      config: {
         facebook: ${initSocialShare},
         linkedin: ${initSocialShare},
         twitter: ${initSocialShare},
         pocket: ${initSocialShare},
         copy: ${initSocialShare}
      }
    }
    ${initButtons}
    ${showOverlay}
    ${copyText}
    initButtons()
  </script>`;

function foo(literals, ...substitutions) {
  let result = '';
  let i = 0;

  for (const key in initSocialShare.config) {
    result += literals[i];
    result += initSocialShare.config[key];
    i++;
  }

  for (let j = i; j < substitutions.length; j++) {
    result += literals[j];
    result += substitutions[j];
  }

  result += literals[literals.length - 1];
  return result;
}

Answer 2

您可以编写一个辅助函数来将对象转换为字符串，例如：

function makeObjString(obj) {

    let str = [];
    str.push('{');

    for(let k in obj) {
        str.push(k);
        str.push(':');
        str.push(obj[k]);
        str.push(',');
    }

    str.pop();

    str.push('}');

    return str.join('');
}

然后像这样调用它：

document.querySelector('#shareButton-code').innerHTML += 
   `<script> 
       var initSocialShare = {
           config: ${makeObjString(initSocialShare.config)}
      } 
      ${initButtons} 
      ${showOverlay} 
      ${copyText} 
      initButtons()
</script>`;

这是在我将链接推送到数组的 init 方法中：

 if(initSocialShare.config.facebook){
    s.push( '"#" id="fs_facebook-btn" data-count="fb" onclick="window.open(\'https://www.facebook.com/sharer/sharer.php?u=' + u + "', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');return false\" title=\"Share on Facebook\"")
  }

所以当用户复制上面的代码时，这段代码必须工作