dat.gui.js_dat.gui：出色JavaScript接口控制器

dat.gui.js

We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives being that they don't have the community behind them to drive growth and the developer that uses multiple micro-frameworks has to work with inconsistent APIs.  To each their own;  I don't have a strong feeling either way, as it depends on the project.

我们都喜欢受信任JavaScript框架，例如MooTools，jQuery和Dojo，但是在将聚焦的微框架用于较小目的方面有很大的推动力。 当然，使用它们有正面和负面的影响。 积极的方面包括较小的JS占用空间(尤其是对移动设备有利)和更少的麻烦，不利的方面是他们没有背后的社区来推动增长，并且使用多个微框架的开发人员必须使用不一致的API。 给每个人自己； 无论哪种方式，我都没有强烈的感觉，因为这取决于项目。

One nice resource I recently stumbled upon is dat.gui. dat.gui advertises itself as a lightweight controller library that allows you to easily manipulate variables and fire functions on the fly.   That's a pretty general statement but dat.gui appears to be a very general framework.  The premise is object and property management within a GUI panel.  Let's take a look at how dat.gui can be used.

我最近偶然发现的一个不错的资源是dat.gui 。 dat.gui宣传自己是一个轻量级的控制器库，使您可以轻松地即时操作变量和触发函数。 这是一个非常笼统的声明，但dat.gui似乎是一个非常笼统的框架。 前提是在GUI面板中进行对象和属性管理。 让我们看一下如何使用dat.gui 。

View Demo 观看演示

dat.gui's niche is in listening to and controlling data such that it can be visualized into charts or other graphics.  Creating a new DAT.GUI instance provides a new sliding pane for which to add controls to:

dat.gui的定位是监听和控制数据，以便可以将其可视化为图表或其他图形。 创建一个新的DAT.GUI实例提供了一个新的滑动窗格，可为其添加控件到：

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

With the pane ready, new controls can be added.  Fields can be of type string, number, boolean, or function, with a number slider available depending on options passed to it.  Here's how you can create a field of each type:

准备好窗格后，可以添加新控件。 字段的类型可以是字符串，数字，布尔值或函数，并带有数字滑块，具体取决于传递给它的选项。 您可以按照以下方法创建每种类型的字段：

// 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");

Since properties are changed directly on the object itself, there's not "setter" and so dat.gui provides a listen function to do just that -- list for changes:

由于属性是直接在对象本身上更改的，因此没有“ setter”，因此dat.gui提供了一个listen函数来执行此操作-列出更改：

// 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();

Those are the dead basics of the dat.gui library.  Note that I've not yet mentioned what the result looks like.  That's because it's up to you to create the visual aspects based on property values.  The demo that ships with dat.gui is a very creative dot-based constant animation.  The animation magic lies within the FizzyText function.  FizzyText is a more sizable function that does the animation, but let's take a look at the dat.gui code:

这些是dat.gui库的基础知识。 请注意，我还没有提到结果的样子。 这是因为您可以根据属性值来创建外观。 dat.gui附带的演示是一个非常有创意的基于点的常量动画。 动画魔术位于FizzyText函数中。 FizzyText是执行动画的功能更强大的函数，但让我们看一下dat.gui代码：

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");

Tinker with the pane fields and the animation instantly changes!

修补窗格区域，动画立即发生变化！

View Demo 观看演示

JavaScript, more than any other language, seems to provide the most ability to make powerful changes with very little code.  dat.gui is proof of that.  The demo provided here is the same demo provided within the dat.gui repository, mostly because topping the effect would be a hell of a feat.  When you get a few moments, go play around with dat.gui -- it's really ... dat ... good.

与其他任何语言相比，JavaScript似乎提供了最多的功能，只需很少的代码即可进行强大的更改。 dat.gui就是证明。 此处提供的演示与dat.gui存储库中提供的演示相同，主要是因为达到最高效果将是一项dat.gui 。 dat.gui片刻，就去玩dat.gui －真的……dat……很好。

翻译自: https://davidwalsh.name/dat-gui

dat.gui.js