liz*_*zmo 6 php wordpress jquery if-statement
我正在为WordPress构建一个自定义模板,并且我在几个地方使用了PHP if if语句,例如页脚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>
虽然混合 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）。IE
<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 标记将来不会发生太大变化时才进行此类检查。
当今世界应该担心的几乎所有浏览器都支持元素的多个类。因此，这意味着即使您想要检查多个内容，只要有意义，您就可以将这些类放在您的htmlorbody标记上，并使用 jQuery 的 Sizzle 实现来为您找到它们。