Question

我正在尝试减少应用程序中重复代码的数量。一位朋友建议将重复的块放入一个单独的文件中，并在每次需要时包含它，同时传入一个不同的变量，但另一位朋友说这可能不是最好的方法。

我一直在努力寻找一个好的解决方案，但到目前为止我发现的唯一一件事就是需要使用模板引擎，如果可能的话，我希望避免使用它，因为我的应用程序很小。所以从理论上讲，我想重复的HTML块可能看起来像这样。

<p class="blockwrapper">Bunch of other code</p>

然后每次重复代码时我都想将一个新变量传递给“blockwrapper”。

我不知道最好是通过JS还是PHP来做到这一点。

Answer 1

模板引擎是最好的，但是如果你没有计划拥有许多不同的变量和相对较短的代码块，那么你可以将代码放在模板块中，然后对变量名执行替换。

<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。

Answer 2

可以使用JavaScript执行此操作 - 您基本上为用户的浏览器提供了大量内容以及如何根据这些内容构建页面的方法。但是，这会让页面对用户来说感觉有点慢，因为他们必须加载页面然后在浏览器执行指令时等待。但有些情况下，这绝对是一个很好的解决方案，如果您有兴趣，我建议研究像Handlebars这样的JS模板引擎，这样可以更容易地做到这一点。 @ Mike-C的回答很好地描述了如何在没有模板引擎的情况下做到这一点。

对于一个像你所描述的非常简单的情况，我建议使用PHP。你可以做这样的功能：

<?php
    function renderBlockWrapper($blockWrapperContents) {
        include('blockwrapper.html.php');
    }
?>

然后在blockwrapper.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文件。

减少重复的HTML代码

2 个答案: