在JavaScript中格式化HTML，CSS和JavaScript代碼的最佳方法是什么？

Question

我需要能夠將代碼放在ace編輯器div部分中。 忽略代碼的最佳方法是什么，以便我可以輕松地以字符串格式輸入？

我嘗試了多種引號

      editorHTML.setValue('<html>
      <head>
        <meta charset=utf-8>
        <title>HTML5 canvas demo</title>

      </head>
      <body>
        <p>Canvas pane goes here:</p>
        <canvas id=pane width=300 height=200></canvas>
        <script>

        </script>
      </body>
    </html>');
     editorCSS.setValue('p {font-family: monospace;}
');
     editorJavaScript.setValue('var canvas = document.getElementById('pane');
          var context = canvas.getContext('2d');

          context.fillStyle = 'rgb(250,0,0)';
          context.fillRect(10, 10, 55, 50);

          context.fillStyle = 'rgba(0, 0, 250, 0.5)';
          context.fillRect(30, 30, 55, 50);
');

此代碼不起作用。 我假設有一個非常簡單的方法，但搜索后我找不到它。

Answer 1

你有兩個問題：

JavaScript不允許字符串文字中的原始換行符。
你的最后一個字符串被引述'但轉義'的內線吧。

您至少有三個選擇：

在現代JavaScript（ES2015 +）中，您可以使用模板文字。 模板文字中允許使用未轉義的換行符。 未標記的模板文字會創建一個字符串。
您可以使用反斜杠轉義換行符。
您可以使用字符串連接。

＃1的示例：

editorHTML.setValue(`<html>
  <head>
    <meta charset=utf-8>
    <title>HTML5 canvas demo</title>

  </head>
  <body>
    <p>Canvas pane goes here:</p>
    <canvas id=pane width=300 height=200></canvas>
    <script>

    </script>
  </body>
</html>`);
editorCSS.setValue(`p {font-family: monospace;} `);
editorJavaScript.setValue(`var canvas = document.getElementById("pane");
      var context = canvas.getContext("2d");

      context.fillStyle = "rgb(250,0,0)";
      context.fillRect(10, 10, 55, 50);

      context.fillStyle = "rgba(0, 0, 250, 0.5)";
      context.fillRect(30, 30, 55, 50);
`);

＃2的示例：

editorHTML.setValue('<html>\
  <head>\
    <meta charset=utf-8>\
    <title>HTML5 canvas demo</title>\
\
  </head>\
  <body>\
    <p>Canvas pane goes here:</p>\
    <canvas id=pane width=300 height=200></canvas>\
    <script>\
\
    </script>\
  </body>\
</html>');
editorCSS.setValue('p {font-family: monospace;} ');
editorJavaScript.setValue('var canvas = document.getElementById("pane");\
      var context = canvas.getContext("2d");\
\
      context.fillStyle = "rgb(250,0,0)";\
      context.fillRect(10, 10, 55, 50);\
\
      context.fillStyle = "rgba(0, 0, 250, 0.5)";\
      context.fillRect(30, 30, 55, 50);\
');

＃3的例子：

editorHTML.setValue('<html>' +
  '<head>' +
    '<meta charset=utf-8>' +
    '<title>HTML5 canvas demo</title>' +
    '' +
  '</head>' +
  '<body>' +
    '<p>Canvas pane goes here:</p>' +
    '<canvas id=pane width=300 height=200></canvas>' +
    '<script>' +
    '' +
    '</script>' +
  '</body>' +
'</html>');
editorCSS.setValue('p {font-family: monospace;} ');
editorJavaScript.setValue('var canvas = document.getElementById("pane");' +
      'var context = canvas.getContext("2d");' +
      '' +
      'context.fillStyle = "rgb(250,0,0)";' +
      'context.fillRect(10, 10, 55, 50);' +
      '' +
      'context.fillStyle = "rgba(0, 0, 250, 0.5)";' +
      'context.fillRect(30, 30, 55, 50);'
);

在JavaScript中格式化HTML，CSS和JavaScript代碼的最佳方法是什么？

問題描述

1 個解決方案

解決方案1
0 2019-06-11 16:35:10

在JavaScript中格式化HTML，CSS和JavaScript代碼的最佳方法是什么？

問題描述

1 個解決方案

解決方案1 0 2019-06-11 16:35:10

解決方案1
0 2019-06-11 16:35:10