如何使用 HTML 模块化网页？

Question

我正在为我们在大学项目中建造的电动汽车开发仪表板。这个仪表板将是一个网页，基本上显示有关汽车的一些信息，例如 位置，电池温度，瞬时功率，速度等...

但是我单独开发了这个仪表板的每个部分，现在我想知道如何将它们组合在一起。每个应用程序都有自己的 HTML、CSS 和 Javascript，我不知道在这种情况下建议做什么
下面是每个完成的应用程序：

Position: https://www.telemetria.milhagemufmg.com/gps/   
Battery temperature: https://www.telemetria.milhagemufmg.com/lm35/  
Instantaneous power: https://www.telemetria.milhagemufmg.com/ina226/  
Speed: https://www.telemetria.milhagemufmg.com/encoder/

来源可以在这里找到：https://github.com/Milhagem?tab=repositories

我也有一个我想象中的仪表板的草稿：

我开始使用纯 HTML 和 CSS 在我想要每个容器的地方制作一个网格，但我不知道如何以这种方式应用代码重用。

Answer 1

您正走在通往项目的正确道路上，因为模块化您的应用程序将使您的生活更轻松，尤其是当您的项目开始增长时。

创建模块化应用程序的理想方法是使用前端技术，如 VueJS 或 ReactJS。我真的建议你花几个小时来学习这些，它们对初学者非常友好（尤其是 VueJS）。

但是出于某种原因你想去香草，尝试阅读这篇文章可能会对你有所帮助。

https://blog.superflows.dev/how-to-implement-a-single-page-modular-app-architecture-using-pure-html-css-javascript

谢谢，希望有帮助