在Page中混合CakePHP、jQuery和Qtip2时，我如何避免糟糕的、丑陋的编码习惯？

Question

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

我也想隐藏其中的一些用途，看看“查看源”，如果是肯定的，但这是次要的关注。

基本上，下面的代码在屏幕上的不同绝对位置绘制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>';
    }
?>

Answer 1

1. 使用样式表而不是所有的内联样式。如果动态添加样式，则始终可以在标头中添加<style>元素，并根据需要动态添加css定义。
2. 使用图像精灵帮助优化。这更适合于处理背景图像，而不是内联图像，但是对于它所提供的性能提升，它可能是值得的。 您需要使用css图像背景的元素，而不是内联图像，但是DOM也可以很简单。
3. 而不是调用一堆脚本来添加qtip内容，而是将qtip所需的信息作为这些元素的数据属性，并在外部js文件中具有一个函数，该函数循环遍历元素并根据数据属性执行qtip内容。 foreach ($$planet游戏‘planet’){ echo $this->Html->image(‘./img/planet/’)。$planet 'planet_img _file‘.’..png‘，数组(’class‘=>’planet_img planet_‘.星球'id‘，id’=> 'planet_‘$ =>‘’id‘，'alt’$行星‘planet_name’，‘data-行星名称’=> $planet_name‘)；echo '’。行星的名字。‘；}

jQuery

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