Filip Cherecheș-Toșa
Follower of Jesus, husband, father of three, builder

Object Oriented JavaScript. Closures.

09 Jun 2007

JavaScript e un limbaj frumos si elegant, in ciuda problemelor de design pe care le are! Ma gandeam sa vorbesc un pic despre stilul pe care-l abordez atunci cand scriu cod JS. E un stil inspirat din [Yahoo! UI Library][1] si de prezentarile lui [Douglas Crockford][2].

[1]: http://developer.yahoo.com/yui/ “” [2]: http://developer.yahoo.com/yui/theater/ “”

Sunt mereu dornic sa-mi imbunatatesc codul si sa-mi largesc cunostintele si accept cu bucurie orice feedback!

In primul rand, am pus o pagina de demo (view source pentru cod) [aici][3].

[3]: http://www.filipcte.ro/work/playground/oo-js/ “”

Closures

Pentru cei care nu sunteti familiari cu termenul “closure”, am o explicatie scurta si practica: conceptul de “closure” delimiteaza un namespace… in programare :P .

Codul

Hai sa-ncepem prin crearea unei variabile pur globale:
var truly_global = “The one and only!”;

In continuare, vrem sa cream un namespace, cu sintaxa urmatoare:
(function() { /* cod JS */ })();

Asadar, primul namespace:
(function() {
// initializam o variabila globala in acest namespace
var global_var = “I’m so global!”;

alert(“starting… ”   global_var);

	

// in JS, valoarea unei “variabile” este o functie  
tester = function() {  
// chiar daca are acelasi nume, urmatorul “global_var”  
// este o variabila locala, diferita de “global_var”  
// definita global in acest namespace.  
var global_var = “I’m local now”;  
alert(“testing… ”   global_var);

	

global_var = “I’m still local!”;  
alert(“testing… ”   global_var);  
};

	

// executam functia “tester”  
tester();

	

// JS este un limbaj de programare pur object-oriented,  
// iar membrii pot fi atat variabile simple, cat si metode complexe  
myObject = {  
setting: “foo”,

	

init: function() {  
alert(“initializing… ”   global_var);  
},

	

setup: function() {  
alert(this.setting);  
}
	

};

	

// testam obiectul  
myObject.init();  
myObject.setup();

	

// testam variabila definita global, indiferent de namespace  
alert(truly_global);  
})();  
Scriind codul in aceasta maniera, putem dormi linistiti, stiind ca nici o alta bucata de cod JavaScript din site-ul/aplicatia noastra nu va interfera.

	

Dar hai sa testam asta, prin crearea unui nou namespace:  
    (function() {  
    // verificam daca exista variabila “global_var”,  
    // definita in namespace-ul anterior  
    try {  
    alert(global_var);  
    } catch(e) {  
    alert(e);  
    }
    
    	
    // ea nu exista, asa ca o cream aici  
    var global_var = “I’m so global!”;  
    alert(global_var);  
    })();
    
    	
    
    // desigur, regasim variabila “truly_global” definita in prima linie  
    alert(truly_global);
    
    	
    
    #### Concluzii
    
    	
    
    Doua, dar bune:
    	
    
    
    		
    1.  JavaScript este, in esenta sa, un limbaj orientat pe obiecte. A scrie cod JS non-OO e un pacat impotriva limbajului! ![:P][4] 
    			
    2.  Ca si principiu de “best practice”, recomand folosirea de closures pentru a preveni interferente neasteptate si bug-uri stupide.
    	
    
    	
    
    Happy JavaScript coding! :) 
    
    	
    
    **Later update:**  
    Recomand cu toata caldura [Javascript Kata][6], site ce contine MULTA informatie BUNA despre JavaScript.

[6]: http://www.javascriptkata.com/ “”

Alte articole