Diskuze: Zapuzdrenie JS kodu

Peas

Člen

Peas:17.9.2015 0:27

Caute,

rad by som sa vas opytal ako "zapuzdrujete" Javascriptovy kod. Uvediem priklad. Majme web stranku, kde v HTMLku mame Header, Obsah a Footer. Nazvime tieto casti komponentmi nasej stranky. A teraz prejdime k hlavnemu.
Pre kazdy takyto komponent budeme chciet pisat Javascriptovy kod a v zavere budeme mat 3 JS subory Header.js, Obsah.js a Footer.js. V kazdom subore budeme pisat kod vylucne tykajuci sa daneho komponentu, nechceme ziadne globalne premenne ani ziadnu podobnu neplechu. A mna zaujima ako riesite v praxi takuto situaciu a preco. Je viacero sposobov ako to riesit, ale pokusim sa prist na najvhodnesi, a tak ma zaujimaju vase nazory. Uvediem par prikladov.
Uz aj samotne zabalenie kodu do ready function nam zaisti to, ze premenne nachadzajuce sa v jej tele, nebudu globalnymi premennymi, ale len premennymi v danom kontexte.

$(document).ready(function(){
   var premenna = "abc";
   function mojaFunkcia(){console.log(premenna)};
   mojaFunkcia();
   //pokracovanie kodu
}

pripadne self invoking function, ktora necaka na document ready:

(function(){
   var premenna = "hello";
        console.log(premenna);
})();

alebo o nieco zaujimavejsie zapuzdrenie kodu:

var Komponent = Komponent || {};
(function (context) {
   var $premenna;
   context.init = function() {
      $premenna = $('.element');
      context.initFunction();
    };

    context.initFunction = function() {
       $premenna.hide();
       //pokracovanie kodu
    };
})(Komponent);

$(Komponent.init);

Odpovědět

17.9.2015 0:27

Jan Vargovský

Tvůrce

Jan Vargovský:17.9.2015 12:44

Osobne zapouzdření v JS vůbec neřeším.

Nahoru Odpovědět

17.9.2015 12:44

shaman

Člen

shaman:17.9.2015 22:01

Paci sa mi myslienka ze mate 3 js subory, kazdy pre urcitu cast stranky. Verim ze vsetky includujete na konci body alebo najlepsie pouzivate grunt alebo gulp a kompilujete ich do jedneho js suboru, zaroven komprimujete atd.

Vsetky tri ukazky co ukazujes su tiez ok. Zalezi v akom rozsahu chces premennu, ci globalnu alebo len lokalnu vo vnutri niektorej funkcie. Takiez kazdy z troch suborov moze mat vlastnu document ready funkciu, teda mozes mat aj 5x document ready funkciu, samozrejme vsetky az potom co sa nacita jquery.

Nerozumiem zapuzdreniu a otazke. Vsetky 3 subory sa nacitaju a budu pritomne v browsery. Takisto aj vsetky globalne premenne budu pritomne. Predsa je na tebe co nechas globalne a ako premenne pomenujes, aby sa nebili. Daj nejaky priklad kde mas so zapuzdrenim problem. Inak by som tomu v tvojom pripade nevenoval pozornost.

Nahoru Odpovědět

17.9.2015 22:01

try {...} catch (Exception ignored) { echo " ¯\_(ツ)_/¯ "; }

Peas

Člen

Peas:17.9.2015 23:14

Cauko,
ano je to tak, kazdy komponent ma zvlast JS subor a nazaver su nacitane na konci body ako pises. Avsak projekt je obrovsky a nemam kontrolu nad kazdym programátorom co si kuti v daných suboroch. Globalne premenne su celkovo bad practice, takze tym by som sa chcel vyhnut uplne. Koniec koncov v EcmaScript 6 konecne do JSka prichadzaju blokove 'let' premenne a vsetci sa tesime :-D . Ale rad by som zaviedol nejaku konvenciu vytvarania Javascriptovych suborov. To znamena aby sa dodrziavali urcite pravidla, ktore nemusia byt najlepsie (ale idealne keby boli :-D ), pretoze je lepsie sa drzat urcitych zasad ako mat kazdy komponent nakodeny inym spôsobom. A prave to sa stava, ze jeden subor zacina document.ready funkciou, dalsi nicim a podobne. No a ja hladam co najlepsi sposob zabalovania kodov. Document.ready funkcia je kludne pouzitelna, avsak jej nevyhoda je, ze funkcie z nej, nie su z vonka pristupne. Kdezto pri poslednom priklade, ktory som uviedol su. Tak som chcel pokecat ako riesite podobne problemy vy, alebo ake su vase nazory.

Nahoru Odpovědět

17.9.2015 23:14

shaman

Člen

shaman:17.9.2015 23:51

Hm pozrime sa blizsie na tvoj prvy kod

$(document).ready(function(){
   var premenna = "abc";
   function mojaFunkcia(){console.log(premenna)};
   mojaFunkcia();
   //pokracovanie kodu
}

mojaFunkcia sa definuje vo vnutri document ready. Celkovo by som ju vybral z bloku. Takisto premenna ktoru prijima by som dal ako parameter. Ked budes danu funkciu volat, mozes ju zavolat s hocijakou premennou. Toto je asi sposob ako to riesim ja.

$(document).ready(function(){
   var premenna = "abc";
   mojaFunkcia(premenna);
   //pokracovanie kodu
}

function mojaFunkcia(lokalnaPremenna){
    console.log(lokalnaPremenna)
};

Ked mam takto zadefinovanu funkciu, mozem ju pouzit vsade aj v hlavicke aj v paticke. Ak mas tych funkcii velmi vela a koliduju nazvy, tak mozes vymysliet nejake naming convention, pridanim nejakeho prefixu alebo postfixu, napr mojaFunkciaHeader().

Ak chces zapuzdrovat este viac, skus sa inspirovat js kniznicami. Otvor is napriklad jquery
http://code.jquery.com/…ry-1.11.3.js
je cele objektovo orientovane. To je asi cesta ktorou ist.
Na druhej strane, nie kazdy je skill v javascripte a vacsina z programatorov rychlo nieco spacka co funguje.

Skor by ma zaujimalo ako chces dosiahnut aby vsetci tvorili rovnaky level.Ma niekto este nejaky zaujimavy nazor na zapuzdrenie?

Nahoru Odpovědět

17.9.2015 23:51

try {...} catch (Exception ignored) { echo " ¯\_(ツ)_/¯ "; }

shaman

Člen

shaman:18.9.2015 0:01

Ked uz hovorime o tvojom zapuzdreni viem si predstavit 3 objekty.

var Header = function(premenna) {
    this.premenna = premenna;

    this.mojaFunkcia = function() {
        console.log(this.premenna);
    };

};

var Footer = function(premenna) {
    this.premenna = premenna;

    this.mojaFunkcia = function() {
        console.log(this.premenna);
    };

};

var header = new Header("ahoj svet");
header.mojaFunkcia();

var footer = new Footer("ahoj podsvetie");
footer.mojaFunkcia();

a mas to dokonale zapuzdrene

Nahoru Odpovědět

18.9.2015 0:01

try {...} catch (Exception ignored) { echo " ¯\_(ツ)_/¯ "; }

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:18.9.2015 10:28

Jen mám dotaz, proč oba mluvíte o tom, že jsko načítát na konci body? Je to kvůli rychlosti? Ve smyslu, že atribut defer není spolehlivý ? Nebo jak to mám chápat... já tohle nikdy nedělám, script načtu v hlavičce, dám mu atribut podle toho co potřebuju..když chci aby se načetl paralelně s HTML a nezpomalil mi to, dám defer, pak by teoreticky nebylo třeba ani obalovat defer věci do document.ready aka window.onload ... nebo parametr async ..ten taky udělá svoje .. jinak ...asi bych ty soubory taky sloučil do jednoho ..když už šetříme ten čas.

Jinak co se týká zapouzdření, abych taky mluvil k tématu , shaman mi mluví z duše... samostatný funkce bych vyjmul z pouzdra a zpřístupnil je globálně, když píšeš že tam můžeš mít i pár prasat, tak těm bych objekt header nebo footer necpal ...

Nahoru Odpovědět

18.9.2015 10:28

Neaktivní uživatelský účet

shaman

Člen

shaman:18.9.2015 11:39

Priznam sa ze o defer som nevedel. Nejak to mam zabehnute, ze to davam nakoniec body, funguje to dokonale. Ako vidim defer ma celkom dobru podporu http://caniuse.com/#… . Diky za tip.

Defer funguje len na external subory nacitane cez src. Clovekovi ako ja ktory nevie o defer by mohlo byt cudne preco v html kode musim pouzit document.ready ale v externom js subore to funguje az po naparsovani stranky. Nie je to trochu zmetocne? Nie je lepsie zabalit vzdy do document.ready, len pre istotu a pre podporu zvysnych 9% browserov a dat na koniec body?

Nahoru Odpovědět

18.9.2015 11:39

try {...} catch (Exception ignored) { echo " ¯\_(ツ)_/¯ "; }

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:18.9.2015 13:48

Aha, vidím, že jsem nepomyslel na možnost, že někdo nepoužívá JSv externím souboru .... já to tak dělám vždycky, myslím, že někde tady na síti o tom bylo řečeno něco málo. Neodvažuju se kritizovat opačnej postup (na to mám moc dobrou náladu a nechci jí kazit ani ostatním).

Ale pojem unobtrusive javascript stejně zmíním, přece z hlediska úhlednosti, stability a bezpečnosti to nějakej význam mít musí. https://en.wikipedia.org/…e_JavaScript

Nahoru Odpovědět

18.9.2015 13:48

Neaktivní uživatelský účet

Nejčastěji vyhledáváné

Diskuze: Zapuzdrenie JS kodu