Skocz do zawartości

Zdjęcie
- - - - -

Refaktoryzacja kodu


Najlepsza odpowiedź karolgorecki, 26 stycznia 2016 - 20:20

Ja bym zrobił mapę 'vehicleParts' lub coś podobnego:

 

0 => vehicle-front
1 => vehicle-left-front
2 => ... itd

 

potem napisz generyczną funkcję, która tego używa.

Jeśli 'vehicleDamage.attributes.vehicle_part' może być inny to niż te podane wyżej to dodaj sprawdzenie czy klucz jest w obiekcie.

 


Tak na szybko:

var vehicleParts = [
  'vehicle-front',
  'vehicle-left-front',
  'vehicle-left-middle',
  'vehicle-left-rear'
];

function addDamageToImage(vehicleDamage) {
  var part = vehicleDamage.attributes.vehicle_part;

  if (part > vehicleParts.length || part < 0) {
    return;
  }

  var partName = vehicleParts[part];
  $('.' + partName).attr('src', 'img/' + partName + '_damaged.png');
}

Jak używasz es6,7 to pozmieniaj na arrow func, var na const itd

Przejdź do postu


3 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
webmazz

    Nowy użytkownik

  • 19 postów
    • Czas spędzony online: 1d 2h 21m
-1
Neutralna

Napisano 25 stycznia 2016 - 20:39

#1

W jaki sposób mogę zrefaktoryzować poniższy kod, aby nie zajmował tyle miejsca? Jak widać część kodu się powtarza.

private addDamageToImage(vehicleDamage) {

        if (vehicleDamage.attributes.vehicle_part == 0) {
            $(".vehicle-front").attr("src", "img/vehicle_front_damaged.png");
        }

        if (vehicleDamage.attributes.vehicle_part == 1) {
            $(".vehicle-left-front").attr("src", "img/vehicle_left_front_damaged.png");
        }

        if (vehicleDamage.attributes.vehicle_part == 2) {
            $(".vehicle-left-middle").attr("src", "img/vehicle_left_middle_damaged.png");
        }

        if (vehicleDamage.attributes.vehicle_part == 3) {
            $(".vehicle-left-rear").attr("src", "img/vehicle_left_rear_damaged.png");
        }

        if (vehicleDamage.attributes.vehicle_part == 4) {
            $(".vehicle-right-front").attr("src", "img/vehicle_right_front_damaged.png");
        }

        if (vehicleDamage.attributes.vehicle_part == 5) {
            $(".vehicle-right-middle").attr("src", "img/vehicle_right_middle_damaged.png");
        }

        if (vehicleDamage.attributes.vehicle_part == 6) {
            $(".vehicle-right-rear").attr("src", "img/vehicle_right_rear_damaged.png");
        }

        if (vehicleDamage.attributes.vehicle_part == 7) {
            $(".vehicle-rear").attr("src", "img/vehicle_rear_damaged.png");
        }
    }


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 25 stycznia 2016 - 20:54

#2

Hmm.
JS to nie moja specjalność, ale ja bym do zmiennej o krótkiej nazwie przypisał vehicleDamage.attributes.vehicle_part. Następnie if-y zamienił na switch. I stworzył funkcję przyjmującą jako argumenty nazwę obrazka i klase kontenera.

Pisałem na szybko. Jeszcze to przemyślę i ewentualnie edytuję posta ;p


  • 1

przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 26 stycznia 2016 - 09:13

#3

A co tu robi ten 'private'? Przespałem jakieś zmiany w JS?


  • 0

karolgorecki

    Nowy użytkownik

  • 17 postów
    • Czas spędzony online: 18h 15m 56s
15
Dobra

Napisano 26 stycznia 2016 - 20:20   Najlepsza odpowiedź

#4

Ja bym zrobił mapę 'vehicleParts' lub coś podobnego:

 

0 => vehicle-front
1 => vehicle-left-front
2 => ... itd

 

potem napisz generyczną funkcję, która tego używa.

Jeśli 'vehicleDamage.attributes.vehicle_part' może być inny to niż te podane wyżej to dodaj sprawdzenie czy klucz jest w obiekcie.

 


Tak na szybko:

var vehicleParts = [
  'vehicle-front',
  'vehicle-left-front',
  'vehicle-left-middle',
  'vehicle-left-rear'
];

function addDamageToImage(vehicleDamage) {
  var part = vehicleDamage.attributes.vehicle_part;

  if (part > vehicleParts.length || part < 0) {
    return;
  }

  var partName = vehicleParts[part];
  $('.' + partName).attr('src', 'img/' + partName + '_damaged.png');
}

Jak używasz es6,7 to pozmieniaj na arrow func, var na const itd


  • 2





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych