动态函数调用jquery

Question

我有以下代码:

function loadTemplate(templateName, templates, target){
try {
$("<div/>").load(path, function () {
$(this).appendTo("body").unwrap();
templates.map(template => {
if (template.hasOwnProperty("data")) {
$(target).after($.templates(template.name).render(template.data, utils)).hide().fadeIn(200)
} else {
$(target).after($.templates(template.name).render()).hide().fadeIn(200)
}
})
});
} catch (error) {
console.error(error);
}

}
}

它使用jsrender在已提供的目标元素之后附加一个模板列表。现在我的问题是，我如何修改这段代码，以便我可以动态地使用另一个函数，如append()或prepend()，而无需创建专门用于处理此类场景的单独函数?例如，与其使用单独的函数来附加到目标元素或像这样的前缀:

$(target).append($.templates(template.name).render(template.data, utils)).hide().fadeIn(200)
$(target).prepend($.templates(template.name).render(template.data, utils)).hide().fadeIn(200)

是否有可能只用一个函数来处理它们，通过某种方式将操作作为参数传递给函数?

Answer 1

我们可以使用括号符号代替点符号来访问jQuery方法

const $tgt = $("#target")
$(".btn").on("click", function() {
$tgt[this.dataset.action](`<span>Success</span>`)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-action="before">
Before
</button>
<button class="btn" data-action="after">
After
</button>
<button class="btn" data-action="prepend">
Prepend
</button>
<button class="btn" data-action="append">
Append
</button>
<div id="container">
<span id="target"><hr/></span>
</div>