Új hozzászólás Aktív témák

• #4517 Jim-Y veterán Bici #4516

  Új Válasz 2014-11-04 01:29:06 #4517

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Jim-Y

  veterán

  válasz Bici #4516 üzenetére

  Szia.

  Sajnos még mindig nem értek a canvas-hoz, így megint csak a kódodról fogok beszélni.

  > Remélem, nem "csúnya" nagyon a kódom.

  Nem fogok kertelni, szerintem nem fogod magadra venni, nem is azért írom, de... igen az, sajnos elég csúnya
  Na persze ez nem gond! Tényleg nem. Egyrészt mert mindenki kezdi valahol, másrészt meg az látszik, hogy más múltad van. Szépen nem így irunk JavaScript kódot.

  Ezekkel van probléma benne:

  var betolt = function(i,b,a)
  {
  imageObj[i].onload = function ()
  {
  ctx.drawImage(imageObj[i], b, 0, d, a);
  };
  };

  i, b, a -> ezek a formális változónevek egész egyszerűen rosszak, sosem adunk egybetűs váltzóneveket!
  Nem tudni, hogy mit jelölnek. i az vajon index, a b meg a, na erre még tippe sincs az embernek. Nincs overhead akkor sem, ha 1 betű helyett 20 hosszú változó neveket használsz, cserébe értelmes lesz a kód. Ennek azért van jelentősége, mert
  1: egy cégnél nem csak te fogod a kódodat olvasni, hanem előbb utóbb más is. És kontextus nélkül ezek a nevek konkrétan hátráltatják más munkáját, az idő pénz, tehát az ilyen nevek használatával pénz deficit keletkezik (lol ). Komolyra fordítva a szót, tényleg más is akarja még olvasni a kódod, ne adj isten módosítani, olyankor jól jön ha "self-descriptive" a kódod.
  2: JS-ben gyakran végzünk minifikálást, ami az egyik állomása a buildelésnek, így nem kell figyelni arra, hogy minél tömörebb legyen a kód, a végtermék úgyis tömör lesz.
  Példa: még ennél a minimalista példánál is látszik, bár mondanom sem kell, hogy értelmesebb kódnál jobban kijön a minifikálás "előnye"

  Before (tordeltem):
  var myOwnImageObject = [];
  function imageLoading(indexVar, someOtherVarWhichHasADescriptiveName, anotherFormalParam) {
  myOwnImageObject[indexVar].onload = function() {
  context.drawImage(
  myOwnImageObject[indexVar],
  someOtherVarWhichHasADescriptiveName,
  0,
  wut,
  anotherFormalParam
  );
  };
  }

  After:
  function imageLoading(n,a,e){myOwnImageObject[n].onload=function(){context.drawImage(myOwnImageObject[n],a,0,wut,e)}}var myOwnImageObject=[];

  Tehát nincs igazán érv az egybetűs változónevek mellett.

  3:
  Nem túl jó kódod stílusa. Gondolom C++-ból jöttél át, legalábbis én úgy tudom, hogy ott szoktak K&R style -t használni. Ez az automatikus pontosvessző , áhh inkább írom angolul úgyis úgy tudsz rákeresni: automatic semicolon insertion miatt nem ajánlott így kódolni JavaScriptben. Nagyon sok verzió létezik, én leginkább az airbnb-hez tartom magam. Számomra ez eredményezi a leginkább olvasható, karbantartható kódot. Tehát ha az airbnb szerint írjuk a kódodat, akkor valahogy így nézne ki (ha én írnám akkor is):

  var c = document.getElementById("myCanvas"),
  ctx = c.getContext("2d"),
  files = document.getElementById("files-upload").files,
  imageObj = [],
  a = (1920 - (files.length - 1)) / (files.length);
  
  function betolt(i, b, a) {
  imageObj[i].onload = function() {
  ctx.drawImage(imageObj[i], b, 0, d, a);
  };
  }
  
  for (var i = 0, len = files.length; i < len; ++i) {
  b = (a + 1) * i;
  imageObj[i] = new Image();
  imageObj[i].src = "útvonal" + files[i].name;
  betolt(i, b, a);
  }

  4:
  Az a változót tudatosan, vagy sem, de globális scope-ba helyezted, ez rossz szokás, abszolút kerülendő.

  5:
  ez inkább jó tanács: JSHint vagy egyéb linter toolok használata javallott. Szinte minden Editorhoz, IDE-hez létezik már plugin.

  Üdv

Új hozzászólás Aktív témák