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

您可以编写辅助函数将Object转换为字符串，如：

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\"")
  }

因此，当用户复制代码时，上面的内容必须正常工作

如何指定for循环的值

2 个答案: