Tento článek je překladem anglického originálu vydaného na portálu Dev.Opera. První a druhou a třetí část překladu jsme vydali nedávno.

Pokročilé javascriptové utilitky

V Dojo Toolkitu zajisté oceníte objektové pomocníky jako jsou dojo.declare a dojo.mixin, a také nástroje rozšiřující nativní prototypovou dědičnost dojo.extend a dojo.delegate. V Dojo Toolkitu dále najdete funkce k manipulaci s kontextem (scope) – jedná se o často používanou dojo.hitch a alegantní  dojo.partial.

Není magičtější funkce než dojo.hitch. Ta vytvoří funkci, jež bude spuštěna pouze v zadaném kontextu.

var foo = function() {
  var bar = function(arg) {
    console.log("was passed: ", arg);
  }
  dojo.fadeOut( {
    node: "nodeById",
    onEnd: dojo.hitch(this,"bar")
  }).play();
} 

Je důležité zdůraznit, že funkce vytvořená pomocí hitch není spuštěna okamžitě. V tomto příkladu si uchováme kontext this i při volání lokální funkce. Několik skvělých článků o dojo.hitch najdete na DojoCampus, kde je problematika rozebrána podrobněji.

dojo.partial se chová podobně jako dojo.hitch, ovšem předpokládá globální kontext. Použitím hitch nebo partial můžete váš JavaScript „okořenit“.

var style = dojo.partial(dojo.style,"someNodeId");
// kdykoliv spustíte tuto funkci, stylujete prvek s id="someNodeId"
style("opacity",0.5);
style("backgorundColor","#fff");
// funguje zároveň i jako getter:
var val = style("width");
console.log(val); 

dojo.mixin spojuje (mixuje) objekty dohromady a to zprava doleva (přidá objekt k objektu před ním):

var obj = { a: "foo", b: "bar" };
dojo.mixin(obj, { b: "baz", c: "bam" });
console.log(obj);
// Object a=foo b=baz c=bam 

V příkladu jsme přišli o počáteční hodnotu b:, to obsahuje po spojení hodnotu novou.

K vytvoření nového objektu a k přidání vlastností k objektu můžeme použít dojo.clone (funguje i s DOM Node):

var obj = { a: "foo", b: "bar" };
var newObj = dojo.clone(obj);
dojo.mixin(newObj, { b: "baz", c: "bam" });
console.log(obj, newObj);
// Object a=foo b=bar Object a=foo b=baz c=bam 

Pomocí declare se vytváří v Dojo Toolkitu třídy. Bez přílišného zabředávání do tohoto mocného API stačí zdůraznit, že nám dovolí vytvářet znovupoužitelné objekty klasickým objektovým způsobem a jedná se o nadstavbu javascriptového prototypového přístupu. V příkladu níže si napřed vytvoříme třídu Person a vzápětí i její instanci:

dojo.declare("Person", null, {
  constructor: function(nick, name, age) {
    this.nick = nick;
    this.name = name;
    this.age = age;
    this.location = null;
  },
  setLocation:functionloc) {
    this.location = loc;
  },
  getLocation:function) {
    return this.location;
  }
});
var dante = new Person("dante","Peter Higgins", 28);
dante.setLocation("Tennessee");
console.log(dante.getLocation()); 

Uvnitř declare můžeme použít spojení objektů ( mixin) k vytvoření tříd, které budou odvozené od jiných tříd. Níže vytvoříme třídu Employee, která je odvozená od třídy Person. Instance třídy Employee budou navíc obsahovat několik položek:

dojo.declare("Person", null, {
  constructor: function(nick, name, age) {
    this.nick = nick;
    this.name = name;
    this.age = age;
    this.location = null;
  },
  setLocation:functionloc) {
    this.location = loc;
  },
  getLocation:function) {
    return this.location;
  }
});
dojo.declare("Employee", Person, {
  employeeId: 0,
  setId: function(id) {
    this.employeeId = id;
  }
})
// Jsem zaměstnán:
var dante = new Employee("dante","Peter Higgins", 28);
dante.setLocation("Tennessee");
dante.setId(42);
console.log(dante.employeeId); 

Tak můžeme vytvářet instance tříd People a Employee, které budou mít navzájem odlišné vlastnosti a metody.

Pomocí dojo.mixin můžeme přidat další vlastnosti přímo do vytvořené instance, jelikož i instance jsou jen obyčejné objekty:

dojo.declare("Person", null, {
  constructor: function(nick, name, age) {
    this.nick = nick;
    this.name = name;
    this.age = age;
    this.location = null;
  }
});
var dante = new Person("dante","Peter Higgins", 28);
dojo.mixin(dante, {
  employeeId: 42
});
console.log(dante.employeeId); // 42 

Pomocí dojo.extend můžeme upravit samotnou třídu. Přidané vlastnosti budou dostupné ve všech instancích vytvořených po zavolání  extend():

dojo.declare("Person", null, {
  constructor: function(nick, name, age) {
    this.nick = nick;
    this.name = name;
    this.age = age;
    this.location = null;
  }
});
// přidáme barvu očí do třídy Person
dojo.extend(Person, {
  eyeColor:"default",
  setEyeColor: function(color) {
    this.eyeColor = color;
  }
});
var dante = new Person("dante","Peter Higgins", 28);
console.log(dante.eyeColor); // default
dante.setEyeColor("brown");
console.log(dante.eyeColor); // brown 

Flexibilitu, kterou nám dojo.declare, dojo.mixin a dojo.extend nabízí, najdete v celém Dojo Toolkit. Každá část Dojo Toolkitu, Dijitu nebo DojoX může být rozšířena, upravena, znovu použita nebo jinak ohnuta, jak si budete přát. Například všechny objekty Dijitu jsou odvozeny od třídy dijit._Widget a vztahují se na ně všechna pravidla, která jsme v souvislosti s dojo.declare  zmínili.

Integrovaná podpora jmenných prostorů

Už nikdy nebudete muset řešit umístění vašeho kódu. Předpokládá se, že jmenné prostory dojo, dijit a dojox jsou umístěny v sousedních adresářích a najdete je pomocí ../jmenný prostor relativně k dojo/. Můžete vytvořit váš vlastní jmenný prostor pro váš kód prostým přidáním dalšího adresáře:

+ dojo-1.2/
+ dojo/
  + dojo.js
+ dijit/
+ dojox/
+ custom/
  + kernel.js 

Jediné, co musíte zařídit, abyste upozornili Dojo na vaši stránku, je volání dojo.provide(). V dojo-1.2/custom/ker­nel.js:

dojo.provide("custom.kernel");
dojo.require("dojo.io.iframe");
custom.init = function() {
  // komentáře jsou při buildovacím procesu odstraněny
  console.log("I am custom code!");
}
dojo.addOnLoad(custom.init); 

Na vašich stránkách pak jednoduše zavoláte dojo.require pro nahrání vašeho balíčku:

dojo.require("custom.kernel"); 

Pokud bystě chtěli, aby se váš kód nacházel mimo adresář dojo-1.2, zaregistrujte jednoduše cestu relativně k  dojo.js:

+ dojo-1.2/
  + dojo/
    + dojo.js
  + dijit/
  + dojox/
+ custom/
  + templates/
    + Template.html
  + kernel.js 

Následně ve vašem HTML zaregistrujte cestu k modulu. V tomto případě se custom nachází o 2 adresáře pod dojo.js:

dojo.registerModulePath("custom", "../../custom");
dojo.require("custom.kernel"); 

Nejdůležitějším úkolem je znát cestu k dojo.js  na vašem webovém serveru. Když ji znáte, mělo by vše ostatní fungovat. Jakmile jste cestu k modulu zaregistrovali, můžete už snadno přistupovat k jakémukoliv souboru v dané cestě:

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare("custom.Widget", [dijit._Widget, dijit._Templated], {
  templatePath: dojo.moduleUrl("custom", "templates/Template.html");
}); 

Shrnutí

Tento tutoriál jen stěží pokryl základy toho, co vše Dojo nabízí k tvorbě webových aplikací nebo k vylepšení vašich webových stránek. Více najdete na oficiálních stránkách Dojo Toolkitu. Dojo má nejen podporu od komunity (na Dojo fóru, #dojo na irc.freenode.net a na DojoCampus), ale má také komerční podporu od SitePen. Dojo tak podporuje celá řada významných firem. Budeme rádi, když se zapojíte a pomůžete nám Dojo dále vylepšovat.

Tento článek je překladem textu Introducing The Dojo Toolkit a je zde zveřejněn s laskavým svolením Opera Software.