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

Question

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

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

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

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

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

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

谢谢！

Answer 1

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

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

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

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

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

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