javascript - 如何将一个css，html和js从一个静态模板复制到另一个？(How to copy a piece of css, html and js from one static template to another?)

Question

I have a folder of static files (html, css and js) and I recognised a piece of code (say, a dinosaur animation) that I want to transport to another folder of static files (a separate project of my own based on a different template).(我有一个静态文件文件夹（html，css和js），并且我识别了一段代码（例如，恐龙动画），我想将该代码传输到另一个静态文件文件夹（基于不同的我自己的独立项目）模板）。)

The main question is what is the correct and efficient way to do this.(主要问题是执行此操作的正确和有效方法是什么。) This is my current process:(这是我当前的过程：) Manually recognise the minimal(手动识别最小) html chunk where this piece is displayed ( div class="dinosaur_animation" ... )(显示此片段的html块（ div class =“ dinosaur_animation” ... ）) css part where the classes are declared ( .dinosaur_animation { ... )(声明类的CSS部分（ .dinosaur_animation {... ）) js scripts needed(所需的js脚本) Manually copy these pieces to the html, css and js sources of my new project.(手动将这些片段复制到新项目的html，css和js源中。) Rename the original class and function names (all instances of "dinosaur_animation" renamed to "dinosaur_animation_newproj" ) as is frequently the case that there is conflict with classes and functions using the same name in the new project.(重命名原始的类和函数名称（将“ dinosaur_animation”的所有实例重命名为“ dinosaur_animation_newproj” ），就像在新项目中使用相同名称的类和函数经常发生冲突的情况一样。) I have successfully transported the pieces from one template to another using this process a couple time, but I am aware that it is extremely inefficient and there should be a smarter way of doing this.(我已经使用此过程成功地将片段从一个模板传输到了另一个模板，但是我知道它效率极低，并且应该有一种更聪明的方式来实现。) For lack of terminology knowledge, I also couldn't google properly.(由于缺乏术语知识，我也无法正常使用Google。) Could you kindly give a step by step of a smarter way of doing this?(您能逐步给出一个更明智的方法吗？) As extra points, can you help me to express what I have just described using correct terminology and antecipate if I can do the same if I am using Wordpress rather than handling static files directly?(另外，您是否可以使用正确的术语来表达刚才描述的内容，并确定如果我使用Wordpress而不是直接处理静态文件，是否可以做同样的事情？) As everything seems to be wrapped into php and changing original files is regarded as a bad idea, I presume the answer is no...(由于所有内容似乎都包裹在php中，并且更改原始文件被认为是一个坏主意，所以我想答案是否定的。) Thanks!(谢谢！)   ask by Jimmy translate from so

Answer 1

You are talking about modularity .(您正在谈论模块化 。)

This is the term we use in development to describe code and applications that are build in a way that allow us to do this feat you're trying to do.(这是我们在开发中使用的术语，用于描述以允许我们执行您要尝试的功能的方式构建的代码和应用程??序。) Modularity is not a concept from this or that language, but a concept about programming in general.(模块化不是这种语言的概念，而是总体上有关编程的概念。) So, if you need to read about it, just look for "modularity css", modularity js" or something.(因此，如果您需要阅读有关内容，只需查找“模块化CSS”，“模块化js”或其他内容即可。) Now, about what you're trying to do, it is easy when the actual component you want to share between projects are already made in a modular way.(现在，关于您要执行的操作，如果要在项目之间共享的实际组件已经以模块化方式制作，就很容易了。) If it's not, could be a pain to do it.(如果不是这样，这样做可能会很痛苦。) In that case, you should first rewritten the code in a modular way, and then the copy will be just intuitive.(在这种情况下，您应该首先以模块化方式重写代码，然后副本将变得直观。) There's no "step-by-step-guide" to achieve this, trust me.(相信我，没有实现此目标的“分步指南”。) Beeing capable of write modular code is not in the realms of "tactics", it is much more a strategy per si .(能够编写模块化代码的Beeing不在“战术”范围内，而是每个战略。) You should read about it, implement modular ideias more and more, until you have a grasp of it, and if you're persistent enough, you'll end with code that could easily be shared between different projects, and that's the whole goal, in the end.(您应该阅读有关它的内容，越来越多地实现模块化思想，直到您掌握了它，并且如果您有足够的持久性，您将得到可以在不同项目之间轻松共享的代码，这就是整个目标，到底。) For HTML/CSS, I recommend you to read about BEM (Block Element Modifier) structures .(对于HTML / CSS，我建议您阅读有关BEM（块元素修饰符）结构的信息 。) Seems to me the best way to keep your code modular.(在我看来，保持代码模块化的最好方法。) In JS, there's a lot of discussion and methodologies that achieve the same result, so just google it out.(在JS中，有很多讨论和方法论都可以达到相同的结果，因此，请谷歌搜索一下。) PS: Wordpress for sure has its own modules, so, if you understand how they work, you certainly can take advantage of this and use it whatever way you want.(PS：Wordpress肯定有其自己的模块，因此，如果您了解它们的工作原理，那么您当然可以利用此功能，并以任意方式使用它。)