更加模块化;在.js文件中包含html元素

More modular; include html elements in .js file?

本文关键字：包含 html 元素 文件 js 模块化      更新时间：2023-09-26

我有一个页面，其中有许多按钮可以用javascript执行操作。这里没有问题，只需要一个html页面和多个.js文件，每个操作一个.js。只是为了把东西分开一点，让每件事都更容易管理。我将编写一个脚本，在部署时将它们全部组合起来。

我的许多javascript操作都需要html元素才能发挥作用。例如，要更改颜色，color.js需要一个带有表单元素的div，这样用户就可以更改颜色并按下按钮保存更改。color.js将函数绑定到按钮等的onClick。这里没问题。

当有许多javascript操作使用许多html元素时，就会出现问题。所有这些html元素都需要放在一个html页面中。这使得管理事情变得复杂。例如，当我更改颜色字段id时，我需要转到color.js并进行更改。此外，我必须在我巨大的html页面中找到html元素，并进行更改。

是否可以将我的javascript操作所需的html元素放入.js文件中，并以某种方式将其包含在我的html页面中？

当然，我可以转义所有html元素，并将其放在javascript变量中，然后对其进行document.write。但转义不是一件好事，之后更改html非常痛苦。

我也不是在寻找ajax函数，因为通过许多不同的操作，这将导致网络问题。

为你对这个问题的任何想法干杯！

您可以使用模板通过JavaScript生成动态HTML。大多数模板引擎都有相同的实现：

  • 模板结构（DOM）或HTML字符串
  • 一种渲染模板的方法
  • 填充模板的数据（数组、对象）
  • 配置模板引擎的设置

我使用过一些模板引擎，其中一个是Hogan.js，它有一个友好的加糖语法，非常容易使用，但性能较低。它实现了Mustache语法。

其他模板引擎位于Underscore.js库中，该库不提供加糖语法，而是提供本地javascript语法，提供了更多的功能和最佳性能。

我使用的最后一个是剑道ui模板
Kendo UI模板非常注重性能，而不是功能过剩。它将以方便的"语法糖"换取更好的性能。

如果你想尝试更多的引擎，在这里你可以得到很多：

  • 模板引擎选择器

另一方面，如果您只想加载静态HTML（例如静态视图），您可以使用jQuery.load（url）从服务器加载数据，并将返回的HTML放入匹配的元素中.load（）是jQuery.ajax（）的简写方法

推荐：无论您选择哪个选项，我都建议使用缓存来保存视图或保存编译后的模板，从而通过避免对相同资源的请求来提高性能。

相关文章：