abclinuxu.cz AbcLinuxu.cz itbiz.cz ITBiz.cz HDmag.cz HDmag.cz abcprace.cz AbcPráce.cz
AbcLinuxu hledá autory!
Inzerujte na AbcPráce.cz od 950 Kč
Rozšířené hledání
×
dnes 14:00 | Nová verze

Bylo vydáno openSUSE Leap 15.2. Přehled novinek v nejnovější verzi této linuxové distribuce v do češtiny přeloženém oznámení o vydání a v poznámkách k vydání.

Ladislav Hagara | Komentářů: 0
dnes 12:44 | Nová verze

Apache Guacamole, řešení pro vzdálený přístup k počítačům pomocí protokolů VNC, RDP a SSH z webového prohlížeče, bylo vydáno ve verzi 1.2.0. Přehled novinek v oficiálním oznámení. Zdůraznit lze podporu SAML 2.0, Wake-on-LAN, nové rozhraní pro přepínání mezi sezeními nebo překlad webového rozhraní do češtiny.

Ladislav Hagara | Komentářů: 0
včera 22:55 | Komunita

Nadace Raspberry Pi oznámila, že OpenVX 1.3 API lze nově používat také na Raspberry Pi. OpenVX je standard pro akceleraci aplikací počítačového vidění. Vyzkoušet lze ukázkové příklady.

Ladislav Hagara | Komentářů: 0
včera 22:11 | Zajímavý článek

Možná jste taky někdy zápasili s tiskem formulářů nebo šablon, které pořád ne a ne vyjít ve správné velikosti. Článek Tisk v přesném měřítku (PDF, PPD, CUPS) popisuje příběh hledání jedné takové chyby v GNU/Linuxu.

xkucf03 | Komentářů: 5
včera 08:00 | Nová verze

Byla vydána nová verze 4.8 živé linuxové distribuce Tails (The Amnesic Incognito Live System), jež klade důraz na ochranu soukromí uživatelů a anonymitu. Přehled změn v příslušném seznamu. Tor Browser byl aktualizován na verzi 9.5.1. Thunderbird na verzi 68.9.0. Linux na verzi 5.6.0. Opravena byla řada bezpečnostních chyb.

Ladislav Hagara | Komentářů: 1
30.6. 23:11 | Zajímavý projekt

Na Kickstarteru byla spuštěna kampaň na podporu tabletu CutiePi postaveného na Raspberry Pi, konkrétně na Compute Module 3+ Lite. Předobjednat jej lze za 198 dolarů. Expedice je plánována na listopad.

Ladislav Hagara | Komentářů: 4
30.6. 22:11 | Zajímavý článek

Na serveru Techrights.org vyšel článek The GNU Project is Bleeding Into Microsoft, který upozorňuje na podezřele se množící případy projektů, které jsou přesměrované z webových stránek GNU na GitHub (proprietární software a služba provozovaná Microsoftem). Článek poukazuje i na to, že k řadě přesměrování došlo po tom, co byl Richard Stallman (zakladatel hnutí GNU a nadace FSF) „vyhnán“ z vedení FSF (resp. odstoupil po agresivní

… více »
xkucf03 | Komentářů: 58
30.6. 18:00 | Komunita

Projekt KDE přešel na GitLab. Vlastní instance již běží na invent.kde.org. Další info v příspěvku na blogu GitLabu. Před dvěma lety byl na GitLab přesunut vývoj GNOME.

Ladislav Hagara | Komentářů: 5
30.6. 17:33 | Nová verze

Vyšel webový prohlížeč Mozilla Firefox 78.0. Jedná se o vydání s prodlouženou podporou (ESR). Počínaje tímto vydáním jsou k dispozici také poznámky k vydání pro podniky, kde jsou shrnuty změny týkající se zabezpečení, kompatibility a chování zvláště právě v podnikovém prostředí. Jednou z takových změn je odstranění podpory TLS 1.0 a 1.1.

Fluttershy, yay! | Komentářů: 2
30.6. 13:22 | Zajímavý článek

Nová čísla časopisů od nakladatelství Raspberry Pi: MagPi 95 (pdf), HackSpace 32 (pdf) a Hello World 13 (pdf).

Ladislav Hagara | Komentářů: 2
Používáte některé open-source řešení [protokol] pro šifrovaný instant messaging?
 (23%)
 (30%)
 (5%)
 (11%)
 (18%)
 (6%)
 (12%)
 (26%)
Celkem 286 hlasů
 Komentářů: 32, poslední 28.6. 17:51
Rozcestník

BLite.js - Knihovna pro Javascript

24.1.2009 13:58 | Výběrový blog | poslední úprava: 31.8.2009 14:22

Tento blog byl smazán autorem

       

Hodnocení: 100 %

        špatnédobré        

Tiskni Sdílej: Linkuj Jaggni to Vybrali.sme.sk Google Del.icio.us Facebook

Komentáře

Vložit další komentář

24.1.2009 14:55 Vskutečnosti Saýc | skóre: 7
Rozbalit Rozbalit vše Re: BLite.js - Knihovna pro Javascript
To je husty. Proc to neni clanek?
24.1.2009 18:06 Leoš Literák | skóre: 74 | blog: LL | Praha
Rozbalit Rozbalit vše Re: BLite.js - Knihovna pro Javascript

Jojo, souhlas, Mame ideu, ze by bylo fajn mit moznost jednoduse primo vydat zapisek jako clanek. Ted to nejde a musi se vydat samostatny clanek.

Zakladatel tohoto portálu. Twitter, LinkedIn, blog, StackOverflow
24.1.2009 14:59 freshmouse
Rozbalit Rozbalit vše Re: BLite.js - Knihovna pro Javascript

Mimochodem, nedoporučí někdo nějakou dobrou česky psanou (anglicky psané beru až ve druhém kole -- preferuju češtinu) knihu o JS? Potřebuju se to naučit, takže nechci žádné knížky typu "Naučte se JavaScript a stavět ropné tankery během 5 dní"...

24.1.2009 15:49 pasmen | skóre: 45 | blog: glob | Praha
Rozbalit Rozbalit vše Re: BLite.js - Knihovna pro Javascript

Já mám JavaScript a AJAX od Johna Resiga (tvůrce JS knihovny jQuery), z Cpressu. Doporučuju.

24.1.2009 15:09 Andrej Herceg | skóre: 43
Rozbalit Rozbalit vše Re: BLite.js - Knihovna pro Javascript
Pri funkciách BLite.Dom.append a BLite.Dom.prepend by nebolo lepšie (a hlavne rýchlejšie) použiť fragmenty (a teda document.createDocumentFragment())?
24.1.2009 15:24 Deleted [8409] | skóre: 14 | blog: darkblog
Rozbalit Rozbalit vše Re: BLite.js - Knihovna pro Javascript
Ono by to chtělo revizi. BLite.Dom.append() atd neudělají nic, pokud je element null nebo undefined. Toto byl původní návrh, ve kterém jsem byl asi trochu ovlivněn systémem hromadného zacházení s elementy. Jenže časem se stalo to, že tento systém považuji za nedokonalý (pokud chci přidat prvek, tak přece musí existovat).

Jinak document.createDocumentFragment() je pro mě novinka, musím to prozkoumat. Pokud máte řešení jak to přepsat, tak to pošlete nebo vytvořte Issue na stránkách projektu, ať se na to nezapomene.

Koneckonců ke zveřejnění jsem se rozhodl právě kvůli čistce a stabilizaci celého API.
31.8.2009 15:06 backup
Rozbalit Rozbalit vše Záloha: BLite.js - Knihovna pro Javascript

Knihovna BLite vznikla jako velice tenká knihovna pro ulehčení práce s javascriptem. První otázka člověka, který se pohybuje v této oblasti určitě bude: "proč další knihovna, když jich jsou desítky" ? Odpověď na tuto otázku je tento zápisek, posuďte sami... (jedná se o dlouhý zápisek)

Úvod

Každý, kdo se zabývá psaním webových stránek, ve kterých je potřeba trochu interaktivity, potřebuje nějakou knihovnu, o kterou se může opřít. Dnes je situace ale taková, že knihovny toho nabízejí mnohokrát víc, než programátor potřebuje, a to se projevuje i na samotné velikosti těchto knihoven. Některé knihovny se snaží pokrýt hodně věcí, a v tom bude asi problém. Na webu se každým dnem setkávám s použitím opravdu velkých knihoven na triviální věci typu skrýt DIV nebo vytvořit nějakou DOM strukturu a přidat ji do kontejneru. Využití velkých knihoven může více zatížit klientské CPU a zpomalit načítání stránek.

Při prozkoumání existujících řešení jsem přišel na to, že žádná knihovna nepokryje moje požadavky. Jediná možnost je kombinovat více knihoven na různé věci, ale u tohoto principu mi vadí nesourodost výsledného kódu a nevyužití mnoha částí těchto knihoven (stejný pohled může mít samozřejmě kdokoliv na BLite).

Filozofie BLite

Knihovna BLite byla navržená s ohledem na konečou velikost výsledého js souboru. Cílem bylo, aby se jednalo o čistě javascriptovou knihovnu (tedy žádné CSS jako např. u YUI) a aby se pomocí této knihovny daly psát jednoduše i složitější skripty.

Základní vlastnosti

  • Detekce prohlížeče (hlavně kvůli IE)
  • Spuštění kódu po načtení stránky (DOMReady)
  • Práce s DOM (sjednocení kódu pro vytváření elementů a manipulace s nimi)
  • Pokročilý DOM builder (toto potřebuje každý, ale ne v každé knihovně najdete něco takového)
  • Práce s událostmi (sjednocení kódu pro práci s událostmi, možnost přiřadit i kontext funkce (this) ve funkcích addListener(), ale zároveň i v removeListener() - toto byla podmínka)
  • Práce s CSS
  • Podpora pro AJAX
  • Podpora pro cookies

Pokročilé vlastnosti

  • Návrh objektově orientovaného systému, který se používá v toolkitu qooxdoo
  • Základní objekt, díky kterému můžou zděděné objekty využívat properties a vlastní události
  • Unikátní identifikace objektů zděděných ze základního (BLite.Object)

Filozofie

  • Nikdy nerozšiřovat nativní objekty (maximálně rozšiřovat IE o metody, které jsou v ecma)
  • Umožnit robustní návrh aplikací (objektově orientované programování, události)
  • Používat nativní javascript (try-catch, instanceof, typeof)

Co v BLite nenajdete

  • Hromadné funkce pro nastavování vlastností DOM elementů

Dokumentace a příklady

Detekce prohlížeče

Detekce prohlížeče je zatím omezená na internet explorer, který si některé věci implementuje po svém. Pro zjištění, zda se jedná o tento prohlížeč existuje objekt BLite.Browser, který obsahuje proměnné IE a OPERA. Tyto proměnné obsahují buď true nebo false (v případě, že se jedná o konkrétní prohlížeč či nikoliv). Obsahuje ještě metodu canvas(), pomocí které můžeme zjistit, zda prohlížeč podporuje tag <canvas>.

// Příklad provedení kódu jen pro IE
if (BLite.Browser.IE)
{
  alert("Jsem IE, nedodržuji standardy");
}
else
{
  alert("Nejsem IE, standardy se snažím dodržovat, ale občas taky něco uklouzne");
}

Spuštění kódu po načtení stránky (DOMReady)

Je vhodné spouštět přídavný javascriptový kód až po načtení stránky, zejména kvůli tomu, že je hotová DOM struktura. Někdy se dá řešit tento problém umístěním skriptu před konec elementu "body". Pro provedení kódu po spuštění kódu se používá funkce BLite.ready(fn), kde fn je funkce, která se má spustit. Funkci BLite.ready() je možné zavolat vícekrát a přiřadit tak více handlerů pro tuto událost.

// Příklad provedení skriptu po načtení stránky
BLite.ready(function()
{
  // tělo skriptu
  alert("Stránka načtená, a proto teď otravuju já");

});

Práce s DOM

Knihovna BLite se snaží usnadnit programátorovi čas a nervy při vytváření a manipulací s DOM. Mezi nejčastější operace je vytváření a zařazování elementů do existující DOM struktury. Pro vytvoření elementu se používá funkce BLite.Dom.create(tag, args) nebo jednoduše BLite.Dom.TAG(args), kde tag je jméno tagu a args jsou atributy elementu. Je možné vytvářet i prvky, kde má IE v některých jiných knihovnách problémy (input tag). Args je mocný parametr, díky kterému je možné přiřadit elementu při vytvoření i události, styly, text, html a další elementy. Mezi největší odlišnost od ostatních patří atribut "as", který bude vysvětlen v příkladech.

// Vytvoření různých elementů
var div = BLite.Dom.DIV({text:"Toto je DIV"});
var span = BLite.Dom.SPAN({html:"<b>Toto je SPAN</b>"});
var a = BLite.Dom.A({href: "http://kobalicek.com", text: "Odkaz"});

// ale také
var div = BLite.Dom.create("div", {text:"Toto je DIV"});
var span = BLite.Dom.create("span", {html:"Toto je SPAN"});
var a = BLite.Dom.create("a", {href: "http://kobalicek.com", text: "Odkaz"});

Jednalo se o velmi jednoduchý příklad, který by se dalo celkem jednoduše vytvořit i pomocí standardizovaných DOM funkcí. BLite ale umožňuje kromě standardních atributů i své vlastní. Nejjednodušší pro vysvětlení je atribut "children". Pomocí tohoto atributu je možné vložit do právě vytvářeného elementu další elementy.

// Vytvoření jednoduché DOM struktury
var dom = BLite.Dom.DIV({
  children: [
    BLite.Dom.DIV({text: "Já jsem první"}),
    BLite.Dom.DIV({text: "Já jsem druhý"}),
    // je možné vytvářet donekonečna
    BLite.Dom.DIV({children: [
      BLite.Dom.DIV({text: "A další div"})
    ]})
    // atd...
  ]
});

Aby toho nebylo málo, je možné při vytváření i přiřadit události.

// Handler pro událost (e = objekt události)
var onclick = function(e)
{
  alert("Klik");
  // zruší výchozí akci
  BLite.Dom.preventDefault(e);
};

// Vytvoření jednoduché DOM struktury s událostí. Po kliknutí na odkaz se provede
// handler, který zabrání výchozí akci (přejít na odkaz)
var dom = BLite.Dom.DIV({
  children: [
    BLite.Dom.A({
      href="#",
      text: "odkaz",
      events: { click: onclick }
    })
    // atd...
  ]
});

Mezi poslední rozšíření patří atribut "style", pomocí kterého lze modifikovat styl vytvořeného elementu. Opět je možné (jako u událostí) zadat více stylů.

// Vytvoření jednoduché DOM struktury s událostí a použití atributu "styles" pro modifikaci stylu
// vytvořeného elementu
var dom = BLite.Dom.DIV({
  children: [
    BLite.Dom.DIV({text: "Já nejsem vidět", styles: {display: "none" }}),
    BLite.Dom.DIV({text: "Já jsem vidět"}),
  ]
});

A to úplně poslední rozšíření je to nejzajímavější. Pomocí atributu "as" je možné asociovat vytvořený element do vybraného objektu (nejedná se o DOM, ale o uchování elementu v nějakém objektu pro snadný přístup). Toto se dá v praxi využít při objektově orietovaném designu aplikace. Zavolá se nějaká funkce, která vrátí objekt i s důležitými prvky. Nejlepší bude asi příklad.

// Příklad pro vytvoření komplexní struktury DOM včetně asociace vytvořených elementů

// Objekt, do kterého chceme asociovat DOM
var object = {};

// BLite dáme najevo, že chceme asociovat elementy k objektu pomocí funkce BLite.begin()
BLite.Dom.begin(object);

// vytvoření DOM struktury
BLite.Dom.DIV({
  as: "container"
  children: [
    BLite.Dom.DIV({as: "header"}),
    BLite.Dom.DIV({as: "body"}),
    BLite.Dom.DIV({as: "footer"})
  ]
});

// je nutné ukončit asociaci pomocí funkce BLite.end()
BLite.Dom.end()

// Nyní objekt "object" obsahuje 4 proměnné, které odkazujou na HTML elementy:
// - container
//   - header
//   - body
//   - footer

// K elementům je možné se kdykoliv dostat:
object.header.style.display = "none";
object.footer.style.display = "none";
object.body.style.color = "black";

// atd...

Doufám, že je popis DOM builderu vyčerpávající. Pokud se použijí funkce BLite.Dom.begin() a BLite.Dom.end(), objekt, do kterého se asociace objektů provádí, je taky kontext (this) handlerů událostí definovaných pomocí atributu "events".

Knihovna BLite obsahuje i další funkce pro manupulaci s DOM. Pro získání elementu podle id existuje funkce BLite.$(id) (jedná se o zkratku pro document.getElementById(id), některé knihovny zkracují až na znak $). Pro navigaci v DOM struktuře slouží tyto funkce:

  • BLite.Dom.first(e, ?tag) - Vrátí první element v "e" nebo undefined (pokud daný element neobsahuj žádné prvky). Pomocí volitelného parametru tag je možné specifikovat tag elementu, který hledáme, je tedy možné vrátit třeba první element s tagem DIV.
  • BLite.Dom.last(e, ?tag) - Vrátí poslední element v "e" nebo undefined (pokud daný element neobsahuj žádné prvky). Pomocí volitelného parametru tag je možné specifikovat tag elementu, který hledáme, je tedy možné vrátit třeba poslední element s tagem DIV.
  • BLite.Dom.parent(e, ?tag) - Vrátí rodiče elementu "e". Opět volitelný parametr tag
  • BLite.Dom.prev(e, ?tag) - Vrátí předchozí element elementu "e". Opět volitelný parametr tag
  • BLite.Dom.next(e, ?tag) - Vrátí následující element elementu "e". Opět volitelný parametr tag

Pro manipulaci se strukturou slouží tyto funkce:

  • BLite.Dom.append(e, ch) - Přidá element nebo pole elementů "ch" do elementu "e" (na konec).
  • BLite.Dom.prepend(e, ch) - Přidá element nebo pole elementů "ch" do elementu "e" (na začátek).
  • BLite.Dom.insertAfter(refNode, newNode) - Přidá element newNode za element refNode.
  • BLite.Dom.insertBefore(refNode, newNode) - Přidá element newNode před element refNode.
  • BLite.Dom.remove(e, ch) - Odstraní element "ch" v elementu "e"
  • BLite.Dom.childIn(e, ch) - Test, zda element "e" obsahuje element "ch" (jedná se o rekurzivní hledání)
  • BLite.Dom.clear(e) - Odstraní všechny elementy v "e"

Práce s událostmi

Pro práci s událostmi existují 2 hlavní funkce, BLite.Dom.addListener() a BLite.Dom.removeListener(). Pomocí první funkce se přidá handler události k určitému elementu a druhá funkce slouží k jeho odstranění. Návrh knihovny BLite je takový, aby bylo možné zadávat i kontext funkce (this) a při stejné kombinaci mít možnost odstranit handler. U jiných knihoven, kde přidání handleru neobsahuje kontext funkce a je nutné použít tzv. bind(), který obalí handler pomocnou funkcí, takto není možné odstranit handler.

// Příklad přidání handleru pro "click" událost

// nějaký objekt, který použijeme jako kontext
var object =
{
  // proměnná
  count: 0,
  
  // nějaký element, a jehož události chceme reagovat
  link: BLite.Dom.A({
    href="#",
    text: "Klikni"
  }),

  // handler
  onclick: function(e)
  {
    // nastaví text odkazu
    BLite.Dom.setText(this.link, "Už jenom " + (10 - this.count) + "x");

    // 10x se klikne na odkaz a handler se odstraní
    if (++this.count >= 10) BLite.Dom.removeListener(e);

    // Zabrání výchozí události
    BLite.Dom.preventDefault(e);
  }
};

// Přidá event handler
BLite.Dom.addListener(object.link, "click", object.onclick, object);

// Stejný způsob pro odebrání
BLite.Dom.removeListener(object.link, "click", object.onclick, object);

Myslím, že nemá cenu víc vysvětlovat. O událostech je možné na internetu hodně přečíst a knihova BLite jen usnadňuje operaci s nimi. Funkce BLite.Dom.preventDefault(e) a BLite.Dom.stopPropagation(e) jsou cross-browser funkce zastavení propagace událostí, které nepodporuje snad jen IE. Mezi další pomocné funkce patří BLite.Dom.eventTarget(e) a BLite.Dom.relatedTarget(e). Opět se jedná o cross-browser řešení drobné nekompatibility mezi IE a zbytkem světa.

Práce s CSS

Pro práci s CSS obsahuje knihovna BLite pár funkcí. Tyto funkce jsou snad ve všech knihovnách tak nemá cenu je moc rozebírat. Jedná se o BLite.Dom.addClass() a BLite.Dom.removeClass() pro přidání a odebrání stylu. K testování, jestli prvek obsahuje css styl souží BLite.Dom.hasClass() a jako zlepšení syntaxe je zde i funkce BLite.Dom.setClass(), která nastaví kompletní className daného elementu.

// Příklad práce s CSS

// nějaký element
var div = BLite.Dom.DIV();

// nastaví CSS třídu
BLite.Dom.setClass(div, "menu");
// přidá CSS třídu
BLite.Dom.addClass(div, "selected");
// odebere CSS třídu
BLite.Dom.removeClass(div, "menu");
// testuje CSS třídu (výsledek je v našem případě true)
alert(BLite.Dom.hasClass(div, "selected"));

AJAX

Podpora AJAXu je v dnešní době velmi důležitá. Knihovna BLite obsahuje funkci BLite.Request.send(), díky které je možné poslat asynchronní dotaz na server. Implementace používá XHTTPRequest nebo ActiveX (IE). Funkce má pouze jeden parametr, a to je objekt, který může obsahovat následující proměnné:

  • url - Url adresa, které pošteme požadavek.
  • method - Metoda ("POST" nebo "GET", výchozí je "GET").
  • data - Data (řetězec nebo slovník klíče a hodnoty).
  • success - Handler pro úspěch.
  • failure - Handler pro neúspěch.
  • context - Kontext (this) pro funkce success() a failure().
// Příklad poslání požadavku na server a reakci na odpověď ve formátu JSON
BLite.Request.send({
  url: "/url/adresa/",
  method: "POST",
  data: {
    page: 1,
    lang: "cz"
  },
  success: function(req)
  {
    // Úspěch
    alert("Úspěch");

    // Převod odpověďi na JSON
    var json = BLite.Json.decode(req.responseText);
    
    // ...
  },
  failure: function(req)
  {
    // Neúspěch
    alert("Neúspěch");
  },
  context: this
});

Objektově orientované programování

Javascript je sám o sobě objektově orientovaný jazyk, a dalo by se říct, že všechno, kromě primitivních typů, je objekt (i primitivní typ je objekt, ale jiný, než ho chápu já). Když jsem začal používat toolkit qooxdoo, objevil jsem neuvěřitelně flexibilní objektově orientovaný design, který jsem chtěl používat i v tradičních webových stránkách. Vytvořil jsem tedy podobný způsob pro vytváření objektů, jaký obsahuje qooxdoo.

BLite obsahuje funkci pro vytvoření třídy a základní třídu, ze které by měly vycházet všechny ostatní (ale nemusí to být pravidlo). Pro vytvoření třídy se používá funkce BLite.Object.define(classname, map). První parametr je jméno třídy i včetně jmenného prostoru (jako řetězec, třeba "mynamespace.MyClass"), druhý parametr je slovník, který může obsahovat tyto klíče:

  • extend - Objekt třídy, kterou rozšiřujeme. V případě, že není zadána, je použit nativní Object.
  • construct - Konstruktor.
  • destruct - Destruktor.
  • properties - Proměnné, kterým se vytvoří setter a getter.
  • members - Členské funkce.
  • statics - Statické funkce a proměnné.

Je toho celkem moc, tak se pokusím přiblížit, o co se jedná. Většinou se jako první začíná tím, co rozšiřujeme. K tomu se dá použít klíč extend. Samozřejmostí je, že můžeme použít operátor instanceof pro zjištění, jestli je instance instancí dané třídy. Další výhoda dědičnosti je metoda base() a self(), díky kterým je možné volat statické funkce třídy a funkce, které rozšiřujeme.

Klíče construct a destruct slouží pro implementaci konstruktoru a destruktoru. Konstruktor může obsahovat parametry a volá vždycky předešlý konstruktor. Destruktor je bezparametrická funkce, a nikdy nevolá předešlý desktruktor.

Klíč properties je mapa, která vždy obsahuje klíč (jméno property) a nastavení. Getter a setter bude automaticky vytvořen. Například pro property "label" budou automaticky vytvořené funkce "getLabel()" a "setLabel()". Je možné zadat funkci, která bude zavolána v případě, že zavoláme setter (setLabel) a změníme hodnotu property. Toto bude ukázané na příkladu, kde je možné nejlíp vidět čistotu tohoto designu.

Klíč members obsahuje členské funkce třídy a klíč statics obsahuje statické funkce a proměnné třídy.

// Jednoduchý příklad vytvoření třídy "A" v prostoru jmen "Namespace"
BLite.Object.define("Namespace.A",
{
  // Konstruktor
  construct: function()
  {
    // Nutnost volat předchozí konstruktor
    this.base(arguments);

    alert("Created");
  },
  
  // Členské metody
  members:
  {
    hello: function()
    {
      alert("Hello");
    }
  },
  
  // Statické metody
  statics:
  {
    PI: 3.14
  }
});

// Vytvoření objektu
var a = new Namespace.A();
// volání metod
a.hello();
// použití instanceof (vrátí true)
alert(a instanceof Namespace.A);
// statický prostor
alert(Namespace.A.PI); // 3.14

No není to jednoduché a čísté? Toto je samozřejmě jen špička ledovce. Největší výhody uvidíme při dědičnosti a definování properties. Každá třída vytvořená pomocí BLite.Object.define() může používat uvitř 2 speciální funkce. Jsou to base() a self(). Pomocí funkce base se zavolá zděděná funkce, pomocí funkce self se získá statický prostor třídy (Statický prostor se v javascriptu nedědí, takže třída B, která vychází z třídy A nemůže přistoupit ke statickému prostoru třídy A z třády B).

// Komplexní příklad dědičnosti

// Definice třídy Namespace.A
BLite.Object.define("Namespace.A",
{
  // Rozšiřujeme základní objekt
  extend: BLite.Object,

  // Konstruktor
  construct: function()
  {
    // Nutnost volat předchozí konstruktor
    this.base(arguments);

    alert("Created A");
  },
  
  // Členské metody
  members:
  {
    hello: function()
    {
      alert("Hello A");
    }
  }
});

// Definice třídy Namespace.B, která rozšiřuje Namespace.A
BLite.Object.define("Namespace.B",
{
  // Rozšiřujeme Namespace.A
  extend: Namespace.A

  // Konstruktor
  construct: function()
  {
    // Nutnost volat předchozí konstruktor
    this.base(arguments);

    alert("Created B");
  },
  
  // Členské metody
  members:
  {
    hello: function()
    {
      // Zavoláme hello() z předka
      this.base(arguments);

      alert("Hello B");
    }
  }
});

// Vytvoření objektů
var a = new Namespace.A(); // Created A
var b = new Namespace.B(); // Created A, Created B

// volání metod
a.hello(); // Hello A
b.hello(); // Hello A, Hello B

// použití instanceof
alert(a instanceof Namespace.A); // true
alert(b instanceof Namespace.B); // true

alert(a instanceof Namespace.B); // false
alert(b instanceof Namespace.A); // true

Zbývá vysvětlit poslední věc - properties. Jedná se velké ulehčení práce s javascriptem a objektovým designem obecně. Doporučuji používat funkce get...() a set...(), protože v javascriptu se při překlepu nemusí poznat chyba, kterou můžete ladit i půl dne. Pokud proměnné obalíte do funkcí get() a set(), při překlepu vám vyskočí výjimka a problém okamžitě odhalíte. Definice properties je ukázaná v následujícím příkladě.

// Příklad definování properties

// Definice třídy Namespace.A
BLite.Object.define("Namespace.A",
{
  // Rozšiřujeme základní objekt
  extend: BLite.Object,

  // Konstruktor
  construct: function()
  {
    // Nutnost volat předchozí konstruktor
    this.base(arguments);
    
    // Nastavení properties
    this._id = null;
  },
  
  // Properties
  properties:
  {
    // definice property id, automaticky vygeneruje metody getId() a setId(id).
    // apply slouží k aplikaci změny property. Bude zavolána z funkce setId(id),
    // ale pouze v případě, že došlo ke změně
    //
    // každá property je v instanci reprezentována jako _jméno, v našem případě
    // to bude tedy _id.
    id: { apply: "_applyId" }
  },
  
  // Členské metody
  members:
  {
    _applyId: function(id, old)
    {
      // Změna už byla provedená...
      alert("Změna id na " + id + " z " + old);
    }
  }
});

// Vytvoření objektu
var a = new Namespace.A();

// Můžeme použít metody getId() a setId()
alert(a.getId()); // null
alert(a._id);     // null

// nastavit property, tato funkce zavolá _applyId, protože se hodnota změní
a.setId(1); // alert, změna id na 1 z null

alert(a.getId()); // 1
alert(a._id);     // 1

a.setId(2); // alert, změna id na 2 z 1

// to není všechno, k properties lze přistupovat pomocí get() a set() metod
a.set("id", 10) // alert, změna id na 10 z 2
a.get("id"); // 10

// metoda set() se může také využít k hromadnému nastavení více hodnot:
a.set({
  id: 20
  // ...
});
// alert, změna id na 20 z 10

Závěr

Knihovna BLite.js je určená pro programátory, které zajímá mnohem víc design a čistota kódu, než nějaké hromadné přidávání událostí do X odkazů na stránce. Umožňuje pracovat s DOM a událostmi + vytváří pokročilý objektově orientovaný design vašeho kódu. Možnost vytvořit vlastní třídy a přidávat plnohodnotné handlery událostí (včetně this) jsou jedny ze základních kamenů celé knihovny.

Objektově orientované programování pomocí BLite.Object.define() bylo inspirováno v toolkitu qooxdoo, který je podle mě jeden z nejlepších pro vývoj webových aplikací (ale nevhodný pro standardní webové stránky). Knihovna BLite vznikla hlavně z důvodů, aby bylo možné psát velmi podobný kód pro tradiční html stránky a webové aplikace v qooxdoo.

Statistika

Číselné údaje knihovny BLite.js.

  • Velikost včetně komentářů (zdroj): ~50KB
  • Velikost bez komentářů a mezer (build): ~24KB

Nejste spokojení? Existují i další knihovny

  • dLite - Originální knihovna, ze které jsou některé části BLite. Tato knihovna obsahuje pouze DOM manipulaci a události.
  • Base - Knihovna, která zapouzdřuje oběktově orientované programování, jiný design než BLite, neobsahuje properties, události a pokročilé funkce jako base() a self().
  • AJS - Opět malá knihovna, která ale podporuje i AJAX a různé efekty.
  • DOMAssistant - dLite knihovna je odlehčená verze právě této knihovny
  • jQuery - Knihovna, kde všechny operace probíhají nad polem elementů (tento způsob mi osobně nevyhovuje)
  • JAK - Knihovna z dílny českého seznamu, výhoda je určitě česká dokumentace
  • Prototype - Jedna z nejznámějších knihoven pro JS, celkem velká.
  • Mootools - Stejný princip jako Prototype, ale modernější
  • MochiKit - Nevim jestli se ještě vyvíjí, podobné Prototype a Mootools.
  • Dojo toolkit - Dojo toolkit je něco víc než DOM knihovna, obsahuje i pokročilé widgety a load-on-demand.
  • YUI - Celkem rozsáhlá knihovna z dílny YAHOO.
  • qooxdoo - knihovna pro psaní webových aplikací - doporučuji. Perfektní design knihovny a komunita, neuvěřitelné možnosti a čistota kódu.
  • smartclient - opět dobrá knihovna pro webové aplikace s možností komerční podpory.
  • JavascriptMVC - Celkem malá knihovna pro webové aplikace.

Poznámky

  • Materiál je upraven ze starší, zatím nepublikované, dokumentace.
  • Property v qooxdoo jsou ukládané jako $$property, asi i v BLite to změním na tento formát.

Zdroj

Knihovnu BLite je možné stáhnout na http://code.google.com/p/blite/ a šířit pod MIT licencí.

Opravy v článku:

  • Oprava chyby u BLite.Browser.
  • Oprava PI z 3.13 na 3.14 :-).
  • Oprava BLite.toJSON() na BLite.Json.decode().

Založit nové vláknoNahoru

ISSN 1214-1267   www.czech-server.cz
© 1999-2015 Nitemedia s. r. o. Všechna práva vyhrazena.