Javascript 管理视图文件和JS标记

我用Smarty来处理我的观点。为了最大限度地实现代码重用，我将视图文件分成了几个小段，只在需要的地方包含它们。这很有效，因为它在浏览器上呈现时保持了标记的一致性

问题是，我还有一些JS可以执行某些DOM操作。这意味着我的JS需要了解标记结构等。在很多情况下，JS被迫维护Smarty模板文件中已经存在的标记的相同副本

这将成为维护的噩梦，因为对标记的任何更改都必须在Smarty模板文件中完成，并且可能在JS标记中完成

关于如何优雅地处理这个问题，有什么建议吗？或者我只是接受这是一种必要的邪恶

我把我的视图文件分成几个小部分，只在需要的地方包含它们

对JavaScript执行同样的操作。考虑模块化，制作模块而不是页面。任何模块都包括HTML（在您的例子中是Smarty）、JavaScript和CSS。任何需要该模块的页面都需要这三个文件。或者您可以将所有模块捆绑在一起，以使包含模块变得更容易。创建模块时，您将编辑模块而不是页面。这样，您就不会因为编辑JavaScript或CSS/HTML而破坏内容

一个模块可以是任何在页面中可以独立于其他模块的东西。当然，模块可以相互通信，但您需要为模块系统定义一个一致的API

这种方法会使维护更容易，但缺点是你几乎必须重写整个应用程序，使其模块化