使用HTML元素作为“模板”是否更好?或者在javascript中动态生成HTML

Is it better to use an HTML element as a "template" or to generate the HTML dynamically in the javascript?

本文关键字：HTML javascript 或者动态是否元素模板使用更好更新时间：2023-09-26

我目前正在创建一个"facebook式"新闻提要，我想知道我是否最好有1.)一个元素在我的HTML，我克隆在我的javascript和追加数据，我从我的ajax调用到正确的地方，或2.)如果它会更好地生成整个元素内的javascript。

在最佳实践方面，什么是更普遍接受的，并允许我最好的可扩展性?

这可能是一个基于情况的答案，还是有一个明确的答案，在这种情况下，我应该坚持在我的网站?

我看到选项2的一个缺点是，在javascript中编写HTML通常不是一个好主意。

选项1的一个缺点可能是，如果我试图开始操纵状态的整体结构，使其在不同的页面上不同，这将很难跟踪，我可能会把事情搞砸。

我认为答案因情况而异。它根据模板的大小和复杂程度等而变化。我倾向于使用来自我的HTML页面的HTML模板(这样我就可以使用我的创作工具等)并克隆它们。我小心地避免将JavaScript代码与HTML的特定结构绑定在一起(相反，我更喜欢类名、name属性和/或data-xyz属性作为事物走向的标记)。这样就可以更改HTML(并在不同的页面上使用不同的HTML，使用相同的数据)，而不必担心会破坏JavaScript代码。只要确保标记在那里(或者没有，如果你想在特定的页面上留下一些信息。)

我将在你的两个选项中添加第三个选项:

3)让ajax返回一个HTML片段，您只需将其附加到页面上。

如果您已经在服务器端使用了一些模板技术来生成提要的初始部分，那么最后一个是最有用的，因为这样您可以将代码放在一个地方而不是两个地方。

基本上，你需要从JavaScript生成HTML的情况下，你必须创建不同的接口取决于配置，例如，你需要构建自定义动态表单作为一个组合模型的输入投影。

在像你这样简单的情况下，HTML很酷。但你可以看看jQuery模板插件或类似的东西为你的模板(如果你正在使用一个)。

当我必须创建一个模板时，我通常做的是，我用一些json_encode模拟将它回传给JavaScript，并在那里放置一些变量，如{{name}}， {{date}}等。在JavaScript中，我只是做了一个替换函数，但有点快，有点脏。