2

非常に情報量の多いゲーム画面を構築していますが、画面に多数の惑星を表示する最初のコードだけでも、私のコードは少し乱雑/複雑に見え始めています。

また、可能であれば、「ソースの表示」を使用してその一部を隠したいと思いますが、それは二次的な問題です。

基本的に、以下のコードは X 惑星を画面上のさまざまな絶対位置に描画し、各惑星にマウスオーバー ツールチップを提供します。

これを行うには、単に「より良い」および/またはより効率的な方法が必要ですか? 基本的に、ヒントをいただければ幸いです。

私が心配している主な理由は、Qtip2 のツールチップがより複雑になり、あらゆる種類のプレイヤー情報がページに追加され、いくつかのチャット/ニュース/情報ボックスが追加されることです。ページに配信するメイン コースがまだあるときに、スパゲッティ コードから始めたくありません。

私の主な関心事は、生成するスクリプト タグの量だと思います。ページに追加するツールチップごとに 1 つの割合で。惑星の画像 (およびそのラベル) の「エコー」は、確かに避けられません....私にはよくわかりませんが、これには少し慣れていません。

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

1 に答える 1

2

  1. これらすべてのインライン スタイルの代わりにスタイルシートを使用します。スタイルを動的に追加する場合は、<style>必要に応じて css 定義を動的に追加する要素を常にヘッダーに含めることができます。

  2. 画像スプライトを使用して最適化を支援します。これは、インライン画像よりも背景画像の操作に適していますが、パフォーマンスの向上を考えると、価値があるかもしれません。

    インライン画像ではなく、CSS 画像の背景を使用する要素が必要ですが、DOM は同じように単純にすることができます。

  3. 大量のスクリプトを呼び出して qtip を追加する代わりに、qtip が必要とする情報をこれらの各要素のデータ属性として用意し、外部 js ファイルに 1 つの関数を用意して、要素をループし、qtip をベースに実行します。データ属性について。

    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'], 'data-惑星名' => $planet['planet_name'])); エコー '' 。$planet['planet_name'] . ''; }

jQuery

$('.planet_img').each(function(){
  $(this).qtip({content: $(this).data('planet-name')});
})
于 2012-11-01T15:29:55.020 に答える