jquery - 在 PHP 页面中混合 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> header 中的元素，您可以根据需要动态附加 css 定义。

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

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

3. 不要调用一堆脚本来添加 qtip 东西，而是将 qtip 所需的信息作为每个元素的数据属性，并在外部 js 文件中使用一个函数，该函数循环访问元素并根据数据属性执行 qtip 操作。

   foreach ($game['Planet'] as $planet) { echo $this->Html->image('../img/planet/' . $planet['planet_image_file'] .'.png', array('class' => 'planet_imgplanet_' . $planet['id '], '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')});
})