减少重复的HTML代码

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

我一直试图找到一个很好的解决方案，但我发现的唯一的事情，到目前为止，需要使用我想它，以避免可能的话我的应用程序只是一个小模板引擎。因此理论上我想重复的HTML块可能看起来像这样。

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

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

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

来源

2016-03-01 Vinyl

好吧，我想你的问题的唯一答案是，“是的，你可以做这样的事情JavaScript或PHP。”你要怎么做取决于你当前如何构建页面，变量如何变化，如何驱动输出的差异等等。你现在真正要求的是“可以做到”答案是“是”。 – David

我写了一个答案，但只知道这是许多人之一。如果您在服务器端或客户端进行模板化，并且如果您打算随时扩展此项目，那么您需要查看模板引擎或使用KnockoutJS之类的东西符合您的需求。 –

你应该尝试AngularJS。易于学习，并真正减少HTML代码 – AleOtero93

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

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

这将从你的 “模板” 与value更换的"#value#"所有出现创建一组新的HTML代码。

来源

2016-03-01 17:18:39

这正是我的目标。非常感谢 – Vinyl

有可能用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文件。

来源

2016-03-01 17:23:25 AmericanUmlaut

减少重复的HTML代码

回答

相关问题