0

如何使用 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 代码。

4

3 回答 3

1

不幸的是，Vanilla Javascript 不会为您提供那种模板功能。但是，有许多为此目的而存在的库。您可能想查看此页面以获取一些链接。

于 2012-12-12T08:28:24.370 回答
1

这不是 JS 的工作方式。您当然可以在这里打印 html 内联，但这会在您的代码中造成一团糟。我强烈反对这种做法。如果您需要这种模板功能，最好使用一些模板引擎。

例如，有 EJS，它允许您编写包含 JS 的单独的 html 模板。基本上，您加载模板，将数据传递给它，渲染 html 并将其插入 DOM 树。这使您可以保持代码非常干净。

http://embeddedjs.com/

于 2012-12-12T08:46:10.570 回答
0

按照我的直觉，我猜您想根据屏幕/窗口大小对页面进行模板化。根据屏幕的大小显示不同的布局......你希望这是“动态的”（我讨厌这个词），我的意思是实时更新。

这通常称为“响应式设计”，并以某种不同的方式完成。您依赖（如果可能的话）特定于不同窗口大小的不同 CSS 样式表。将样式表 A 用于屏幕尺寸 X，将样式表 B 用于屏幕尺寸 Y，等等...

这是通过使用媒体查询来实现的。

当然，这需要您拥有干净且语义化的 HTML 代码（您知道...没有表格布局等...）。

一些使用响应式设计的网站示例： 链接（访问这些网站并调整浏览器窗口的大小）

于 2012-12-12T09:03:35.057 回答