減少重複的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代碼

回答

相關問題