logo

dat.gui:Výjimečný řadič rozhraní JavaScript

Všichni milujeme důvěryhodné rámce JavaScriptu, jako jsou MooTools, jQuery a Dojo, ale existuje velký tlak na používání zaměřených mikrorámců pro menší účely. Jejich používání má samozřejmě pozitiva i negativa. Mezi pozitiva patří menší stopa JS (obzvláště dobré pro mobily) a méně cruft, negativum je, že za nimi nestojí komunita, která by řídila růst, a vývojář, který používá více mikrorámců, musí pracovat s nekonzistentními API. Každému své; Ani v jednom případě nemám silný pocit, protože to závisí na projektu.

Jeden pěkný zdroj, na který jsem nedávno narazil, je dat.gui . dat.gui se inzeruje jako odlehčená knihovna ovladačů, která vám umožňuje snadno manipulovat s proměnnými a spouštět funkce za běhu. To je docela obecné tvrzení, ale dat.gui se zdá být velmi obecným rámcem. Předpokladem je správa objektů a vlastností v rámci GUI panelu. Podívejme se, jak dat.gui lze použít.

Zobrazit ukázku

dat.gui Specialitou společnosti je naslouchání a ovládání dat tak, aby je bylo možné vizualizovat do grafů nebo jiné grafiky. Vytvoření nové instance DAT.GUI poskytuje nové posuvné podokno, do kterého lze přidat ovládací prvky:

// Create an instance, which also creates a UI pane
var gui = new DAT.GUI();

Když je panel připraven, lze přidat nové ovládací prvky. Pole mohou být typu string, number, boolean nebo function, přičemž je k dispozici posuvník čísel v závislosti na předávaných volbách. Zde je návod, jak vytvořit pole každého typu:


// My sample abject
var obj = {
	name: "David Walsh",
	num: 23,
	winner: true
};

// String field
gui.add(obj, "name");

// Number field with slider
gui.add(obj, "num").min(1).max(50).step(1);

// Checkbox field
gui.add(obj, "winner");

Vzhledem k tomu, že vlastnosti se mění přímo na objektu samotném, není zde žádný "setter" a tak dat.gui poskytuje listen funkce, která to udělá -- seznam změn:

// Listen to changes within the GUI
gui.add(obj, "name").onChange(function(newValue) {
	console.log("Value changed to:  ", newValue);
});

// Listen to changes outside the GUI - GUI will update when changed from outside
gui.add(obj, "name").listen();

To jsou mrtvé základy dat.gui knihovna. Všimněte si, že jsem ještě nezmínil, jak vypadá výsledek. Je to proto, že je na vás, abyste vytvořili vizuální aspekty na základě hodnot vlastností. Demo, které se dodává s dat.gui je velmi kreativní tečková konstantní animace. Kouzlo animace spočívá ve funkci FizzyText. FizzyText je větší funkce, která provádí animaci, ale pojďme se podívat na dat.gui kód:

var fizzyText = new FizzyText("david walsh");
var gui = new DAT.GUI();

// Text field
gui.add(fizzyText, "message");

// Sliders with min + max
gui.add(fizzyText, "maxSize").min(0.5).max(7);
gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step

// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);

// Boolean checkbox
gui.add(fizzyText, "displayOutline");

Pohrajte si s poli podokna a animace se okamžitě změní!

Zobrazit ukázku

Zdá se, že JavaScript, více než kterýkoli jiný jazyk, poskytuje největší schopnost provádět výkonné změny s velmi malým množstvím kódu. dat.gui je toho důkazem. Zde uvedená ukázka je stejná ukázka poskytovaná v rámci dat.gui repozitář, většinou proto, že překrýt efekt by byl sakra výkon. Až budete mít chvilku, pohrajte si s dat.gui -- je to opravdu ... to ... dobré.