使用HTML元素作為“模板”還是在javascript中動態生成HTML更好？

Question

我目前正在創建一個“類似facebook”的新聞提要，我想知道是否最好在1.）HTML中添加元素（我將其克隆到javascript中並將從ajax調用中獲取的數據附加到其中）在正確的位置，或者2.）如果最好在javascript中生成整個元素。

在最佳實踐方面，什么是最普遍接受的，並允許我獲得最佳擴展性？

這可能是基於情況的答案，還是在這種情況下我應該在整個網站上堅持使用的明確答案？

我看到的選項2的一個缺點是，用JavaScript編寫HTML通常不是一個好主意。

選項1的一個問題可能是，如果我嘗試開始操縱狀態的整體結構，以使其在不同頁面上有所不同，那么將很難保持跟蹤狀態，並且我可能會弄亂整體情況。

Answer 1

我認為答案因情況而異。 它隨模板的大小和復雜性等而變化。我傾向於使用HTML頁面中的HTML模板（這樣我就可以使用創作工具之類）並克隆它們。 我要小心避免將JavaScript代碼與HTML的特定結構綁定在一起（而不是將類名， name屬性和/或data-xyz屬性作為標記，以表示事情的發展）。 這樣一來，您就可以更改HTML（並在具有相同數據的不同頁面上使用不同的HTML），而不必擔心炸毀JavaScript代碼。 只需確保標記在那里（或不，如果您想在特定頁面上保留一些信息）。

我將在您的兩個選項中添加第三個選項：

3）讓ajax返回一個HTML片段，您只需將其附加到頁面即可。

如果您已經在服務器端使用某種模板技術來生成提要的初始部分，則最后一個功能非常有用，因為這樣您就可以將代碼放在一個地方而不是兩個地方。

Answer 2

基本上，在必須創建根據配置而有所不同的接口的情況下，您需要從JavaScript生成HTML，例如，您需要構建自定義動態表單作為復合模型的輸入投影。

在像您這樣的簡單情況下，HTML很酷。 但是您可以看看jQuery Template插件或類似的模板（如果您正在使用的話）。

我通常只需要創建一個模板，然后用一些json_encode類似物將其回顯到JavaScript，然后在其中放置一些變量，例如{{name}}，{{date}}等。在JavaScript中，我只是執行替換操作功能，但有點快又臟。