Javascript 减少重复的HTML代码

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

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

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

一堆其他代码

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

---

我不知道是否最好通过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>

---

这将从“模板”中创建一组新的HTML代码，替换所有出现的

“#value#”

使用

值

模板引擎最好，但如果您不打算使用许多不同的变量和相对较短的代码块，则可以将代码放入模板块中，然后对变量名执行替换

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

---

这将从您的“模板”中创建一组新的HTML代码，将所有出现的

“#value#”

替换为

value

使用JavaScript可以做到这一点-您基本上是为用户的浏览器提供了一组片段以及如何从这些片段构建页面的方法。不过，这会让用户觉得页面速度有点慢，因为他们必须加载页面，然后等待浏览器执行您的指令。不过，在某些情况下，这绝对是一个很好的解决方案，如果您感兴趣，我建议您研究一个JS模板引擎，比如Handlebar，这样做会更容易@Mike-C的答案很好地描述了如何在没有模板引擎的情况下完成这项工作

对于您描述的一个非常简单的案例，我建议使用PHP。您可以创建如下函数：

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

<?php renderBlockWrapper('Hello world'); ?>
<?php renderBlockWrapper('Hello again'); ?>
<?php renderBlockWrapper('Here I am a third time!'); ?>

然后在blockwrapper.html.php*中，您可以：

<p class="blockwrapper"><?php echo $blockWrapperContents ?></p>

最后，在基本文件中，您可以创建许多块包装器元素，如下所示：

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

<?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文件。

使用JavaScript可以做到这一点-您基本上是为用户的浏览器提供了一系列片段以及如何从这些片段构建页面的方法。不过，这会让用户觉得页面速度有点慢，因为他们必须加载页面，然后等待浏览器执行您的指令。不过，在某些情况下，这绝对是一个很好的解决方案，如果您感兴趣，我建议您研究一个JS模板引擎，比如Handlebar，这样做会更容易@Mike-C的答案很好地描述了如何在没有模板引擎的情况下完成这项工作

对于您描述的一个非常简单的案例，我建议使用PHP。您可以创建如下函数：

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

<?php renderBlockWrapper('Hello world'); ?>
<?php renderBlockWrapper('Hello again'); ?>
<?php renderBlockWrapper('Here I am a third time!'); ?>

然后在blockwrapper.html.php*中，您可以：

<p class="blockwrapper"><?php echo $blockWrapperContents ?></p>

最后，在基本文件中，您可以创建许多块包装器元素，如下所示：

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

<?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文件。

好吧，我想你的问题的唯一答案是，“是的，你可以用JavaScript或php做类似的事情。”如何做实际上取决于你当前如何构建页面，变量如何变化，它如何驱动输出的差异，等等。你现在真正要问的是“能做到吗”，答案是“可以”。我写了一个答案，但我知道这是众多答案中的一个。这取决于你是否在服务器端或客户端进行模板制作，如果你计划在任何时候扩展此项目，那么你将需要研究一个模板引擎或使用类似KnockoutJS的东西，如果它符合你的需要。你应该尝试AngularJS。易于学习，真正减少了HTMLcode@David我认为用尽可能少的信息回答一个问题不是很有建设性。很明显，OP正在尝试学习构建动态网页的基础知识，即使可以将问题解析为一个简单的是/否。@AmericanUmlaut:太好了。可能值得注意的是，我没有发布答案。请随意向下滚动页面并亲自观察。好吧，我想你的问题的唯一答案是，“是的，你可以用JavaScript或PHP做类似的事情。”你如何做实际上取决于你当前如何构建页面，变量如何变化，它如何驱动输出的差异，等等。你现在真正要问的是“能做到吗”，答案是“可以”。我写了一个答案，但我知道这是众多答案中的一个。这取决于您是否在服务器端或客户端进行模板制作，以及是否计划扩展此项目