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

• Jim-Y veterán

  #4517

  #4516 Bici

  2014-11-04 01:29:06

  Új Válasz

  Ú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

  

  Jim-Y

  veterán

  #4516 Bici

  #4516 Bici

  Heló!

  A példáidat sajnos nem tudtam az én kódommal összehozni, ezért úgy döntöttem, hogy csak az elméletet használom fel belőle (enclosure), és kerestem erre a neten példákat, és ez lett a működő eredmény:

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

  A problémát a te példáidnál az okozta, hogy nem értettem a három közti különbséget és a szintaktikát - pl. a kapcsos zárójel után írt (i), vagy az, hogy egy zárójelen belül van egy függvény az onload jobb oldalán, vagy a settimeout-os Image függvény értelmét sem értem. Ezt mind a kettes példából vettem.
  Persze, utána fogok nézni mindegyiknek, mert ez így nem állapot, hogy ilyen alap dolgokat nem tudok, csak most nem hagyott nyugodni a dolog és működésre akartam bírni olyan módszerrel, amit értek.
  Remélem, nem "csúnya" nagyon a kódom.

  Ezen kívül van még egy kérdésem: A betöltött képeket szeretném mouse scroll segítségével átméretezni úgy, hogy a kép nem lép ki a rendelkezésére álló keretből, hanem levágódik a széle, ami nem fér ki - persze egérrel lehetne drage-elni is a képet. További funkció lenne az egymás melletti képek közti választóvónal eltolása.
  Összességében egyfajta montázs progit akarok csinálni - egyelőre csak egymás melletti képekkel, átfedés nélkül.
  Egyelőre még nem jártam sikerrel, de felmerült egy kérdés ezzel kapcsolatban: elég ehhez egy canvas, vagy érdemesebb képenként klön canvas-t létrehozni?

  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