Acasa »
  • Blog
    • »
  • Articole
    • » Un-cod-mai-usor-de-intretinut-cu-javascript-module-design-pattern

Un cod mai usor de intretinut, cu module design pattern

| Acasa | Tutoriale JavaScript
Post Title

      M-am gandit sa scriu accest articol doarece o mare parte din cei pe care ii cunosc, urasc javascript-ul din cauza ca il considera "haotic", mai ales cei ce sunt obisnuiti cu oop(php de exemplu).

      Modularizarea codului javascript nu e altceva decat "stocarea" codului intr-un container, ceva asemanator unei clase din oop. Acesta ne da posibilitatea  sa accesam anumie proprietati doar prin anumite functii publice, foarte asemanator cu ce se intampla in oop.

    Crearea efectiva a modului se face printr-o functie anonima care se auto apeleaza :

  1.  
  2. (function() {
  3.  
  4.     //proprietati private
  5.  
  6.     //metode private
  7.  
  8.     //returnarea metodelor publice
  9.  
  10. }());

Iar daca ne-am gandi la un exemplu clar atunci am avea

  1.  
  2. var Utilizator = (function() {
  3.  
  4.     //proprietati private
  5.     var prop = {
  6.         nume: '',
  7.         varsta: 10,
  8.         tipuri: []
  9.     }
  10.  
  11.     //metode private
  12.     function verificaTipurile() {
  13.  
  14.         var tipuri = prop.tipuri;
  15.  
  16.         if (tipuri.indexOf('admin') != -1 && tipuri.indexOf('moderator') != -1) {
  17.             return true;
  18.         }
  19.         return false;
  20.     }
  21.  
  22.     //returnarea metodelor publice
  23.     return {
  24.  
  25.         set: function(tip) {
  26.  
  27.             //args to array
  28.             arguments = Array.prototype.slice.call(arguments);
  29.  
  30.             if (tip === 'tipuri') {
  31.  
  32.                 prop.tipuri = arguments.slice(1,arguments.length);
  33.  
  34.                 if (verificaTipurile(prop.tipuri)) {
  35.                     prop.tipuri = [];
  36.                     console.log('Este inutila setarea rankului de moderator daca este deja setat admin')
  37.                     return;
  38.                 }
  39.  
  40.                 return;
  41.             }
  42.  
  43.             if (prop[tip] !== undefined) {
  44.                 prop[tip] = arguments[1] || '';
  45.             }
  46.  
  47.         },
  48.         get: function(tip) {
  49.  
  50.             if (prop[tip] !== undefined) {
  51.                 return prop[tip];
  52.             }
  53.         }
  54.     };
  55.  
  56. }());

     Daca o sa rulati in consola de la browser codul de mai sus o sa vedeti ca este returnat un Obiect de tipul 

  1.  
  2. Utilizator
  3. Object {set: function, get: function}

      Daca incercati sa accesati proprietatea "prop" sau functia "verificaTipurile" vor fi "undefined" dar daca o sa va uitati peste cod ele sunt folosite in functia get si set a obiectului, astfel putem spune ca sunt private pentru exterior dar pot fi accesate local in modul

       In momentul de fata nu putem crea mai multe "obiecte" ale "clasei", asta ar fi un dezavantaj si o deosebire fata de clasele din oop, insa si in js se poate folosi operatorul "new" insa pe o functie iar noi returnam un obiect asa ca e suficient sa facem ca modulul nostru sa returneze o functie care la randul ei sa faca obiectul de get si set.

Cateva exemple cum se poate face asta:

  1.  
  2. var Utilizator = (function() {
  3.  
  4.     //proprietati private
  5.     var prop = {
  6.         nume: '',
  7.         varsta: 10,
  8.         tipuri: []
  9.     }
  10.  
  11.     //metode private
  12.     function verificaTipurile() {
  13.  
  14.         var tipuri = prop.tipuri;
  15.  
  16.         if (tipuri.indexOf('admin') != -1 && tipuri.indexOf('moderator') != -1) {
  17.             return true;
  18.         }
  19.         return false;
  20.     }
  21.  
  22.     //returnarea metodelor publice
  23.     return function() {
  24.         return {
  25.  
  26.             set: function(tip) {
  27.  
  28.                 //args to array
  29.                 arguments = Array.prototype.slice.call(arguments);
  30.  
  31.                 if (tip === 'tipuri') {
  32.  
  33.                     prop.tipuri = arguments.slice(1,arguments.length);
  34.  
  35.                     if (verificaTipurile(prop.tipuri)) {
  36.                         prop.tipuri = [];
  37.                         console.log('Este inutila setarea rankului de moderator daca este deja setat admin')
  38.                         return;
  39.                     }
  40.  
  41.                     return;
  42.                 }
  43.  
  44.                 if (prop[tip] !== undefined) {
  45.                     prop[tip] = arguments[1] || '';
  46.                 }
  47.  
  48.             },
  49.             get: function(tip) {
  50.  
  51.                 if (prop[tip] !== undefined) {
  52.                     return prop[tip];
  53.                 }
  54.             }
  55.         };
  56.     };
  57.  
  58. }());

Sau

  1.  
  2. (function() {
  3.  
  4.     //proprietati private
  5.     var prop = {
  6.         nume: '',
  7.         varsta: 10,
  8.         tipuri: []
  9.     }
  10.  
  11.     //metode private
  12.     function verificaTipurile() {
  13.  
  14.         var tipuri = prop.tipuri;
  15.  
  16.         if (tipuri.indexOf('admin') != -1 && tipuri.indexOf('moderator') != -1) {
  17.             return true;
  18.         }
  19.         return false;
  20.     }
  21.  
  22.     //returnarea metodelor publice
  23.     var toReturn = {
  24.  
  25.         set: function(tip) {
  26.  
  27.             //args to array
  28.             arguments = Array.prototype.slice.call(arguments);
  29.  
  30.             if (tip === 'tipuri') {
  31.  
  32.                 prop.tipuri = arguments.slice(1,arguments.length);
  33.  
  34.                 if (verificaTipurile(prop.tipuri)) {
  35.                     prop.tipuri = [];
  36.                     console.log('Este inutila setarea rankului de moderator daca este deja setat admin')
  37.                     return;
  38.                 }
  39.  
  40.                 return;
  41.             }
  42.  
  43.             if (prop[tip] !== undefined) {
  44.                 prop[tip] = arguments[1] || '';
  45.             }
  46.  
  47.         },
  48.         get: function(tip) {
  49.  
  50.             if (prop[tip] !== undefined) {
  51.                 return prop[tip];
  52.             }
  53.         }
  54.  
  55.     }
  56.  
  57.     window.Utilizator =  function() {
  58.         return toReturn;
  59.     };
  60.  
  61. }());

Sau chiar 

  1.  
  2. var Utilizator = (function() {
  3.  
  4.     return function() {
  5.         //proprietati private
  6.         var prop = {
  7.             nume: '',
  8.             varsta: 10,
  9.             tipuri: []
  10.         }
  11.  
  12.         //metode private
  13.         function verificaTipurile() {
  14.  
  15.             var tipuri = prop.tipuri;
  16.  
  17.             if (tipuri.indexOf('admin') != -1 && tipuri.indexOf('moderator') != -1) {
  18.                 return true;
  19.             }
  20.             return false;
  21.         }
  22.  
  23.         //returnarea metodelor publice
  24.         return {
  25.  
  26.             set: function(tip) {
  27.  
  28.                 //args to array
  29.                 arguments = Array.prototype.slice.call(arguments);
  30.  
  31.                 if (tip === 'tipuri') {
  32.  
  33.                     prop.tipuri = arguments.slice(1,arguments.length);
  34.  
  35.                     if (verificaTipurile(prop.tipuri)) {
  36.                         prop.tipuri = [];
  37.                         console.log('Este inutila setarea rankului de moderator daca este deja setat admin')
  38.                         return;
  39.                     }
  40.  
  41.                     return;
  42.                 }
  43.  
  44.                 if (prop[tip] !== undefined) {
  45.                     prop[tip] = arguments[1] || '';
  46.                 }
  47.  
  48.             },
  49.             get: function(tip) {
  50.  
  51.                 if (prop[tip] !== undefined) {
  52.                     return prop[tip];
  53.                 }
  54.             }
  55.  
  56.         }
  57.     }
  58.  
  59. }());
  60.  

Acum putem instantia cate obiecte dorim ale "clasei/modulului" de mai sus :

  1.  
  2. var angajat = new Utilizator();
  3. var angajat2 = new Utilizator();
  4. var mp = new Utilizator();
  5. mp.set('nume','MPP');
  6. mp.get('nume');
  7. mp.set('tipuri', 'admin','moderator') //o sa primiti eroare 
  8. mp.set('tipuri', 'utilizator', 'admin');
  9. angajat.set('nume', 'Angajat');
  10. angajat.get('nume');
  11. angajat.tipuri('tipuri', 'angajat');

Pentru a pasa date de la un modul la altul sau date din exterior se folosesc parametrii functiei anonime 

  1.  
  2. var nume = 'Micul programator';
  3. var salutare = (function(n) {
  4.  
  5.     var sal = 'Buna numele meu este: '+ n;
  6.     return function() {
  7.         console.log(sal)
  8.     }
  9.  
  10. }(nume));
  11.  
  12. salutare();

Sau

  1.  
  2. var angajat = new Utilizator();
  3. angajat.set('nume', 'Micul Programator');
  4. var salutare =(function(a) {
  5.  
  6.     var sal = 'Buna numele meu este: '+ a.get('nume');
  7.     return function() {
  8.         console.log(sal)
  9.     }
  10.  
  11. }(angajat));
  12.  
  13. salutare();

Cam atat in acest tutorial o sa  mai dau ceva detalii in urmatoarele articole despre "Mostenire".

Autor articol
Site : micul-programator.ro
Ştiinţa fără religie este şchioapă, religia fără ştiinţă este oarbă (Albert Einstein)

Articolul anterior

Articolul urmator


Topul limbajelor de programare
Topul limbajelor de programare
Protectia xss
Protectia xss
Ajax cu Jquery tutorial 1
Ajax cu Jquery tutorial 1
Validari cu javascript [ Partea I, pentru incepatori ]
Validari cu javascript [ Partea I, pentru incepatori ]

Acest articol nu este comentat, fii primul care o face

Trebuie sa fii logat sa poti lasa un comentariu Autentificare Inregistrare Logare cu Facebook
Navigare

Online

Utilizatori
Vizitatori 0
top