javascript - 如何将一段css、html和js从一个静态模板复制到另一个？

我有一个静态文件文件夹（html、css 和 js），并且我识别出一段代码（比如恐龙动画），我想将其传输到另一个静态文件文件夹（我自己的一个单独项目，基于不同的模板）。

主要问题是什么是正确有效的方法。这是我目前的流程：

手动识别最小
- 显示此片段的html块 ( div class="dinosaur_animation" ... )
- 声明类的css部分（.dinosaur_animation { ...）
- 需要js脚本
手动将这些片段复制到我的新项目的 html、css 和 js 源中。
重命名原始类和函数名称（“dinosaur_animation”的所有实例重命名为“dinosaur_animation_newproj”），因为在新项目中使用相同名称的类和函数经常发生冲突。

我已经使用这个过程成功地将片段从一个模板传输到另一个模板，但我知道它的效率非常低，应该有一种更聪明的方法来做到这一点。由于缺乏术语知识，我也无法正确谷歌。

您能否逐步介绍一种更智能的方法？

作为额外的点，你能帮我用正确的术语表达我刚才描述的内容，并预测如果我使用 Wordpress 而不是直接处理静态文件，我是否可以做同样的事情？由于一切似乎都被包装到 php 中并且更改原始文件被认为是一个坏主意，我认为答案是否定的......

谢谢！

标签： javascripthtmlcsswordpressfrontend

你在谈论模块化。这是我们在开发中用来描述代码和应用程序的术语，这些代码和应用程序的构建方式允许我们完成您正在尝试做的这项壮举。

模块化不是来自这种或那种语言的概念，而是关于一般编程的概念。因此，如果您需要阅读它，只需查找“模块化 css”、模块化 js”或其他内容。

现在，关于您正在尝试做的事情，当您想要在项目之间共享的实际组件已经以模块化方式制作时，这很容易。如果不是，可能会很痛苦。在这种情况下，您应该首先以模块化的方式重写代码，然后复制将变得直观。

没有“分步指南”来实现这一点，相信我。能够编写模块化代码不在“策略”领域，它更像是一种策略。你应该阅读它，越来越多地实现模块化思想，直到你掌握它，如果你足够持久，你会得到可以在不同项目之间轻松共享的代码，这就是整个目标，到底。

对于 HTML/CSS，我建议您阅读BEM（块元素修饰符）结构。在我看来，保持代码模块化的最佳方式。在 JS 中，有很多讨论和方法可以达到相同的结果，所以只需 google 一下。

PS：Wordpress 肯定有自己的模块，所以，如果你了解它们的工作原理，你当然可以利用它并以任何你想要的方式使用它。