Rozšírte si Firefox a Thunderbird - sami! - 4 (JavaScript)

22. 8. 2005 | Matej Gagyi | Programování | 9724×

Celý Firefox a ostatné produkty Mozilly sú poskladané z tried napísaných v C++, ktoré samy o sebe skoro nič nevedia. Do kopy ich spája JavaScript, výnimočný skriptovací jazyk. Dnes vám ho priblížim a odhalím jeho tajomstvá.

Skoro od úplného začiatku štartu je Mozilla ovládaná JavaScriptom. Preto je to aj trochu pomalá, ale za to nevídane flexibilná aplikácia. JavaScript sám o sebe nič nevie, len nejaké počítanie. Ak ho ale obalíte funkčnými kúskami aplikácie, dostanete rýchlo vyvinutú aplikáciu.

Spojenie komponentov Mozilly s JavaScriptom vykonáva systém XPConnect. O ňom si ale dnes nebudeme hovoriť, je to zložitá téma na niekoľko dielov a možno pre úplne iný seriál.

Vo vnútri Mozilly je JavaScript vykonávaný enginom SpiderMonkey, ktorý je písaný v jazyku C a je veľmi výkonný. Existuje aj menej výkonná verzia enginu Rhino, pre Jazyk Java.

JavaScript toho robí naozaj veľa, ale špecifické úlohy, ako kreslenie na obrazovku a sieťovú komunikáciu prenecháva komponentom v jazyku C++. Ak chceme Firefox rozširovať, JavaScriptu sa nevyhneme a musíme si ho do detailov prebrať.

Na pochopenie dnešného článku musíte mať základné znalosti JavaScriptu. Ale ani jazyk C, alebo C++ vám nebude na škodu. Techniky zmienené v dnešnom článku však nie je potrebné pochopiť.

Pripravení? Tak poďme na to!

JavaScript

JavaScript zdedil svoj vzhľad od jazyka C a preto vyzerá ako procedurálny jazyk. To je ale omyl, JavaScript je prototypový jazyk a má trochu bližšie k funkcionálnym jazykom ako C.

Amatérski dizajnéri internetových stránok s ľahkosťou použivajú JavaScript a vôbec si neuvedomujú jeho silu a aké problémy prináša vývoj aplikácie takej veľkej ako Firefox. Pri programovaní v JavaScripte musíte poznať techniky s ním spojené a dodržovať disciplínu tak, ako pri každom inom jazyku.

Prototypy a procedurálne črty jazyka

Prototyp je množina všetkých premenných objektu. JavaScript nepozná triedy, len dynamické prototypy. Existuje len jeden druh objektov a to je objekt. Objekty sa vytvárajú jednoduchým použitím názvu premennej.

Celý program je spustený v globálnej funkcii, alebo aj globálnom rozsahu (ang. global scope). Každá funkcia, hlavne globálna, môže vo svojom tele definovať funkcie a premenné. Tie sú prístupné len z podfunkcií danej funkcie.

Ak je v niektorej podfunkcii potrebná prechodná premenná, je potrebné ju deklarovať kľúčovým slovom var. Ak toto slovo nie je použité a v nadfunkcii už existuje premenná s rovnakým menom, zostane pri zápise hodnoty do tejto premennej nová hodnota zapísaná aj po ukončení podfunkcie.

function nadfunkcia() {
  var premenna = 2;

  funkcia podfunkcia(n) {
    // nová premenná
    //var premenná = n;

    // premenná z nadfunkcie
    premenná = n;
  }

  podfunkcia(5);

  // Otvoríme okno a pozrieme si hodnotu premennej
  alert(premenna);
}

Funkcie sú objekty. Funkciu môžete vložiť do premennej:

var func = function { kod };

Funkcie môžete dynamicky vytvárať:

var func = new Function([arg1, arg2, ..., argn], "kod");

Alebo môžete vykonať kód priamo pomocou funkcie eval:

eval("kod");

Funkcia eval je však zložitejšia časť JavaScriptu, preto si o nej povieme niekedy nabudúce.

Čo sa týka procedurálnych čŕt jazyka, platia skoro rovnaké princípy ako v jazyku C:

function factorial(n) {
    var fact = 1;
    for(; n > 0; fact *= n--) ;
    return fact;
}

Funkcia factorial počíta faktoriál čísla n (n!). Ostrieľaný programátor hneď spozná, že je písaná céčkovým štýlom.

Prototypy a objekty

Každý objekt má dynamický počet premenných, ktoré môžu byť tiež objekty, alebo primitívne typy. K premenným objektov sa pristupuje notáciami objekt.premenná a objekt[kľúč], pričom platí:

objekt.premenná == objekt["premenná"]

Za zmienku stojí typová konverzia:

objekt[1] == objekt[01] == objekt["1"] != objekt["01"]

Pozor, notácie objekt.1, aj objekt.01 sú syntaktické chyby!

V JavaScripte je vždy prístupný bezmenný objekt označovaný [[scope]]. Scope, čiže rozsah, obsahuje všetky lokálne premenné funkcie. Cez tento objekt sa pristupuje na všetky lokálne premenné.

Kľúčom môže byť akýkoľvek objekt, pričom sa rozlišuje konštruktor, ktorý ho vytvoril. Takýmto spôsobom je možné vytvárať hashovacie tabuľky.

Uzávierky (closures)

Uzávierky, ang. closures, je vlastnosť prevzatá z funkcionálnych jazykov. Ide o funkcie, ktoré sú uzavreté do istého parametrizovaného prostredia. V JavaScripte sú to funkcie, ktoré sa nachádzajú vo vnútri iných funkcií, používajú premenné svojich nadfunkcií a sú prístupné z vonkajšku svojej nadfunkcie.

V ľudskej reči to znamená, že dáte funkcii časť parametrov a zvyšné môžete doplniť neskôr. Je to užitočné pri objektovo orientovaných postupoch (uzatváranie kódu) a pri optimalizácii výkonu.

function combinations(n) {
    // vypočítame n!
    var nf = factorial(n)

    // Vrátime odkaz na vnútornú funkciu
    return function(k) {
        return nf / (factorial(k) * factorial(n - k));
    }
}

// Koľko košických cestovných lístkov musím nazbierať,
// aby som mal všetky ich kombinácie a mohol cestovať zadarmo?
// Cestovný lístok MHD v Košiciach má 9 políčok a
// 4 z nich sa predierkujú

alert(combinations(9)(4)); // Koľko rôznych priemerov môže mať žiak z predmetu
// na konci roka, ak nazbiera 3 až 5 známok?

var closure = combinations(5);
alert(closure(3) + closure(4) + closure(5));

Funkcia combinations(n)(k) počíta kombinácie n prvkov k-tej triedy. Predpokladajme, že potrebujeme vypočítať viac kombinácií n prvkov. V tom prípade sa algoritmus zbavil opakovaného počítania factoriálu n.

Po ukončení funkcie combinations(n), zostáva jej vnútorná funkcia pripravená na volanie a pamätá si všetky premenné tak, ako ich zanechala funkcia conbinations(n). Hodnoty premenných môže aj čítať, aj meniť.

Uzávierky umožňujú použitie objektovo orientovaných techník v JavaScripte. Verejné funkcie totiž vidia do vnútra svojho konštruktora a vidia ho v stave, v ktorom skončil svoje volanie.

OOP techniky

V diskusiách je často možné sa stretnúť s tvrdením, že JavaScript nie je OO jazyk. Majú pravdu, pretože je zamýšlaný prototypovo, ale nanešťastie dotyčné tvrdenie vychádza z úplne mylných faktov.

V JavaScripte platí, že nič nie je privátne. Dôležitá vlastnosť OO jazykov sú privátne premenné a metódy. JavaScript dokáže aj túto vlastnosť elegantne emulovať. Konštruktor síce vytvorí v objekte this verejné metódy, ale privátne môže vytvoriť ako premenné funkcie pomocou kľúčového slova var, alebo function.

Všetky verejné metódy objektu vidia do konštruktora a vidia ho v stave, v akom sa ukončilo jeho volanie. Verejné funkcie vidia, a tým pádom môžu pristupovať k premenným a metódam, ktoré sú definované v konštruktore.

function Organism() {
	/* privátna časť */
 	var health = 100;
	function _getHealth() {
		return health;
	}

	function _setHealth(h) {
		health = h;
	}

	/* verejná časť */
	this.getHealth = function () {
		return _getHealth();
	};

	this.setHealth = function(h) {
		if(health == 0) {
			throw("ResurectionException");
		} else if(h <= 0) {
			throw("MurdException");
		} else {
			_setHealth(h);
		}
	};

	this.kill = function() {
		_setHealth(0);
	};
}

Náš konštruktor vytvorí objekt žijúceho organizmu. Organizmus má zdravie - privátnu premennú health. Zdravie je meniteľné pomocou prístupových metód getHealth, setHealth() a kill(). Organizmus môžete zabiť iba funkciou kill(), ale potom sa vám ho už nepodarí oživiť.

Metóda setHealth() vyhodí výnimku pomocou príkazu throw() ak sa pokúsite organizmus zabiť, alebo oživiť. Tu je ukážka odchytávania výnimok a použitia organizmu:

var microb = new Organism();
microb.setHealth(50);
alert(microb.getHealth());

try {
  microb.setHealth(0); // Nesmieme organizmus zabiť ...
} catch(e) {
  print(e); // .. odchytíme výnimku
}

microb.kill();
alert(microb.getHealth());

try {
  microb.setHealth(100); // organizmus je už mŕtvy ...
} catch(e) {
  print(e); // ... odchytíme výnimku
}

Premenné prototype, constructor a dedičnosť

Ak sa snažíte prečítať hodnotu z premennej objektu object.premenna, ktorý nemá požadovanú premennú, JavaScript sa túto premennú pokúsi nájsť v objekte object.prototype. Ak ju nenájde, skúsi object.prototype.prototype a takto pokračuje až kým nenarazí v tomto reťazci na hodnotu null.

Premennú prototype má každý object a prenáša sa z konštruktorov na nové objekty. Taktýmto spôsobom sa dá docieliť klasická dedičnosť:

function Human(name) {
  this.name = name ? name : "Nobody";

  this.talk = function talk(text) {
    alert(name + " say's: " + text);
  }
}

Human.prototype = new Organism();

Konštruktor Human vytvorí triedu človeka a ten okrem toho, že žije, má aj meno a vie hovoriť.

Viacnásobné dedenie je možné docieliť volaním nadkonštruktorov z konštruktora. Premenná this sa presunie z volania konštruktora do nadkonštruktora a ten nastaví požadované premenné a metódy objektu:

function Mechanism() {
  this.eval = function(expr) {
    alert(eval(expr));
  }
}

function RoboCop {
  Human();
  Mechanism();
}

RoboCop má zdravie a vie rozprávať, to zdedil od konštruktoru Human(). Okrem toho vie robiť aj zložité výpočty presne tak, ako Mechanism().

Premenná object.constructor má ako hodnotu konštruktor, ktorý objekt vytvoril. Nedá sa však efektívne identifikovať nadtriedy objektov a tým pádom ani používať viacnásobné dedenie na miestach, kde je do úvahy braná premenná constructor.

Záver

Dnešný článok doslova sumarizuje všetky dôležité vlastnosti jazyka JavaScript. Všetky sú primerane užitočné pri tvorbe rozšírení a uľahčia vám prácu v rôznych situáciách.

My však väčšinu z týchto techník v tutoriáloch používať nebudeme. Článok je veľmi zložitý a nechcem vás nútiť rozumieť všetkým jeho častiam. Ak ste teda nepochopili obsah článku, nevadí.

Nabudúce si pripravíme jednoduchší tutoriál a pridáme nášmu užitočnému rozšíreniu nastavenia vzhľadu. A možno aj trochu viac.

       

Komentáře

[schrapnel]

mato mato :)) si dobry, ale aj tak si myslim, ze by si si mal najst zenu ;)

[elviin]

Jak funguje vnitřní mechanismus zachytávání výjimek? Jak určim jakýho typu výjimku požaduju? Je to tedy něco jako elipsa v C++?

try {
}
catch(...){
}

[elviin]

Samozrejme ... jeden druh objektu, ale nejaka diferenciace-specifikace neni treba?

[Yin]

Napísal som čo bolo v mojích silách (článok, ktorý sa zaoberal aj týmito témami bol 2,5 krát taký dlhý). Uvedomte si 0.1% náznaku typovej kontroly v JS.

Predpokladajme, že komponenty aplikácie (C,C++,Java,...) Vám dodajú do JavaScriptu správne dátové typy. Nemusíte sa o typy veľmi starať, aj keď JS ponúka mnoho techník, ako rozlišovať Objekty.. JS je Prototypový jazyk, nie OO, ani proceduránly, ani Funkcionálny,...

[Yin]

Ak pracujete na projekte, kde sa používa JavaScript, pravdepodobne sú všetky JS komponenty (triedy, časi programu, ...) vyvýjané na jednom pracovisku. Pri návrhu si musíte určiť akým spôsobom budete (a či vôbec potrebujete) rozoznávať jednu výnimku od druhej. (rozličný začiatok textu, špeciálny objekt, ...)

Na FLOSS projekte je štýl JS kódu často viac procedurálne orientovaný... teda aspoň na toľko nakoľko to dovolí povaha JS.

[Marcel Šebek]

Nemá být proměnná ve funkci faktoriál inicializovaná na 1? Takhle to musí vždy vrátit 0.

[Yin]

Áno, moja chyba... popis hovorí za seba, bola to len ukážka!