Javascript中的一些模板

Question

如何使用Javascript創建第二個邏輯結構。

是一個網頁，當它正在加載時（DOM還沒有准備好）正在執行javascipt代碼，其中：

<script>
if(window.innerWidth>900){

 /* show huge HTML with javascript stuff here */

} else {

 /* show huge HTML with javascript stuff here */

}
</script>

我希望在PHP語言中使用第二個代碼示例：

<? if(true){ ?>
/* show huge HTML with javascript stuff here */
<? } else { ?>
/* show huge HTML with javascript stuff here */
<? } ?>

當頁面加載時，我需要在初始化窗口寬度時使用html使用不同的javascript代碼。

Answer 1

不幸的是，Vanilla Javascript不會為您提供這種模板功能。 但是，為此目的存在許多庫。 您可能需要查看此頁面以獲取一些鏈接。

Answer 2

這不是JS的工作方式。 你當然可以在這里打印html內聯，但這會在你的代碼中造成一團糟。 我強烈反對這一點。 如果您需要這種模板功能，最好使用一些模板引擎。

例如，有EJS，它允許您編寫包含JS的單獨html模板。 基本上你加載模板，將數據傳遞給它，渲染html並將其插入DOM樹。 這使您可以保持代碼非常干凈。

http://embeddedjs.com/

Answer 3

根據我的直覺，我想你想根據屏幕/窗口大小模板化頁面。 根據屏幕的大小顯示不同的布局...並且您希望這是“動態”（我討厭那個詞），我的意思是實時更新 。

這通常被稱為“ 響應式設計 ”，並且以稍微不同的方式完成。 您依賴（如果可能）僅針對不同窗口大小的不同CSS樣式表。 屏幕尺寸X使用樣式表A，屏幕尺寸Y使用樣式表B等...

這是通過使用媒體查詢實現的。

當然，這要求您擁有干凈的語義HTML代碼（您知道......沒有表格布局等等）。

使用響應式設計的網站的一些示例： 鏈接 （轉到這些網站並調整瀏覽器窗口大小）