在PHP页面中混合CakePHP，jQuery和QTIP2时，我如何避免使用不良，丑陋的编码习惯

Question

我正在构建一个非常信息丰富的游戏屏幕，甚至只有第一位代码，它在屏幕上显示了许多行星，我的代码是开始看起来有些混乱/复杂。

我还想将其中的一些隐藏在看"查看源"的用途中，如果可以，但这是次要的问题。

基本上，下面的代码在屏幕上的各个绝对位置绘制X行星，并为每个行星提供了一个鼠标。

根本必须有一种"更好"和/或更有效的方法来做到这一点？基本上，我会感谢任何提示。

我关注的主要原因是QTIP2工具提示将变得更加复杂，并且会在页面中添加各种播放器信息，以及几个聊天/新闻/信息框。我不想使用意大利面条代码开始 start ，当我仍然将主课程交付到页面上时！

我认为我主要关注的是我要生成的脚本标签的质量。我以每个工具提示的速度添加到页面上。行星图像（及其标签）的"回声"肯定是不可避免的。...我真的不知道，我有点新。

<!-- 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>';
    }
?>

Answer 1

1. 使用样式表代替所有这些内联样式。如果您动态添加样式，则可以在标题中具有<style>元素，并根据需要动态地附加CSS定义。

2. 使用图像精灵来帮助优化。这更适合操纵背景图像，而不是内联图像，但是对于它提供的性能获得，可能值得。

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

3. 而不是调用一堆脚本来添加QTIP的内容，而是将信息qTIP需求作为每个元素的数据属性，而在外部JS文件中具有一个函数，该函数通过元素循环循环并根据数据属性进行QTIP的内容。

   foreach（$ game ['planet'作为$ planet）{ echo $ this-> html-> image（'../img/planet/'。$ planet ['planet_image_file']。']，'id'=>'planet_'。$ planet ['id']，'alt'=> $ planet ['planet_name']，'data-planet-name'=> $ planet ['planet_name']））； 回声''。$ Planet ['Planet_name']。''; }

jQuery

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