[es] - Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

MilosDj
Milos Djuric
Belgrade

Član broj: 14174
Poruke: 307
*.dynamic.isp.telekom.rs.

+4 Profil

Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{19.07.2011. u 21:30 - pre 155 meseci}

Napravio sam mali timer! Html, css, js. Nista preterano posebno. Timer ucita json file, odredi koliko ima vremenskih stavki i polako odbrojava jednu po jednu stavku kako ide vreme. Odbrojavanje se i prikazuje u jednom <div>.
To lepo radi samo za sebe, kao otvoren tab u browseru.

Ja bih hteo to da nekako enkapsuliram, moduliram, sabijem u jednu klasu, reuse code... Upotrebite izraz koji vam je drag

Hocu ovo:

Code:
var timer = new Timer();
document.body.appendChild(timer.html_elem);

I da tako mogu da napravim 50 timera ako pozelim.

Sad nailazimo na moj problem:

1. klasa Timer nije samostalna! Koristi mnoge globalno definisane funkcije: loadFile, rndID, isArray, isObject...
2. koristi jos 3 manje klase Sound, TimerObject i View... koje instancira u sebi.
3. tu je i input_file() koja se poziva kad se ucitava file...

Ja bih zeleo nekako SVE to, sve sto je potrebno za taj timer da upakujem u nesto i da na kraju dobijem var timer = new Timer(); ili makar priblizno jednostavno.

Pitanja:

1. Da li je to moguce?

2. Kako?

3. Sta je najpravilnije, najbolje, najzahvalnije za koriscenje/odrzavanje koda...?

Upravo gledam ovo:

Code:

(function () {
    // ... all vars and functions are in this scope only
    // still maintains access to all globals
}());

i ovo:

var MODULE = (function () {
    var my = {},
        privateVariable = 1;

    function privateMethod() {
        // ...
    }

    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };

    return my;
}());

Ali ne zelim da pocnem refactoring (kasapljenje) koda pre nego sto se posavetujem ovde.

I'm not in this world to live up to your expectations and you're not in this world to live up to mine.

Odgovor na temu

misk0
.: Lugano :. _.: CH :.

SuperModerator
Član broj: 634
Poruke: 2824
*.adsl.ticino.com.

ICQ: 46802502

+49 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{19.07.2011. u 22:28 - pre 155 meseci}

1. Da

2. recimo

Code (javascript):

Timer = function() {

   //constructor

    .  

    .

    var localVar;

    this.publicvar;

}

Timer.prototype = {

    firstMethod : function() {

    }

    secondMethod : function() {

    }

}

razmisli i o koristenju namespace-ova.

:: Nemoj se svadjati sa budalom, ljudi cesto nece primjetiti razliku ::

Odgovor na temu

MilosDj
Milos Djuric
Belgrade

Član broj: 14174
Poruke: 307
*.dynamic.isp.telekom.rs.

+4 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{20.07.2011. u 07:55 - pre 155 meseci}

Ok, da vidim da li sam te dobro razumeo:

- Timer = function() { //constructor} je isto sto i function Timer() { //constructor }

- poenta je ubaciti objekat u prototip funkcije koju pravim.
u taj objekat stavim sve trenuno globalne f() i sve druge objekte...

Nije mi palo na pamet da mogu unutar f da imam this.zvono = new this.Sound();

Ima li jos neki nacin a da ga ljudi postuju, koriste, kazu da je ok?

Kad kazes namespace da li si mislio na ovo:

Code:
var yourNamespace = {

    foo: function() {
    },

    bar: function() {
    }
};
...
yourNamespace.foo();

var ns = new function() {

    var internalFunction = function() {

    };

    this.publicFunction = function() {

    };
};

I'm not in this world to live up to your expectations and you're not in this world to live up to mine.

Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net

+44 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{20.07.2011. u 08:19 - pre 155 meseci}

Pogledaj ovo - http://www.yuiblog.com/blog/2007/06/12/module-pattern/

rafforum.rs - Forum Računarskog Fakulteta

Odgovor na temu

MilosDj
Milos Djuric
Belgrade

Član broj: 14174
Poruke: 307
*.dynamic.isp.telekom.rs.

+4 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{20.07.2011. u 10:03 - pre 155 meseci}

Da vidim koliko sam ukapirao:

Primer 2: Jedini razlog sto ovde koristi lambdu (function(){})(); umesto da direktno vrati objekat return {}; je zelja da kasnije dodaje "private" var/methods. Da ili Ne?

Code:
YAHOO.myProject.myModule = function () {

   // private vars,methods

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.",
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
        }
    };

}();

Takodje dodatni razlog koriscenja lambde je onemogucavanje ponovnog pravljenja objekta. Dobio je singleton jer ce se YAHOO.myProject.myModule = function (){}(); izvrsiti samo jednom.

Lako je mogao da uradi ovo:

function MyModule(){}
YAHOO.myProject.myModule = new MyModule();

ali onda ga nista ne sprecava da ponovo koristi MyModule + MyModule f je usla u global namespace.
Da/Ne?

To je sto se tice namespace-a.

misk0v metod mi je jasan. Pre nego sto pocnem da radim, zelim da pitam ima li jos neki metod upakivanja koda a da moze odmah da se izvrsi i da mi bude odmah na raspolaganju?

I'm not in this world to live up to your expectations and you're not in this world to live up to mine.

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-a-1.sezampro.rs.

+33 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{20.07.2011. u 18:34 - pre 155 meseci}

Module pattern je proširenje singleton pattern-a, i ja često koristim taj pristup kako ne bih "zagadio" global scope tim nekim funkcijama koje napišem.

Suština je upravo to, logiku zatvoriš u tu neku f-ju koju odma' izvršiš, i povratnu vrednost, koja je u stvari taj objekat, upišeš u promenljivu, u tom slučaju YAHOO.myProject.myModule. Sve privatne varijable/f-je koje bi definisao pre samog return-a će biti dostupne metodama tog javnog objekta (closures), jer će ih ove zatvoriti, wrap-ovati pre nego što se taj objekat vrati kao povratna vrednost. Možda bi ti bilo jasnije da je taj deo zapisan ovako:

Code:
YAHOO.myProject.myModule = function () {
   // private vars,methods

    var self = {};

    self.myPublicProperty = "I'm accessible as YAHOO.myProject.myModule.myPublicProperty.";
    self.myPublicMethod = function () {
        YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");
    };

    return self;
}();

Odgovor na temu

MilosDj
Milos Djuric
Belgrade

Član broj: 14174
Poruke: 307
*.dynamic.isp.telekom.rs.

+4 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{20.07.2011. u 19:50 - pre 155 meseci}

Hvala svima na odgovorima.
Mislim da sam shvatio nacin pravljenja namespace.

Za sada imam misk0v nacin "moduliranja" objekata.

Drugi nacin bi valjda bio:

Code:
var timer = (function () {

  var lokalno_globalnal;
  function Timer () {... = new nj();}
  function nj(){..}

return Timer;    // onda u kodu new, ...
}());

i onda
var t = new timer();

Ako se neko seti boljeg nacina, nek slobodno napise :)

I'm not in this world to live up to your expectations and you're not in this world to live up to mine.

Odgovor na temu

misk0
.: Lugano :. _.: CH :.

SuperModerator
Član broj: 634
Poruke: 2824
*.adsl.ticino.com.

ICQ: 46802502

+49 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{20.07.2011. u 20:43 - pre 155 meseci}

Za namespace-e sam mislio nesto ovako

Code (javascript):

if (!com) {

  var com = {};

}

if (!com.myapp) {

 com.myapp = {};

}

if (!com.myapp.component) {

 com.myapp.component = {};

}

tako imas name space com.myapp.component gdje kasnije stavljas sve objekte.
Mozes tako kreirati i strukturu direktorija pa da imas sve slozeno i znas gdje se sta nalazi.

:: Nemoj se svadjati sa budalom, ljudi cesto nece primjetiti razliku ::

Odgovor na temu

MilosDj
Milos Djuric
Belgrade

Član broj: 14174
Poruke: 307
*.dynamic.isp.telekom.rs.

+4 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{20.07.2011. u 22:06 - pre 155 meseci}

Za sada sam izabrao var namespace = new function () {......}. Malo izmenio imena i sve nekada globalne funkcije su pokrivene jednim imenom. Ok, nije lose. Mali napredak.

Ali enkapsulacija... Sve ovo pisem jer sam ocekivao da cu se okoziti od menjanja koda i debagovanja. Na moju srecu proslo je iznenadjujuce glatko:
Samo sam prebacio 3 klase/funkcije u Timer {} snimio .js i sve je proradilo iz prve!

Nije mi jasno zasto i dalje vucem C++ klasni mentalitet u glavi?! :(

Jos jedan dobar link:

http://www.klauskomenda.com/co...t-programming-patterns/#module

_{[Ovu poruku je menjao MilosDj dana 20.07.2011. u 23:37 GMT+1]}

I'm not in this world to live up to your expectations and you're not in this world to live up to mine.

Odgovor na temu

MilosDj
Milos Djuric
Belgrade

Član broj: 14174
Poruke: 307
*.dynamic.isp.telekom.rs.

+4 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{21.07.2011. u 00:15 - pre 155 meseci}

Hmmm, a kako se stavljaju klase/funkcije na namespace

Npr imam function Audio (){} koju uvek instanciram sa var a = new Audio('src', 'id');.

Sad sam se napravio pametan pa sam i Audio prebacio u onaj namespace

Prestala je da se instancira.

new ns.Audio();
new ns.Audio.constructor();

Napravio sa u ns pomocnu funkciju koja deklarise Audio i vraca return new Audio(); ali ni to nesto nece...

Resenje je?

I'm not in this world to live up to your expectations and you're not in this world to live up to mine.

Odgovor na temu

MilosDj
Milos Djuric
Belgrade

Član broj: 14174
Poruke: 307
*.dynamic.isp.telekom.rs.

+4 Profil

Re: Pravilna enkapsulacija i malo vise od toga... Kako i zasto?

^{21.07.2011. u 14:08 - pre 155 meseci}

Ahem, izvinjavam se svima...

Resenje: treba resetovati FF posle 2 dana neprekidnog programiranja

Onda sve volshebno proradi

var a = new ns.Audio(); radi besprekorno :-D

I'm not in this world to live up to your expectations and you're not in this world to live up to mine.

Odgovor na temu