JQuery peklo - epizóda unobtrusive javascript (diskuse)

[mirec]

Příloha:

• jstest.7z (18212 bytů)

Pri tomto komentári sú v prílohe kompletné HTML / js kódy použité v blogu.

[Václav HFechs Švirga]

Na automatické přidání eventu na nové elementy by mohlo pomoct livequery.

[mirec]

Niečo podobné má priamo jQuery v sebe. Dosiahnúť sa to dá metódou on (delegated events konkrétne). Má to však svoje vlastné nevýhody ...

[Absolut Finlandia]

WOW CHCEL BY SOM BYT TAKY MIMOZO AKO TY

[Josef Kufner]

A co tomu formu nastavit javascriptem target do skrytého iframe a odchytit si onload tohoto iframe? Budou ti fungovat i uploady souborů a je to mnohem jednodušší. Do skrytého inputu pak jen nastavíš, zda výsledek má být celá stránka, HTML fragment, nebo JSON či JSONP s odpovědí.

[mirec]

Áno je to jedno z riešení. To moje riešenie používa hack v podobe vloženia celého webu do divu len preto, lebo knižnica na manipuláciu s DOM nevie manipulovať s celým vráteným dokumentom. Ak toto nedokáže knižnica priamo na to určená tak si dovolím tvrdiť, že tá knižnica je jednoducho vadná. Odosielanie formulára do skrytého iframu je hack a myslím, že vydrží kratšie než hack s divom. V poslednej dobe prehliadače zvyknú zvyšovať bezpečnosť medzi rámcami, takže neviem dokedy sa bude dať odchytiť onload.

Minule som dostal do rúk optimalizáciu jedného webu. Bol to web zo šablóny s veľkosťou asi 10MB (načítavanie okolo minúty). V hlavičke napchaných asi 30 jquery pluginov. Tak si teda hovorím, že tam dám on demand loading obrázkov počas scrollovania. Hodím teda jquery plugin na to a zistím, že bez nejakého hacku funguje len vtedy ak scrolluje celý web (nie div s overflowom auto). No nič, hodím teda hack a bum rozhodilo filtrovanie pretože filtre rátali s tým, že všetky obrázky budú načítané. Tak som teda trochu ohackoval filtre aby si aktualizovali rozmery pri onloade na obrázkoch. Bolo to brutálne pomalé, preblikával celý web ... Takto som sa ešte pár dní hral kým som to celé zahodil. Prácu s jQuery by som prirovnal k prechádzke mínovým poľom. Jednoducho si myslíte, že ste už len krôčik od toho aby ste sa z toho dostali a zrazu vaše vnútornosti lietajú všade po okolí.

Aby som nebol zlý len na jQuery ... skúšal som teda aj iné knižnice. Jedna z vecí ktoré mi fakt u jQuery chýbajú sú bindingy ... ktoré som si myslel, že elegantne rieši AngularJS. A tak už 2 dni v práci riešim dynamický obsah formulára podľa informácii o produkte. Na prvý pohľad vyzerá obyčajný select s výberom produktov ako jednoduchá záležitosť. Angular má priamo možnosť urobiť options nad zoznamom objektov, vybrať ktorá property je label a ktorá je value ... lenže ak má byť value celý objekt tak je správanie totálne rozbité. Javascript totiž 2 rovnaké objekty nepovažuje za rovnaké a porovnáva referencie (dosť blbé na vysokoúrovňový jazyk). Takže aj keď mi z jedného API vylezie pekný zoznam produktov, z druhého vybraný produkt a sú rovnaké angular mi jednoducho stále vypisuje chybu že nemám vybraný produkt pretože mi objekty pri porovnaní == vrátia false (popis hacku na initial selection, ktorý je v mojom prípade neaplikovateľný). Jednoduché a rýchle riešenie spočíva v zaháknutí sa na načítanie zoznamu produktov a na načítanie objednávky (keďže sú doťahované paralelne a neviem ktorá bude skôr) a ich ohackovanie aby mali aj rovnakú referenciu. Možno sa to dá aj inak, ale AngularJS sa ešte len učím (musím keďže nám z práce odišiel expert na js a všetko teda zostalo na mne, doteraz som riešil len serverové veci).

Teraz idem s bývalým kolegom robiť totálnu integráciu angularu s djangom (tastypie na rest + môj zatiaľ nezverejnený html api browser). Máme v pláne celý kód dať open source (zrejme BSD licencia). AngularJS je pekná knižnica, ale brutálne trpí tým, že je postavená nad js. Ja sa stále snažím prísť na to ako ľudia dokážu pracovať s js, ale zatiaľ ma to stálo len veľa nervov a vytrhaných vlasov.

[frdrx]

My vůbec nepoužíváme Ajax a všechna komunikace mezi browserem a Node serverem probíhá přes WebSockets, a když si s z něčeho začnem trhat vlasy, přestanem to používat. jQuery samotné nás ještě nenapálilo.

[R]

Som rad, ze sa niekto aj takymto veciam venuje. Neznasam weby, kde sa bez javascriptu nezobrazi nic a pritom by tam stacilo ciste HTML. Alebo rozne vyhladavacie formulare, ktore sa nedaju submitnut bez JS (niektore ani s JS v "nespravnom" browseri), lebo to robilo nejake hovado.

[cain]

Vloženie dokumentu do elementu div je potrebné pretože jQuery nevie priamo pracovať s dátami, ktoré obsahujú elementy ako head, title …

Coze ??

[mirec]

To je odkaz na aktuálny dokument, nie parsovaný dokument vrátený z xhr.

Ak ten divný kód nahradím:

$("#" + elementId).html($("#" + elementId, $response).html());

Tak mi vnútorné volanie $("#" + elementId, $response).html() na validnom dokumente vráti undefined čo mi pri volaní .html(...) funguje podobne ako volanie bez argumentov tj. vráti aktuálne html namiesto modifikácie. Asi pol hodiny som strávil hľadaním toho prečo sa mi obsah divu neaktualizuje .... i keď mám taký pocit, že vo firefoxe to išlo.

[Bedňa]

Podľa mňa to robíš celé zle a rozmýšľaš ako v C++, alebo mi možno niečo uniklo.

[frdrx]

Taky mi to přijde celý úplně špatně. Jenom se necítím být dost silný v kramflecích na to abych se pokusil vysvětlit a obhájit si co přesně a proč.

[mirec]

Mňa nezaujímajú argumenty. V blogu som riešil úplne jednoduchý problém - odosielanie formulára javascriptom tak, aby som ponechal funkčnosť aj s vypnutým js a nemusel som používať nejaký extra kód na serverovej časti. V prvom komentári (keďže k blogu sa to nedá) som priložil zdrojové kódy a celé som to písal preto, aby sa niekto chytil zdrojákov a ukázal ako sa to má robiť správne (konkrétne som dúfal v úpravu posledného príkladu). To riešenie, ktoré som ukázal ja je nefunkčné, náchylné na chyby, bez ošetrenia prakticky čohokoľvek ... jednoducho typický js kód, ktorým je posiaty celý web. Keďže sa tu pohybuje mnoho mnoho programátorov lepších ako ja hodil som do blogu čo mi vadí pretože chcem vedieť ako sa to rieši správne.

[frdrx]

Chvíli jsem si s tím hrál, ale myslím, že je to typická situace kdy je lepší začít znova s prázdným souborem, na což jsem ještě nenašel čas (a což by stejně možná ani nepřineslo kýžený výsledek, i kdybych ho našel, protože nejsem žádný eso). Blbý je, že nemám zkušenost s "unobtrusive" technikami, protože razíme názor, že vypnout js v prohlížeči je zhruba taková věc jako vypnout html.

[mirec]

Ja som čo sa týka vývoja js buď úplne nový alebo úplne mimo, ťažko povedať. Pred pár dňami nás v práci opustil jediný expert na javascript, takže som tieto veci musel prebrať ja. Primárne som vývojár v python (~50%) potom C++ (~20%), QML (~15%), zvyšok tvoria len marginálne veci typu lisp, haskell. Prakticky za všetkými jazykmi vidím nejakú logiku ale keď vidím v js pomocou jquery spúšťať metódu spôsobom $("selektor").názov_pluginu("názov_pluginu").metóda() tak si začnem o js niečo škaredé myslieť. Teraz sa hrabem rôznymi materiálmi, chápem, že js je skôr funkcionálny jazyk s namontovanou syntaxou podobnou c / jave čo je podľa mňa absolútne nešťastné riešenie. Chápem, že asi musím zmeniť nejako myslenie (niečo ako prechod C++ - haskell) ale zatiaľ som nenašiel nejakú magickú formulu kedy som si povedal, že viem s tým robiť a jazyk mi neprekáža v tom čo chcem urobiť.

[Josef Kufner]

Javaskript není "spíše funkcionální", on je funkcionální. Céčková syntaxe ho jen činí více stravitelným. Co jsem zatím potkal funkcionální jazyky, tak všechny měly syntaxi více či méně příšernou.

Co se jQuery týče ($('...').něco().něco()), je to jen úspornější způsob, jak zapsat array map a foreach.

[mirec]

JS nie je funkcionálny jazyk, len má akú-takú podporu funkcionálneho programovania. Keď som sa naposledy o to zaujímal zamietli prijatie tail rekurzie. A k tomu zápisu myslím, že som minule videl $("datepicker").pickadate("pickadate").get("yyyy-mm-dd").

[Bedňa]

Kurňa ja sa mažem s príkladom s dátami JSON a pozerám že to na serverovej časti nechceš upravovať, tak to mení situáciu, až bude čas tak to upravím inak

[Michal Karas]

Turbolinks znáš? Mají stejný cíl jako ty a jejich zdroják v CoffeeScriptu je (alespoň pro mě) docela pěkně čitelný, takže bys v tom možná mohl najít nějakou inspiraci.