Question

我无需查看DOM即可创建DOM元素（HTML）数组，如下所示：

const frames = [
    ...document.createRange()
        .createContextualFragment(
            new String(
                new Array(options.length)
                    .fill()
                    .map((v, i) => `<div class="page"><iframe src="./renders/page-${i + 1}"></iframe></div>`)
                )
            )
        .querySelectorAll('div')
].map((page, index) => _addPageWrappersAndBaseClasses(page, index))

是否有更明智的方法？

Answer 1

当然，只是不要将所有内容都放在一行上。而是明智地使用变量和换行符。

const divStrings = new Array(options.length)
  .fill()
  .map((v, i) =>
    `<div class="page"><iframe src="./renders/page-${i + 1}"></iframe></div>`
  )

const frag = document.createRange().createContextualFragment(new String(foo))

const divs = [...frag.querySelectorAll('div')]

const frames = divs.map(_addPageWrappersAndBaseClasses)

除了格式和变量之外，对上面的代码所做的更改仅是结束了对.map的匿名回调。我将其更改为传递直接调用的函数。

您可以摆脱一个或两个变量，因此不需要花太多的钱，但是将所有内容打包到单个表达式中并没有任何好处。

Answer 2

是的，使用常规DOM方法既高效又简洁。

for(let i = 0; i < options.length; i++) {
    const page = document.createElement("div");
    page.className = "page";
    const frame = document.createElement("iframe");
    frame.src = `./renders/page-${i + 1}`;
    page.appendChild(frame);
    _addPageWrappersAndBaseClasses(page, i);
}

您还应该尝试避免使用JavaScript中的字符串来解析HTML。

有没有用JavaScript编写的复杂方法？

2 个答案: