Question

我想将这些片段放在几个php文件中，然后在我的主页面中使用它们，而不是使用“纯”css和js文件。我的意思是，我已经基本上为我的HTML DOM做了这个。

这样：

<script type='text/javascript'>
var foo = <?php echo $bar; ?>;
</script>

或者这个：

<style type='text/css'>
.foo{
background-image:url('<?php echo $bar; ?>image.png');
}
</style>

这是非常糟糕的做法吗？

如果是的话，这种方法的优点和缺点是什么？

更新

这些天我只是使用Drupal来处理在主题系统中将PHP变量传递给js并支持像LESS和SASS这样的CSS预处理器。我在这个问题中提出的两个用例都可以通过现代框架/预处理器很好地处理。

Answer 1

通过PHP解释器放置Javascript可能不是一个好主意。同样，CSS

它鼓励使用服务器端代码编写客户端代码的反模式
这使得单独测试JS和CSS变得更加困难（如果它们开始充满PHP代码）
它使PHP输出更大
客户端不会缓存页面的一部分，只会缓存整个对象

要扩展到最后一部分 - Javascript和CSS可以变大（与HTML相比）。如果您有客户端浏览器缓存它们，则无需下载它们。

正确，包括在主文档中意味着没有单独的请求可以减少开销（特别是使用SSL），但客户端仍然需要下载文件。让它来自客户端缓存通常会更快。

另一方面，您的代码

<script type='text/javascript'>
var foo = <?php echo $bar; ?>;
</script>

看起来它是一段数据，而不是Javascript代码，所以它可能会有所不同。您可能还想正确地逃避$ bar。

Answer 2

虽然CSS不是问题，但如果您想通过AJAX将其作为HTTP响应发送，则会遇到麻烦。

<script type='text/javascript'>
var foo = <?php echo $bar; ?>;
</script>

出于安全原因，AJAX不允许使用Javascript。

最佳做法是将您的Javascript保存在单独的文件中。这样，客户端缓存脚本对您来说也具有流量优势。

Answer 3

我认为这并不一定是坏事。这对某些人来说会是一个眼睛疼痛，但那没关系。只要确保将这种集成保持在最低限度，你真的不希望在你的css，javascript和html中散布很多php。

Answer 4

关注MarkR的线程（无法看到如何回复它），假设您只是想将数据传递给JS：

你可以获得两全其美的一种方法是在PHP位中包含一些逻辑，以便它检查某个cookie并使其具有某个值（例如版本/时间）。像：

if (!isset($_COOKIE['warm']) && $_COOKIE['warm'] !== 'today') {
    echo '<script type=\'text/javascript\'>';
        echo "var foo = $bar;";
    echo '</script>';
}

客户端首先会查找foo全局，如果它存在，则需要缓存它（例如localStorage）并使用foo对象中的时间或版本或某些属性设置cookie。如果foo不存在，那么它将检查缓存（例如localStorage）。如果它不在那里，那么它将为它进行AJAX调用。

这样，您可以在缓存未命中/首次访问者上保存额外请求，并在重复时获得缓存优势。不应该为它疯狂，但我认为对于小型重要数据对象（引导程序，用户配置文件，仪表板信息等）应该没问题。

（编辑）为了清楚起见，保持这种方法易于实现和维护的核心思想是保持服务器端代码在一个地方生成$ bar的JS，当PHP打印出var foo和生成JSON响应时。同样，客户端将使用一个函数来解析$ bar，无论它来自var，cache还是AJAX。

要求php文件而不是链接到js和css是不好的做法吗？

4 个答案: