Diskuze: Machr na JavaScript

Michal Maršálek

Tvůrce

Michal Maršálek:24.1.2014 19:05

Zdravím všechny.
Download: https://www.dropbox.com/…tDown%20.zip
Online: http://finty.8u.cz/CountDown.js/

Odpovědět

24.1.2014 19:05

Zdeněk Pavlátka

Tvůrce

Zdeněk Pavlátka:24.1.2014 19:13

Ten čtvrtý vzhled je úžasný. Mohl bych ho použít na svých stránkách? (Pro odpočítávání různých věcí) - Samozřejmě až po skončení soutěže

Nahoru Odpovědět

24.1.2014 19:13

Kolik jazyků umíš, tolikrát jsi programátor.

Michal Maršálek

Tvůrce

Michal Maršálek:24.1.2014 19:33

Jsem rád, že se líbí, použít můžeš.

Nahoru Odpovědět

24.1.2014 19:33

Zdeněk Pavlátka

Tvůrce

Zdeněk Pavlátka:24.1.2014 19:37

Děkuju.

Nahoru Odpovědět

24.1.2014 19:37

Kolik jazyků umíš, tolikrát jsi programátor.

Filip Pýrek

Tvůrce

Filip Pýrek:24.1.2014 20:13

Takže, když jsi se tak těšil, tak zde je momentální verze - http://odpocet.filippyrek.cz/
Nakonec to udělám tak jako Michal, přehled všech vlastností a dema

Nahoru Odpovědět

24.1.2014 20:13

„The best way to predict the future is to invent it.“ — Alan Kay

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:24.1.2014 20:33

SUper, ale nepostrádá to smysl, když jsi to udělal podle Michala?

Nahoru Odpovědět

24.1.2014 20:33

Zdeněk Pavlátka

Tvůrce

Zdeněk Pavlátka:24.1.2014 20:34

V tom druhém ti chybí mezery...

Nahoru Odpovědět

24.1.2014 20:34

Kolik jazyků umíš, tolikrát jsi programátor.

Filip Pýrek

Tvůrce

Filip Pýrek:24.1.2014 21:14

Co jsem udělal podle Michala? Všechno jsem dělal sám!
Jediné co asi udělám podobně jako Michal bude ten seznam vlastností a dem...

Nahoru Odpovědět

24.1.2014 21:14

„The best way to predict the future is to invent it.“ — Alan Kay

Filip Pýrek

Tvůrce

Filip Pýrek:24.1.2014 21:16

Je to ukázka nastylovaného a nenastylovaného...

Nahoru Odpovědět

24.1.2014 21:16

„The best way to predict the future is to invent it.“ — Alan Kay

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:24.1.2014 21:24

no píšeš:

Nakonec to udělám tak jako Michal

Nahoru Odpovědět

24.1.2014 21:24

Filip Pýrek

Tvůrce

Filip Pýrek:24.1.2014 21:28

Na něco jsi zapoměl

Nakonec to udělám tak jako Michal, přehled všech vlastností a dema

ok... Nechme to už radši být...

Nahoru Odpovědět

24.1.2014 21:28

„The best way to predict the future is to invent it.“ — Alan Kay

Michael Olšavský

Tvůrce

Michael Olšavský:25.1.2014 14:18

http://jsfiddle.net/J6Kdm/18/

Také se přidám. Neumí to nic extra, ale je to alespoň napsané objektově

Nahoru Odpovědět

25.1.2014 14:18

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:25.1.2014 14:30

jen malá technická poznámka: je zbytečné procházet #odpocet, aby byl dokument validní a validně se v JavaScriptu jevil může být id použito jen jednou.

Nahoru Odpovědět

25.1.2014 14:30

David Dostal

Tvůrce

David Dostal:26.1.2014 20:04

Už to nestihnu napsat, ale kdyby se někdo chtěl inspirovat...

Nahoru Odpovědět

26.1.2014 20:04

MadaraCZech

Člen

MadaraCZech:26.1.2014 21:04

http://leteckaposta.cz/421812329

Nahoru Odpovědět

26.1.2014 21:04

...

Filip Pýrek

Tvůrce

Filip Pýrek:26.1.2014 21:44

Zde je moje finální verze

Snažil jsem se to udělat tak, aby při upravování vzhledu a některých vlastností stačilo použít CSS.

Online: http://odpocet.filippyrek.cz
Download: https://drive.google.com/…MV3VSNl80TjQ

Editováno 26.1.2014 21:45

Nahoru Odpovědět

26.1.2014 21:44

„The best way to predict the future is to invent it.“ — Alan Kay

Filip Pýrek

Tvůrce

Filip Pýrek:26.1.2014 21:59

Pardon, špatný link. https://drive.google.com/…PbUFkSzQ2Wm8

Nahoru Odpovědět

26.1.2014 21:59

„The best way to predict the future is to invent it.“ — Alan Kay

Matyáš Procházka

Člen

Matyáš Procházka:26.1.2014 22:26

Můj výtvor
https://drive.google.com/…eVZCX1E/edit?…

Nahoru Odpovědět

26.1.2014 22:26

Michal Maršálek

Tvůrce

Michal Maršálek:26.1.2014 23:48

To s mým skriptem také jde.
http://finty.8u.cz/CountDown.js/

Nahoru Odpovědět

26.1.2014 23:48

1Pupik1989

Člen

1Pupik1989:27.1.2014 0:01

Já se snažil asi jako jediný o cross browser řešení be jquery nesmyslu. Asi nejspíš mám na něj opravdu averzi. Pomalejší věc jsem v javascriptu neviděl. Zlatý Clisure od googlu.

Nahoru Odpovědět

27.1.2014 0:01

David Hartinger

Vlastník

David Hartinger:27.1.2014 12:01

Vůbec jsem nečekal tak velkou účast, řešení je spoustu a většina z nich funguje skvěle. Pár řešení pouze trpělo nedostatkem, že se widget zobrazil až po vteřině, měl by tam být hned po načtení stránky. Zaměřil jsem se tedy na to, kdo to dotáhl nejdále.

Nejvíce se mi líbí řešení od Michal Maršáleka. Máš to vymakané, to schovávání nul, placeholder když to skončilo, podporu skinů atd. Vím, že nápad s posledním skinem je od Salátíka, ale prostě jsi své řešení představil tak, že by ho od tebe koupil každý zákazník Gratuluji k placce. Napiš si o ní Míše.

Všem ostatním děkuji za účast a budu se těšit u příští soutěže

Editováno 27.1.2014 12:01

Nahoru Odpovědět

27.1.2014 12:01

New kid back on the block with a R.I.P

Honza Bittner

Tvůrce

Honza Bittner:27.1.2014 12:09

Máš to hezké, ale lepší by bylo udělat to přes Konstruktor a prototypy, tvůj OOP návrh je sice dobrý, ale pak to může někdy omezovat.

Viz třeba http://www.itnetwork.cz/…ani-tutorial

Nahoru Odpovědět

27.1.2014 12:09

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

1Pupik1989

Člen

1Pupik1989:27.1.2014 14:40

Já byl líný to stylovat. Proto jsem měl v prototypu ten update. Akorát jsem nedodělal žádné callbacky pro každý element zvlášť. No třeba příště to bude lepší. Chtěl jsem 3D, ale VML v IE je tak pomalé, že jsem to vzdal.

Nahoru Odpovědět

27.1.2014 14:40

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:27.1.2014 15:50

musíš dávat těžší machry, pak nás bude soutěžit méně a bude to zajímavější.

Nahoru Odpovědět

27.1.2014 15:50

Michal Maršálek

Tvůrce

Michal Maršálek:27.1.2014 15:54

Konstruktor používám, ale přijde mi přehlednější mít veškerou definici objektu v jednom bloku kódu (mezi { a }). Je k tomu nějaký závažný důvod, proč se metody definují přes ty prototypy?

Nahoru Odpovědět

27.1.2014 15:54

Michal Maršálek

Tvůrce

Michal Maršálek:27.1.2014 15:55

Díky.

Nahoru Odpovědět

27.1.2014 15:55

Zdeněk Pavlátka

Tvůrce

Zdeněk Pavlátka:27.1.2014 15:57

Na druhou stranu ale bude víc případů, kdy bude soutěžit jen jeden.

Nahoru Odpovědět

27.1.2014 15:57

Kolik jazyků umíš, tolikrát jsi programátor.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:27.1.2014 16:02

co se devbook rozrůsta si myslím že už to nebude problém, možná leda tak u JS, kde ty tutoriály nejsou zatím na tak dobré úrovni jako třeba u C#.

Nahoru Odpovědět

27.1.2014 16:02

Drahomír Hanák

Tvůrce

Drahomír Hanák:27.1.2014 16:04

Základní rozdíl: bez prototypu se při každém vytvoření objektu vytvoří nová anonymní funkce pro každou metodu.

Nahoru Odpovědět

27.1.2014 16:04

Michal Maršálek

Tvůrce

Michal Maršálek:27.1.2014 16:05

Aha, takže v podstatě "jen" výkonnostní rozdíl?

Nahoru Odpovědět

27.1.2014 16:05

Honza Bittner

Tvůrce

Honza Bittner:27.1.2014 16:07

Teď si nejsem jistý, ale myslím že se využívají k dědičnosti atp.
Celkově je to takový lepší způsob. Víc by ti mohl říct určitě Drahomír Hanák

Nahoru Odpovědět

27.1.2014 16:07

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Zdeněk Pavlátka

Tvůrce

Zdeněk Pavlátka:27.1.2014 16:08

Záleží na daném zadání.

Nahoru Odpovědět

27.1.2014 16:08

Kolik jazyků umíš, tolikrát jsi programátor.

1Pupik1989

Člen

1Pupik1989:27.1.2014 16:15

Kromě toho, že je to několikanásobně rychlejší je hlavní výhoda asi v tom, že se metody objektu nevytvářejí pořád dokola. Vlastně v případě tvého objektu ani nemá cenu vytvářet objekt s kouzelném slovíčkem "new". Je to úplně stejné jako:

function Neco(parametr){
  var objekt = {
    parametr: parametr,
    metoda:function(){
      alert(this.parametr);
    }
  };

  return objekt;
}

var objekt_neco = Neco('Ahoj');
objekt_neco.metoda();

A podle mě je přehlednější:

function Neco(parametr){
  this.parametr = parametr;
};

Neco.prototype.metoda = function(){
  alert(this.parametr);
};

var objekt_neco = new Neco('Ahoj');
objekt_neco.metoda();

Crofordovu metodu má cenu použít pouze v případě, že máš lokální proměnnou, která má být privátní.

Takže tvůj objekt CountDown by šel klidně předělat na:

function CountDown(element){
        var date = new Date(element.dataset.date.replace(new RegExp(/-/g), "/"));
        var notExpiredLabel = typeof element.dataset.notexpired == "undefined" ? "" : element.dataset.notexpired;
        var expiredLabel = typeof element.dataset.expired == "undefined" ? "" : element.dataset.expired;

  return function(){
                var diff = Math.round((date.getTime() - new Date().getTime()) / 1000);
                if(diff <= 0){
                        element.innerHTML = "<span class='expirationLabel'>" + expiredLabel + "</span>"
                }
                else{
                        var s = diff % 60;
                        var m = (diff - s) / 60 % 60;
                        var h = (diff - s - m * 60) / 60 / 60 % 24;
                        var d = (diff - s - m * 60 - h * 3600) / 60 / 60 / 24;
                        s = new TimePart(s, "secs", ["sekunda", "sekundy", "sekund"]);
                        m = new TimePart(m, "mins", ["minuta", "minuty", "minut"]);
                        h = new TimePart(h, "hours", ["hodina", "hodiny", "hodin"]);
                        d = new TimePart(d, "days", ["den", "dny", "dnů"]);
                        element.innerHTML = "<span class='expirationLabel'>" +notExpiredLabel + "</span><span class='countdowning'>" + d.formatedPart + h.formatedPart + m.formatedPart + s.formatedPart + "</span>";
                }
        }
}

A pak bych ho v cyklu volal:

countDowns[i] = CountDown(elements[i]);
setInterval(countDowns[i],1000);

Možná tam mám někde chybku, nekontroloval jsem to.

Editováno 27.1.2014 16:15

Nahoru Odpovědět

27.1.2014 16:15

Drahomír Hanák

Tvůrce

Drahomír Hanák:27.1.2014 16:23

Nejde jen o výkon. Prototyp je jednoduchý objekt, se kterým jde snadno manipulovat (což se hodí např. pro dědičnost, různé "mixin" funkce atd.). Vytváří se pouze jednou (méně paměťově náročné) a řekl bych dokonce, že je to "best practice" co se týče objektů v JS. U velkého množství kódu v JS je to v podstatě jedno, protože jde jen o různé doplňky pro web. V JS se ale píší i velké single-page aplikace nebo dokonce serverové aplikace, kde to hodně vadí.

O výkonnost by se ale vývojáři měli zajímat. Přestože s ní nemají zrovna ve své aplikaci problémy (a JavaScript je dnes opravdu rychlý) neznamená, že by ji měli úplně ignorovat. Momentálně třeba vyvíjím aplikaci v JS, kde je výkon naprosto zásadní, protože tam zpracovávám celkem velké množství dat v reálném čase.

ADD private vlastnosti: dají se udělat i tak, že objekt zabalíme do closure funkce nebo použitím JSDoc anotace @private a o zbytek se postará Closure Compiler příp. jiný podobný nástroj.

Editováno 27.1.2014 16:27

Nahoru Odpovědět

27.1.2014 16:23

Honza Bittner

Tvůrce

Honza Bittner:27.1.2014 16:23

Moc dobré vysvětlení jsem našel tady : http://stackoverflow.com/a/310914
Vážně doporučuji přečíst

Nahoru Odpovědět

27.1.2014 16:23

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Maršálek

Tvůrce

Michal Maršálek:27.1.2014 16:29

Díky, přečetl jsem a už to chápu, díky taky Drahošovi.

Nahoru Odpovědět

27.1.2014 16:29

Nejčastěji vyhledáváné

Diskuze: Machr na JavaScript - CountDown