mootools_使用MooTools的自定义Getter和Setter

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允许开发人员添加与简单的getset方法绑定的自定义方法,以允许操纵属性进入和退出类。 我花了一些时间在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,并将检查是否存在自定义setget方法。 如果是这样,则将调用这些方法,否则,将仅设置或返回该属性。 现在让我们看一个示例用法:


// 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。

翻译自: https://davidwalsh.name/get-set

mootools

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值