mootools 元素追加_使用MooTools创建自定义元素属性获取器和设置器

mootools 元素追加

One of the goals of the MooTools projects is to create very flexible methods by which developers may modify or extend the behavior of given classes. One example of that flexibility is the ability to customize the Element class' get and set methods for specified values.

MooTools项目的目标之一是创建非常灵活的方法，开发人员可以通过这些方法来修改或扩展给定类的行为。 这种灵活性的一个例子是能够为指定值定制Element类的get和set方法。

The default behavior of the get and set methods for an object are to return/modify the given Element attribute. Take the following for example:

对象的get和set方法的默认行为是返回/修改给定的Element属性。 以以下为例：

var alt = document.id('myImage').get('title');  //returns the image's title attribute text

The above code modifies the title attribute for the given element. Simple, of course, but then MooTools also uses the get/set methods to set and retrieve items that aren't element attributes:

上面的代码修改了给定元素的title属性。 当然很简单，但是随后MooTools也使用get / set方法来设置和检索不是元素属性的项目：

var tag = document.id('myImage').get('tag'); //returns images's tag (img)

The above code retrieves the given element's tag name. How does MooTools do this? Simple: the Element.Properties object. You can set custom get and set handling by adding your desired string to the Element.Properties object. Here's an example:

上面的代码检索给定元素的标签名称。 MooTools如何做到这一点？ 简单： Element.Properties对象。 您可以通过将所需的字符串添加到Element.Properties对象来设置自定义获取和设置处理。 这是一个例子：

Element.Properties.yourCustomGetOrSetName = {
	get: function() {
		//your custom programming to accomplish what should be returned...
		return yourReturnValue;
	},
	set: function(input) {
		//your custom programming to accomplish what should be set...
		//don't need to return anything
	},
	erase: function() { //erase works too!
		//programming to erase this
	}
};

Here's the code MooTools uses internally to accomplish the get('tag') ability:

这是MooTools内部使用的代码来实现get('tag')功能：

Element.Properties.tag = {
	get: function(){
		return this.tagName.toLowerCase();
	}
};

So how could you use this? You could use Element.Properties to create a parent getter:

那你怎么用呢？ 您可以使用Element.Properties创建父吸气剂：

Element.Properties.parent = {
	get: function() {
		return this.getParent(); //returns the element's parent
	}
	//no need to do a setter or eraser
};
//.....
//usage
var parent = document.id('myElement').get('parent'); //returns myElement's parent element.

Pretty sweet, no? Have any other items you'd like to see in the get or set methods? Share!

很甜蜜，不是吗？ 您还想在get或set方法中看到其他项目吗？ 分享！

翻译自: https://davidwalsh.name/mootools-custom-element

mootools 元素追加