在PHP页面中混合使用CakePHP、jQuery和Qtip2时，如何避免糟糕、丑陋的编码习惯？

我正在构建一个信息量非常大的游戏屏幕，而且，即使只有第一段代码，在屏幕上显示了许多行星，我的代码也开始显得有点凌乱/复杂

如果可能的话，我还想对查看“查看源代码”的用户隐藏其中的一些内容，但这是第二个问题

基本上，下面的代码在屏幕上的不同绝对位置绘制X行星，并为每个行星提供鼠标悬停工具提示

必须有一个“更好”和/或更有效的方法来做到这一点？基本上，如果有任何提示我都会很感激

我担心的主要原因是Qtip2工具提示将变得更加复杂，页面中将添加各种玩家信息，以及几个聊天/新闻/信息框。我不想从意大利面代码开始，因为我还有主菜要送到页面上

我想我主要关心的是我将生成的大量脚本标记。以我添加到页面的每个工具提示一个的速率。行星图像（及其标签）的“回声”肯定是不可避免的……我真的不知道，我；我对这个有点陌生

<!-- File: /app/View/Games/main.ctp -->
<?php

    echo $this->Html->script('jquery-1.8.2.min');
    echo $this->Html->script('jquery.qtip');

    $game = $this->Session->read('Game');
?>
<?php
    foreach ($game['Planet'] as $planet) {
        echo $this->Html->image('../img/planet/' . $planet['planet_image_file'] .'.png', array('class' => 'planet_img planet_' . $planet['id'], 'id' => 'planet_' . $planet['id'], 'alt' => $planet['planet_name'], 'style' => 'position:absolute;top:' . $planet['y_position'] . 'px;left:' . $planet['x_position'] . 'px;'));
        echo '<script>$(\'.planet_' . $planet['id'] . '\').qtip({content: \'' . $planet['planet_name'] . '\'});</script>';
        echo '<label for="' . $planet['planet_name'] . $planet['id'] . '" style="position:absolute;top:' . ($planet['y_position'] - 20) . 'px;left:' . $planet['x_position'] . 'px;">' . $planet['planet_name'] . '</label>';
    }
?>

使用样式表而不是所有那些内联样式。如果动态添加样式，则标题中始终可以有一个

元素，您可以根据需要动态地将css定义附加到该元素中

使用图像精灵帮助进行优化。这更适合于处理背景图像，而不是内联图像，但为了提高性能，这可能是值得的

您需要使用css图像背景的元素，而不是内联图像，但DOM也可以很简单

与其调用一堆脚本来添加qtip内容，不如将qtip需要的信息作为这些元素中每个元素的数据属性，并在外部js文件中具有一个函数，该函数通过元素循环并基于数据属性执行qtip操作

foreach（$Planet作为$Planet的游戏['Planet'））{ echo$this->Html->image（'../img/planet/'.$planet['planet\u image\u file']..png'，数组（'class'=>'planet\u img planet\u'.$planet['id']，'id'=>'planet\u'.$planet['id']，'alt'=>$planet['planet\u name'，'data planet name'=>$planet['planet\u name'））； 回音“.$planet['planet_name']”； }

jQuery

$('.planet_img').each(function(){
  $(this).qtip({content: $(this).data('planet-name')});
})

---

第三是个好主意，我一定会采取行动的。数字1的问题是，我可以在屏幕上绘制任意数量的行星。但是，你的第3点也可以作为第1点。请你进一步解释第二点好吗？图像精灵？精灵如何与HTML图像标记关联？谢谢你的回答！好的，为了真正利用css图像精灵，图像需要是css背景图像，而不是内联图像。但是你只需要很少的元素（比如div而不是img）就可以完成，这会让加载速度更快。我会尝试一下你到目前为止的建议，如果我能让它起作用的话，我会稍后回来接受你的答案。请你把重点放在第3点上，好吗？我删除了我的内联qtip脚本，而是包含了一个指向外部javascript文件的链接，该文件当前包含上面jQuery代码片段的剪切粘贴。但是，当我将鼠标移到行星图像上时，什么也不会发生……jQuery片段是否应该位于以下位置：$（document）.ready（function（））{？而且，当QTIP出现时，它们只是出现在我屏幕的最左边，好像我只是在添加段落元素，而不是在鼠标离开时消失……但我担心这可能是另一个问题！：）