2

我遇到了一些我觉得很有趣的代码，但我不确定为什么要使用这种编码模式。也许有人可以启发我？

在下面的示例中，一个Array和join()用于创建一个 html 字符串，然后将其插入到 DIV 元素中innerHTML。

var div = document.createElement('div');
div.innerHTML = [
   '<div id="view">',
     '<button class="cancel">cancel</button>',
     '<ul id="presets"></ul>',
   '</div>'
 ].join('');
document.body.appendChild(div);

为什么要这样做？为什么不制作String如下图所示。

var div = document.createElement('div');
div.innerHTML =
   '<div id="view">' +
     '<button class="cancel">cancel</button>' +
     '<ul id="presets"></ul>' +
   '</div>';
document.body.appendChild(div);

我跑了一个jsperf.com 测试，第一个例子要慢得多，那为什么要使用它呢？我还缺少其他方面吗？

4

3 回答 3

3

没有真正的区别。也许编写该代码的人不知道如果您使用运算符可以将字符串拆分为多行+？

他们同样好，也就是说，同样糟糕。

innerHTML不好，因为很难开发交互式应用程序。一旦输出 HTML，就很难修改（部分）HTML。您需要在任何地方插入 id，一个用于稍后要引用的每个元素。如果您正在执行循环或生成非常动态的数据，您将需要一些巧妙的方法来生成 id。如果你想添加事件innerHTML不会帮助你。这是一场真正的噩梦。

如果您只拥有对元素的所有引用，会不会容易得多？您可以制作一个允许您内联添加事件的 DSL。随时随地获取参考。使用（变量）作用域来处理嵌套结构。等等

DFN 库的一些示例：

（谷歌“DSL HTML 生成器”，你会发现更多）

相关：（和有趣的阅读）http://blog.korynunn.com/javascript/the-dom-isnt-slow-you-are/

于 2013-09-11T13:53:41.447 回答
3

这完全取决于用例。

如果在其他一些地方也使用了部分数组值，则数组将很有用，

在下面的示例（您的修改示例）中，我同时使用了 concat 和数组。我想这会澄清你:)

var div = document.createElement('div');
var div2 = document.createElement('div2');
var arrayData = [
       '<div id="view">' +
         '<button class="cancel">cancel</button>' +
         '<ul id="presets"></ul>'+
       '</div>',

       '<div id="view2">' +
         '<button class="submit">submit</button>' +
         '<ul id="presets"></ul>'+
       '</div>'
     ];

div.innerHTML = arrayData.join('');
// Only 1st index of arrayData string is needed here.
div2.innerHTML = arrayData[1];

document.body.appendChild(div);
document.body.appendChild(div2);
于 2013-09-11T14:07:40.140 回答
2

答案可以在这里找到旧浏览器（IE7-）使用连接而不是连接更快

于 2013-09-11T14:01:32.020 回答