如何从 JavaScript 外包 HTML 标签？

Posted 2023-02-22

【中文标题】如何从 JavaScript 外包 HTML 标签？

【英文标题】：How to outsource HTML Tags from JavaScript?

【发布时间】：2013-12-30 13:29:01

【问题描述】：

我想知道如何分离 javascript 和 html。当然，我在 JS 中包含：

<script src="function.js"></script>

但是当我使用 JS 向网站动态添加 HTML 标记时：

 $( "#content" ).append("<h2>");

然后在 JavaScript 代码中有 HTML 标签。我可以制作这个模块化还是有任何“好的做法”来做？

或者我应该使用 Bootstrap 之类的框架来编写更大的项目并将这些框架排除在 HTML 标签之外吗？

【问题讨论】：

如果你想要一个模板框架，AngularJS 会是一个不错的选择。

AngularJS 不仅仅是一个模板框架，它是一个完整的带有模板的 MVC 框架。如果你只是寻找一个模板框架，也许 AngularJS 有点矫枉过正。

【参考方案1】：

如果您真的想将应用程序逻辑与布局分开，您应该使用模板框架。有很多框架可以完成这项工作：

Underscore Mustache Handlebars 还有很多more

您本质上所做的是向模板引擎提供数据对象。根据您在模板中定义的逻辑，您无需弄乱应用程序逻辑和布局即可呈现页面。

要为您的应用程序找到合适的模板引擎，您可能需要查看：http://garann.github.io/template-chooser/ 在这里您可以定义您要查找的引擎类型，该网站会向您显示最合适的库。

【参考方案2】：

你可以创建一个隐藏的模板对象，然后在javascript中.clone()它。或者使用许多 MVVM / 模板 javascript 框架之一