javascript - 在模板文本中插入 jQuery 元素的有效方法

Question

涉足 jQuery 时，我发现自己经常遇到一个尴尬的情况。假设我想构造一大块 HTML，并在中间某处放置一个 jQuery 包装的元素。我希望能够使用模板文字来执行 HTML，然后有效地将 jQuery 包装的元素放入其中，以避免编写大量 JavaScript 代码来单独构建树中的每个元素。

例如，假设我想在描述的位置插入一个按钮:

const $btn = $(`<button>Click Me</button>`).click(() => { /* complex handler... */ });
const $ele = $(`<div><h1>Some content</h1><p>Press this button: [button should go here]</p></div>`);

我可以费力地创建外部 div、p，将 p 附加到 div，并且将 button 附加到 p。这感觉像是很多笨重的样板。

我可以将按钮直接添加到模板文字中:

<div><h1>Some content</h1><p>Press this button: <button>Click Me</button></p></div>

然后 find() 它并以这种方式绑定(bind)处理程序 - 这看起来好一点，但我仍然必须给我的 button 一个独特的id 或 class 以便能够找到它，具体取决于上下文。它也不能很好地“链接”，例如上面的例子，将 find() 附加到我的 const $ele = .. 语句的末尾将导致$ele 存储 button，而不是 div。这往往是不可取的。

那么，有没有更好的解决方案呢？

Answer 1

让我们享受标记模板文字的乐趣:

const $btn = jQuery(`<button>Click Me</button>`).click(e => alert("complex handler…"));
const $ele = $`<div><h1>Some content</h1><p>Press this button: ${$btn}</p></div>`;
//           ^^                                                ^^^^^^^          ^
jQuery("body").append($ele);

function $(parts, ...args) {
  const uid = Math.round(Math.random()*0xFFFF).toString(16).padStart(4, "0");
  const res = jQuery(parts.reduce((html, p, i) => {
    return html + "<slot name=x-replace-"+uid+"></slot>" + p;
  }));
  res.find("slot[name=x-replace-"+uid+"]").replaceWith(i => args[i]);
  return res;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>