我正在尝试减少应用程序中重复代码的数量。一位朋友建议将重复的块放入一个单独的文件中，并在每次需要时包含它，同时传递不同的变量，但另一位朋友说这可能不是最好的方法。
我一直在努力寻找一个好的解决方案，但到目前为止我发现的唯一一件事是使用模板引擎，如果可能的话，我想避免使用，因为我的应用程序很小。所以从理论上讲，我想要重复的HTML块可能看起来像这样。
<p class="blockwrapper">Bunch of other code</p>
然后每次重复代码时，我都想将一个新变量传递到"块包装器"中。
我不知道最好通过JS还是PHP来做到这一点。
模板引擎是最好的，但如果你不打算有许多不同的变量和相对较短的代码块，那么你可以把代码放在一个模板块中，然后对变量名称执行替换。
<script type="text/html" id="template">
<!-- I'm replacing blockwrapper with #value# because it's less
likely to cause a collision -->
<p class="#value#">Bunch of other code</p>
</script>
function createHTML(templateID, value) {
var html = document.getElementById(templateID).innerHTML;
html = html.replace(/#value#/g, value);
return html;
}
这将从您的"模板"创建一组新的 HTML 代码，将出现的所有"#value#"替换为 value 。
使用 JavaScript 可以做到这一点 - 你基本上为用户提供了一堆片段以及如何从这些片段构建页面的配方。但是，这将使用户感觉页面有点慢，因为他们必须加载页面，然后等待浏览器执行您的指令。不过，在某些情况下，这绝对是一个很好的解决方案，如果您有兴趣，我建议您研究像 Handlebars 这样的 JS 模板引擎，这使得做到这一点变得更加容易。@Mike-C 的回答很好地描述了如何在没有模板引擎的情况下做到这一点。
对于像您描述的非常简单的情况，我建议使用 PHP。你可以做一个这样的函数：
<?php
function renderBlockWrapper($blockWrapperContents) {
include('blockwrapper.html.php');
}
?>
然后在块包装器.html.php*中，您可以拥有：
<p class="blockwrapper"><?php echo $blockWrapperContents ?></p>
最后在你的基本文件中，你可以创建很多块包装器元素，如下所示：
<?php renderBlockWrapper('Hello world'); ?>
<?php renderBlockWrapper('Hello again'); ?>
<?php renderBlockWrapper('Here I am a third time!'); ?>
这将输出
<p class="blockwrapper">Hello world</p>
<p class="blockwrapper">Hello again</p>
<p class="blockwrapper">Here I am a third time!</p>
* 如果您还不知道这一点：如果您有一种类型的文件生成不同类型的文件以像这样组合它们的文件结尾，这是一种常见的约定。所以.html.php表示生成HTML文件的PHP文件。