在 JS 中使用 PHP if/else 是不好的做法吗？答案

【问题标题】：Is using PHP if/else within JS bad practice?在 JS 中使用 PHP if/else 是不好的做法吗？
【发布时间】：2013-04-03 22:09:17
【问题描述】：

我正在为 WordPress 构建一个自定义模板，并且在几个地方我使用了 PHP if else 语句，例如页脚中的 JS 中的以下示例。它工作正常，但我想知道这是否被认为是“不好的做法”，如果是这样，有什么更好的方法来处理它？

<script type="text/javascript">
var $submenu = $('.submenu');
// SUBMENU animation
<?php if ( in_category('Collection') == false ) { ?> // if not a Collection subpage
    $('.menu li a').each(function() { 
        if ( $(this).text() == 'Collection' ) { // If is Collection link show submenu on hover
            $(this).mouseenter(function() { 
                $submenu.slideDown(); 
            });
        } else { // else close submenu on hover over other menu links
            $(this).mouseenter(function() { 
                $submenu.slideUp(); 
            });
        }
    });
    $('.nav').mouseleave(function() { // close submenu
        $submenu.slideUp(); 
    });
<?php } else { ?> // If a Collection subpage always show subnav
    $submenu.show();
<?php } ?>
</script>

【问题讨论】：

一点也不。这样你就可以得到干净的代码，并且正确地分离了关注点。另一种方法是您将拥有一个 javascript 变量 var inCategory = <?= in_category("Collection") ?>。然后你可以通过javascript检查inCategory变量。但是，您这样做的方式还可以。你唯一能做的就是清理 if 语句并使用<?= if (in_category("Collection")) : ?>，然后使用<?= else: ?>，最后使用<?= endif ?>
另一种方法是通过 PHP 在页面中简单地设置一个变量，例如var isCollection = <?php echo in_category('Collection') ? 1 : 0 ?>。然后你的 JS 可以检查这个 var 并做适当的事情。一个优点是您可以将 JS 移动到可以缓存的外部文件中，而不是重新发送嵌入在每个页面中的相同 JS 有效负载。
混合服务器代码和 javascript 使代码维护变得更加困难。
我认为这是一种不好的做法，混合 html 和 js。因为您无法使用 jshint 或 jslint 等工具为您的脚本自动验证代码。
免得有人怀疑，赞成票意味着这是一个好的问题而不是一个好的方法。

标签： php jquery wordpress if-statement

【解决方案1】：

虽然混合 PHP 和 JavaScript 并没有什么真正的问题，但我个人觉得阅读和修改很尴尬，而且移动代码也很棘手。例如，如果您决定将该 JavaScript 导出到外部文件，这有很多好处：

<script src="myjs.js.php"></script>

如果您的 JavaScript 需要知道某些值才能计算 in_category('Collection')，这会变得很笨拙，因为您必须开始使用 GET 参数（除非您依赖会话变量，这可能会变得非常复杂且不可预测，尤其是通过资产请求):

<script src="myjs.js.php?random_vars_required=123"></script>

另一点需要注意的是，当 JavaScript 文件根据服务器端逻辑更改其内容时，您必须小心浏览器缓存的内容（为避免此类问题，这基本上意味着您有更改 js 文件的每个可能结果的请求 URL）。即

<script src="myjs.js.php?collection=true"></script>
<script src="myjs.js.php?collection=false"></script>

另一个缺点是通过将 PHP 与 JS 混合使用，您最终可能会在许多地方复制 PHP 代码，这违反了 DRY 原则。这就是为什么建议的“将数据导出到 javascript 变量”是一个更好的主意的原因。但是，如果可能，最好避免使用全局 js 命名空间中的变量。如果您需要跨多个 JavaScript 文件共享逻辑并且不希望在每个文件的顶部导出变量，那么避免使用全局命名空间可能会很棘手。

另一种可能性

如果您要测试的逻辑本质上是纯布尔型的，并且它也以页面分类（或子区域分类）为中心，那么以下是处理您想要实现的目标的好方法。这很好主要是因为它将您的 PHP 和 HTML 放在一起，而您的 JS 是分开的。

以下内容应放在用于生成外部 HTML 的任何模板中：

<?php

    $classes = array();
    if ( in_category('Collection') ) {
      $classes[] = 'collection';
    }
    $classes = implode(' ', $classes);

?>
<!-- 
  obviously you'd render the rest of the html markup
  I've removed it for simplicity
//-->
<body class="<?php echo $classes; ?>"></body>

然后在你的 JavaScript / jQuery 中：

if ( $('body.collection').length ) {
  /// if collection sub page
}
else {
  /// else do otherwise
}

如果您不想将类添加到您的body 元素，您始终可以根据页面的一个版本而不是另一个版本上已经存在的内容来定义布尔检查。虽然我个人喜欢保持干净，并且只有在我知道 HTML 标记在未来不会发生太大变化时才使用这些检查。

当今世界应该担心的几乎所有浏览器都支持元素上的多个类。所以这意味着即使你有多个想要检查的东西，只要有意义，你可以将这些类放在你的 html 或 body 标签上，并使用 jQuery 的 Sizzle 实现为你找到它们。

【讨论】：

Pebbl，通过完全不同的路线，我想我们最终到达了几乎完全相同的地方！我很喜欢阅读您的回答。
@Beetroot-Beetroot 呵呵，谢谢，是的.. 那是因为这是一种合乎逻辑的方式；）你自己干得好。
有人愿意评论否决票吗？似乎有点随机......尤其是如果没有解释所涉及的观点？
匿名投票必须是 SO 最糟糕的功能。顺便说一句，我是 +1 的。
@Beetroot-Beetroot 我不得不同意。如果投反对票，系统应该强制用户发表评论。无论如何，为 +1 欢呼，你也从我这里得到了一个 :)

【解决方案2】：

构建 javascript 服务器端可能是我们都做过的事情，尽管不这样做的主要论点 - 即 js 不能（容易）验证（使用例如 jsLint），并且不能（很容易）被放入 .js 文件中 - 允许浏览器仅缓存脚本的两个或多个可能版本之一是没有意义的。

您可以考虑将服务器端分支换成客户端分支，这可以说使代码更具可读性，但更重要的是，这是我最终建议的中间步骤（请耐心等待）：

var $submenu = $('.submenu');
// SUBMENU animation
var isCollection = <?php echo in_category('Collection') ? 'false' : 'true' ?>;
if ( !isCollection ) { // if not a Collection subpage
    $('.menu li a').each(function() { 
        if ( $(this).text() == 'Collection' ) { // If is Collection link show submenu on hover
            $(this).mouseenter(function() {
                $submenu.slideDown(); 
            });
        } else { // else close submenu on hover over other menu links
            $(this).mouseenter(function() {
                $submenu.slideUp(); 
            });
        }
    });
    $('.nav').mouseleave(function() { // close submenu
        $submenu.slideUp();
    });
} else { // If a Collection subpage always show subnav
    $submenu.show();
}

但是，如果布尔值 isCollection 可以通过其他方式确定（例如，通过查询 DOM 的某些方面，例如 data-xxx 属性），那么您就是在用煤气做饭.只需要一个版本的 js 脚本；它可以很容易地用 jsLint 进行验证；如果需要，可以移动到 .js 文件中。

当然，您需要在服务器端代码的其他地方设置data-xxx 属性（或其他属性）（完整的解释性注释），这可能是一个缺点，但可能不是很大。

也许不是所有的 js 都适合这种方法，但我认为问题中的例子是。

在我看来，在这种情况下，这是一条可行的前进道路。

【讨论】：

【解决方案3】：

至少它不是伟大代码的标志。还有其他选择：

Generate 一个 JSON 对象并在 JavaScript 中解析它
JS 文件的动态包含

只需设置条件：

if(<?= (int)$mybool ?>) {
    doSomething();
}

【讨论】：