有一个js等价于php echo，包括所有优点吗？

我一直在使用php在我的网站上修改html和css。这是我能想象到的最简单的方法。只要在实际插入 border-color 或 title 值的地方回显变量，就可以了。我希望能够在JS上这样做。
也就是说，我想定义js vars来等于php变量，然后使用与我的php方法相同的js vars。这意味着，在html/css表达式内部，w/o改变它。这样我就可以在移动中改变值，给定用户操作。
我不想使用js命令，例如document.getElementId（'whatever'）. style. color...我有数百个php变量，而不是几个，这将是一场噩梦。我也不想将css变量设置为等于js变量，而js变量等于php变量，或者类似的要求很高的解决方案（再说一次，我手头有几百个修改，我不想让它变得更糟）.我想使用与php相同的方法（当然，如果它不存在于js上也没关系，但这是个问题）.
PS如果有一种方法可以在旅途中更改php变量，那也可以工作。我只是假设将它们设置为js vars会更容易，这基本上是应该在旅途中更改的。

前言：使用客户端JavaScript生成整个页面内容通常不是最佳实践。
内置在浏览器环境中的最接近的direct等价物是document.write，您可能不想使用它，原因如下：
1.它非常冗长，因为您必须将所有内容 Package 在<script>...</script>中。

HTML规范（定义了它）反对使用它

它不是在任何地方都有效。
不能在<title>...</title>的主体中使用它（可以通过赋值给document.title来解决这个问题）。
你不能在一个标签内使用它（在<和>之间）。这不起作用，例如：

<!-- Doesn't work: -->
<div class="<script>document.write('x')</script>">___</div>
<!-- Doesn't work: -->
<div <script>document.write("class=x")</script>>___</div>

除此之外，它很有效。而不是：

// PHP
<div><?=variableGoesHere?></div>

它将是

<!-- JavaScript in HTML -->
<div><script>document.write(variableGoesHere)</script></div>

您可以通过定义自己的echo（并抓住机会支持多个参数）来缩短它：

function echo(...msgs) {
    document.write(msgs.join(""));
}

那就是：

<!-- JavaScript in HTML -->
<div><script>echo(variableGoesHere)</script></div>

或者，您可以将页面完全写入template literal中，然后将其输出到document.body.innerHTML（甚至document.documentElement.innerHTML，但如果可能的话，我会正常写入文档的head），如下所示：

<!-- Here you'd have the usual

<html>
<head>
(head content)
</head>
<body>

...but Stack Snippets provide that -->
<script>
// Your variables
const x = "ecks";
const y = "why";
const z = "zee";

// Writing the HTML in a template literal:
document.write(`
    <div>The value of x is ${x}</div>
    <div>The value of y is ${y}</div>
    <div>The value of z is ${z}</div>
`);
</script>

<!-- </body></html> -->

与包含document.write的脚本标记不同，您可以在任何地方进行替换。
使用正确的IDE加载项，您甚至可能会在模板文字中获得HTML语法高亮显示。
或者，您可以搜索客户端渲染库，但这些都是立即出现在脑海中的内置选项。

有一个js等价于php echo，包括所有优点吗？

1条答案

相关问题

热门标签

最新问答