mootools
Working with Dojo all day and scoping out MooTools at night gives me a unique perspective; I get to constantly evaluate the two frameworks and mentally move functionalities from framework to framework. One small but handy feature within the Dojo Toolkit's Dijit UI Framework is its set/get system. Dijit allows developers to add custom methods tied into simple get
and set
methods to allow manipulation properties into and on the way out of a class. I took a few moments to implement this system in MooTools.
全天与Dojo一起工作,晚上与MooTools合作,这给了我独特的见解。 我不断地评估这两个框架,并在功能上从一个框架移到另一个框架。 Dojo Toolkit的Dijit UI框架中的一个小巧但方便的功能是它的设置/获取系统。 Dijit允许开发人员添加与简单的get
和set
方法绑定的自定义方法,以允许操纵属性进入和退出类。 我花了一些时间在MooTools中实现此系统。
The idea is that a Class instance has properties:
这个想法是Class实例具有属性:
var MyClass = new Class({
value: 10/*, more... */
});
Instead of simply setting and getting object properties directly, sometimes they need to be treated before coming in or going out. For setting, it can be a sort of internal formatting or validation. For getting, it's mostly formatting. The method formats are _get[SomeAttrName]Attr
and _set[SomeAttrName]Attr
. With that in mind, it's time to create the mixin class.
除了直接设置和获取对象属性外,有时还需要在进入或退出之前对它们进行处理。 对于设置,它可以是一种内部格式或验证。 为了获得,它主要是格式化。 方法格式为_get[SomeAttrName]Attr
和_set[SomeAttrName]Attr
。 考虑到这一点,是时候创建mixin类了。
MooToolsJavaScript GetSet (JavaScript GetSet for MooTools)
This new functionality will be independently coded as a class meant as a Class
mixin using the Implements property:
可以使用Implements属性将该新功能独立编码为一个类,表示为Class
mixin:
(function() {
// Turns "thisPropertyName" into "ThisPropertyName"
function getFunctionName(key, getSet) {
return "_" + getSet + key.charAt(0).toUpperCase() + key.slice(1) + "Attr";
}
// Implement the getter / setter
this.GetSet = new Class({
// A custom getter that looks for _get
get: function(key) {
var fn = this[getFunctionName(key, "get")];
return (fn && fn.call(this, key)) || this[key];
},
set: function(key, value) {
var fn = this[getFunctionName(key, "set")];
if(fn) {
fn.call(this, value);
}
else {
this[key] = value;
}
// Returning "this" to allow chaining
return this;
}
});
})();
The GetSet will feature two method, get and set, and will check for the presence of custom set
and get
methods; if so, those methods are called, and if not, the property is simply set or returned. Now let's look at a sample usage:
GetSet将具有两种方法,即get和set,并将检查是否存在自定义set
和get
方法。 如果是这样,则将调用这些方法,否则,将仅设置或返回该属性。 现在让我们看一个示例用法:
// Create a test class
var TestClass = new Class({
// Implement the new class
Implements: [GetSet],
// The custom getter
_getValueAttr: function() {
return this.value / 10;
},
// The custom setter
_setValueAttr: function(value) {
this.value = value * 10;
}
});
// Create a test class instance
var inst = new TestClass({
value: 8
});
/*
inst.set("value", 20); // inst.value = 200
inst.get("value"); // inst.value = 20
*/
In this case, we've set custom get and set methods which will handle the class' value property. On the way in, the value is multiple by 10 and then set on the object. On the way out, the value is divided by 10. Of course, not the most realistic of scenarios, but this example provides a very simple illustration of how these methods can be used.
在这种情况下,我们设置了自定义的get和set方法,这些方法将处理类的value属性。 进来时,该值是10的倍数,然后在对象上设置。 在输出时,该值除以10。当然,这不是最实际的方案,但是此示例提供了有关如何使用这些方法的非常简单的说明。
So what would be a more realistic scenario? As I said above, custom setters can be very useful as an internal validator. Both the getters and setters are valuable, however, because they also provide a way to "spy" on object properties and have multiple reactions to their changes.
那么,哪种情况更现实呢? 如上所述,自定义设置器作为内部验证器非常有用。 但是,获取器和设置器都很有价值,因为它们还提供了一种“监视”对象属性的方式,并且对其更改有多种React。
mootools