把HTML放在Javascript中的好處

我想知道如果把你的html放在javascript或者html文件中會更好。有我的js文件把HTML放在Javascript中的好處

例如有這樣的

$('<div>').addClass('test').append(
         $('<p>').text('test1'), 
         $('<span>').text('test2'), 
         $('<span>').text('test3') 
        ).insertAfter($('#test1'));

我的HTML文件看起來像這樣

<div id="#test1"></div> 
<div class="test"> 
    <p>test1</p> 
    <span>test2</span> 
    <span>test3</span> 
</div>

和js文件有：

$（」。。測試'）表示（）;

來源

2012-09-09 ThePinkHipo

總的想法是儘可能地分開你的邏輯和標記。在這種情況下，第一個選項沒什麼意義，會污染你的JavaScript，加上性能會更糟，因爲你正在創建每個元素。 – elclanrs

您可以（通過JavaScript模板系統）獲得兩全其美的好處。 – Pointy

高度主觀，當然取決於上下文。

在網頁中，大部分內容是已知的。沒有理由不只是把內容的HTML和使用CSS（也許了JavaScript真正需要的），以風格。

在Web應用程序，但是，事情並非這麼衆所周知的。該文檔更加動態，並且需要使用Javascript添加/刪除元素。

順便說一句，你的兩段代碼做了兩件不同的事情。在第一個例子中，你給它一個class的test，在第二個例子中，你給它一個ID的#test1。這是一個無效的ID，應該是test1。該ID的selector將是#test1，這可能會導致一些混淆。

來源

2012-09-09 21:35:08

當然，第二個選項更好，更快。

如果使用

$('<div>').addClass('test').append(
         $('<p>').text('test1'), 
         $('<span>').text('test2'), 
         $('<span>').text('test3') 
        ).insertAfter($('#test1'));

瀏覽器必須分析的JavaScript。並且每次使用$()時，您都會創建一個對象，其中有許多您不使用的屬性和方法（無用！）。當然，瀏覽器也必須解析HTML。

但是如果你使用

<div id="#test1"></div> 
<div class="test"> 
    <p>test1</p> 
    <span>test2</span> 
    <span>test3</span> 
</div>

瀏覽器只需要解析HTML和它的速度更快。

來源

2012-09-09 21:14:57 Oriol

使用第二種硬編碼HTML方法的最大好處之一是它仍然會顯示禁用JavaScript的人。很難確切地證實有多少用戶沒有啓用JS（因爲大多數跟蹤器使用JS ..），但我聽說最後的猜測是大約5％的互聯網用戶。

道德故事 - 讓您的網站在沒有JavaScript的情況下工作。然後，只有添加JavaScript才能使它看起來更漂亮/添加其他（非必要）功能。

來源

2012-09-09 21:19:44 DACrosby

也許適用於靜態網站，但對網絡應用程序說 - 例如，twitter可以直接告訴你，如果沒有啓用js，你甚至不能使用它。想象一下，如果twitter不允許使用JS，因爲js被禁用或不存在的情況非常罕見 - 也許它不存在或肯定不是沒有js的同樣體驗！ JS現在非常感謝你的好意。很快，同樣，IE將被假定爲不存在，這些日子實際上不是一個壞主意（就在幾年前，仍然因爲某種原因需要支持IE的一個大問題，而不是現在這麼多） – sajawikio

我很好奇，自己檢查了一下。 Twitter（以及Facebook和Google）的工作方式與期望非JS網站的工作方式完全相同：它們會向您發出警告，表明您錯過了某些內容，但無論如何都會向您顯示內容。它們當然僅限於在頁面刷新上更新推文，搜索結果等（我已經錯過了ajax），但基礎是沒有JS的網站。 JS確實可以增強你的體驗，但是並不需要限制它們。此外，我懷疑IE很快就會消失。當然，IE6和IE7。不是IE8 +雖然有一段時間。 – DACrosby

嗯也許他們改變了它，或者我錯了......我發誓大約一兩年前，我沒有被允許登錄到twitter沒有js啓用，它說我根本無法登錄，除非我啓用js 。可能是因爲我認爲允許的用法非常有限，我認爲它不起作用，儘管我非常確定它說*必需* js - 我有一種感覺我錯了，而且你是對的 - 你好 - 檢查出來！這並不是IE即將消失，但它曾經是多數人，所以你必須支持它 - 現在，Chrome是過去是1％，現在是大多數瀏覽器！ – sajawikio

簡單的答案是靜態內容應該使用普通標記來創建，而Javascript應該用於動態內容。

此外，在許多情況下，您可以同時使用兩者。您可以使用靜態HTML標記style="display:none"，然後使用Javascript更改樣式以使其顯示並根據需要消失。

來源

2012-09-09 22:35:55 Barmar

這可能是簡單的網頁，但對於Web應用程序，你應該看看模板系統，如mustache.js（https://github.com/janl/mustache.js）或Handlebars.js（http： //handlebarsjs.com/）。

這樣，您可以將HTML保留在外部模板文件中，並使用Javascript對象和數組來填充數據。例如，一個小鬍子模板看起來像：

<div id="{{id}}"></div> 
<div class="{{class}}"> 
    <p>{{name}}</p> 
    <span>{{prop1}}</span> 
    <span>{{prop2}}</span> 
</div>

而且你將有一個對象，看起來像這樣填寫的：

var obj = { 
    id: "myID", 
    class: "some classes", 
    name: "Martin Brennan", 
    prop1: "whatever", 
    prop2: 22 
}

你就可以使用該模板，像這樣的對象（裝載模板到一個變量）後：

Mustache.render(template, obj)

像傑里米ĴStarcher雖然說，這是非常主觀的，我會建議你給模板系統一試，看看你可以看到在項目中使用它們的價值。

來源

2012-09-09 22:44:34

把HTML放在Javascript中的好處

回答

相關問題