JavsScript 中的 HTML 模板

Question

在 HTML 中，每个元素都可以有一个具有以下值的 x-make 属性：

copy:n - 复制当前元素 n 次并在当前元素之后放置新元素；

remove:n - 从下一个开始删除 n 个元素。如果当前一个之后没有n个元素（number_of_elements_after_current < n), then all elements that come after the current one are deleted;

removeChildren:n - 删除一个元素的 n 个子元素，从第一个开始；

switch:n - 将当前元素与当前元素前 n 步的元素交换（您应该注意示例 2 和 3）。

条件：

操作必须按照以下顺序进行：首先是所有复制操作，然后是remove，然后是removeChildren，最后是switch。首先，执行顶层的所有操作，然后在第二层执行，依此类推。从该属性执行操作后，必须删除 x-make 属性。

例一：

解决方案（document.querySelector（'条目'））

之前：

<entry>
  <div>
    <div x-make="remove:1">Block 1</div>
    <div x-make="copy:3">Block 2</div>
  </div>
</entry>

之后：

<entry>
  <div>
    <div>Block 1</div>
    <div>Block 2</div>
    <div>Block 2</div>
    <div>Block 2</div>
  </div>
</entry>

说明：

“Block 2”被复制了 3 次 - 现在“Block 2”有四个元素。

接下来，删除“Block 1”之后的元素。

例二：

解决方案（document.querySelector（'条目'））

之前：

<entry>
  <div x-make="removeChildren:2">
    <div x-make="copy:100">Block 1</div>
    <div>Block 2</div>
    <div x-make="switch :7">Block 3</div>
    <div>Block 4</div>
    <div>Block 5</div>
  </div>
</entry>

之后：

<entry>
  <div>
    <div>Block 4</div>
    <div>Block 3</div>
    <div>Block 5</div>
  </div>
</entry>

说明：

块“Block 1”的数量没有增加，因为它被父级用removeChildren删除了。

“Block 3”由“Block 4”变为第七个元素，从“Block 3”算起，为“Block 4”。

例三：

解决方案（document.querySelector（'条目'））

之前：

<entry>
  <section>
    <div x-make="switch:2">
      <div x-make="remove:5">Block 1</div>
      <span>Block 2</span>
    </div>
    <div x-make="copy:1">
      <div x-make="remove:5">Block 3</div>
      <div x-make="switch:1">Block 4</div>
    </div>
    Block 5
  </section>
</entry>

之后：

<entry>
  <section>
    <div><div>Block 3</div></div>
    <div><div>Block 3</div></div>
    <div><div>Block 1</div></div>
    Block 5
  </section>
</entry>

说明：

由于操作的优先级，第二个元素首先被复制 - section 现在有四个元素。切换操作导致第一个块内部部分与第三个块交换 Remove:5 in "Block 1" removed "Block 2" Remove:5 removed "Block 4" in "Block 3" (in two elements inside section since they被复制）

例四：

解决方案（document.querySelector（'条目'））

之前：

<entry>
  <div x-make="switch:2">1</div>
  <div x-make="switch:3">2</div>
  <div x-make="switch:5">3</div>
</entry>

之后：

<entry>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</entry>

说明：

“Block 1”与“Block 3”互换。在容器中，第一个带有 x-make 的元素将是“Block 3”——它将与“Block 1”交换位置。剩下的“Block 2”和自己交换位置，也就是原地不动

注意事项

解决方案应该是一个名为 solution 的函数，它将 DOM 元素作为输入 - 一个入口点。

源代码应该是这样的：

function solution(entryPoint) { // 解决方案 }