Question

我遇到了一些我感兴趣的代码，我不确定为什么使用编码模式。也许有人可以启发我？

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

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 test，第一个例子慢得多，为什么要用呢？我还缺少其他方面吗？

Answer 1

这完全取决于用例。

如果在某些其他地方也使用了部分数组值，那么数组将非常有用，

在下面的例子中（你的修改例子）我使用了concat和amp;阵列。我想这会澄清你:)）

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);

Answer 2

没有真正的区别。如果您使用+运算符，编写该代码的人可能不知道您可以在多行上拆分字符串吗？

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

innerHTML很糟糕，因为开发交互式应用程序很困难。输出后很难修改（部分）HTML。您需要在任何地方插入ID，一个用于稍后要引用的每个元素。如果你正在做循环或生成非常动态的数据，你需要一些聪明的方法来生成id。如果您想添加活动innerHTML对您没有帮助。这是一场真正的噩梦。

如果您只是对元素进行了所有引用，那会不会那么容易？您可以创建一个允许您内联添加事件的DSL。随时获取参考资料。使用（变量）范围来处理嵌套结构。等

DFN库的一些示例：

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

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

Answer 3

可以找到答案here旧浏览器（IE7-）在加入而不是连接时工作得更快

使用join（）或concat创建字符串？

3 个答案: