JavaScript DHTML/Mootools/Extend
Содержание
MooTools made it easy for you to extend any native object like Arrays, Strings etc. to add the functionality you want
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css">
div.element {
width: 100px; height: 50px; border: 1px solid black; background-color: #f9f9f9; float: left; margin: 5px;
} div.otherElement {
height: 20px;
} pre {
padding: 5px 7px; margin: 5px 0; background: #f5f5f5; border: 1px solid #ddd; color: #333; overflow: auto; font-size: 12px;
} h3.code {
margin: 10px 0; padding: 3px 5px 1px; background: #D0C8C8; color: #5d4f4f;
} p.margin {
margin: 5px 0;
}
</style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript">
// We add the "invoke"-Method to Arrays Array.implement({
invoke: function(fn, args){
var result = [];
for (var i = 0, l = this.length; i < l; i++){
if(this[i] && this[i][fn])
result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
}
return result;
}
});
window.addEvent("domready", function(){
var els = $$("div.element");
var myArray = [
new Fx.Tween(els[0]),
new Fx.Tween(els[1]),
new Fx.Tween(els[2]),
new Fx.Tween(els[3]),
];
var i = false;
$("link").addEvent("click", function(e){
e.stop();
i = !i;
myArray.invoke("start", ["height", i ? "120px" : "50px"]);
});
});
</script> <title>Extending Native Demo</title>
</head> <body>
Extending the Native Objects
Introduction
There are times you may ask yourself "Why isn"t that part of MooTools?" and while there are possibly a lot of answers to that it simply could be that it is something with only small usage.
For that reason MooTools made it easy for you to extend any native object like Arrays, Strings etc. to add the functionality you want.
In this example you will learn how to extend the Array-Object with a custom function. For this we create an Array with Fx.Tween instances and start the effect on all Array elements. You may need to have a look at the source of this demo.
<a id="link" href="#">Execute Example</a>
Why? Via the newly added method we do not have to loop through the Array with Array.each to just start the same method with same arguments on all the elements in the given Array. If you need that functionality more often it is better to just add another method to the Native then creating pointless functions or writing the same code again and again. You should get the idea!
Code:
Array.implement({
invoke: function(fn, args){
var result = [];
for (var i = 0, l = this.length; i < l; i++){
if(this[i] && this[i][fn])
result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
}
return result;
}
});
Usage:
myArray.invoke("fn", args);
</body> </html>
</source>
