網站如何使用Javascript而不在瀏覽器中顯示任何結構化HTML？

Question

我查看了該站點的瀏覽器源，並通過Charles Proxy進行了調查。 我使用Wappalyzer來查看他們正在使用什么，它看起來像Cowboy，Erlang，NodeJS，Express，React和Modernizr。

我看不到任何結構化的HTML。 看起來好像只是在瀏覽器上投放JavaScript並使用JSON（也許是？）來顯示內容。 而且CSS文件中的類名稱很奇怪，看起來像.jkhl4350s一樣毫無意義。

我的問題是，他們如何做到這一點？ 也許某種類型的CMS使事情變得混亂了？ JavaScript可以在沒有HTML結構的情況下呈現內容嗎？

我想弄清楚這一點，因為我想看看網站的結構以及它們如何用於diff JS庫。

我很困惑，不勝感激。

謝謝！

Answer 1

我的問題是，他們如何做到這一點？

他們正在使用React ，正如您在整個源代碼中將看到的許多data-reactid屬性所證明的那樣（React創建了用戶界面的聲明性模型，因此，每當數據更改時，UI都會重新呈現以反映這些更新。幕后有一些優化，所以我建議您看一下他們的文檔，以更好地理解。）

JavaScript可以在沒有HTML結構的情況下呈現內容嗎？

JavaScript可以呈現DOM元素。 在React中，您通常會在組件的render函數中看到它：

render() {
  return <div>Something here</div>;
}

非常奇怪的類名，看起來像.jkhl4350s毫無意義

它們根本不是毫無意義的。 他們可能正在使用CSS模塊之類的東西，從而擺脫了全局CSS名稱空間。 這就是為什么類名看起來很亂的原因。

我想弄清楚這一點，因為我想看看網站的結構以及它們如何用於diff JS庫。

在沒有看到其預編譯源代碼的情況下很難做到這一點，因此，除非他們的代碼在某個地方是開源的，否則您可能會難以理解它（如您所指出的那樣，編譯后的代碼看起來像有點怪）。 查看React文檔會更好。

這是一個相當廣泛的問題，因此，我建議您先閱讀上面提供的兩個鏈接中的文檔。

Answer 2

通過Shadow-DOM： Mozilla開發人員Shadow-DOM