CurlyMo schreef op maandag 11 maart 2013 @ 22:12:
Het lijkt me makkelijker om een standaard functie te maken waarop je nieuwe functies baseert:
Op deze manier erft het Button element functie automatisch de setEnabled functie. Als je dus een base functie maakt met alle eigenschappen die al je functies
moeten hebben en deze vervolgens
extend dan heb je ook deze zekerheid.
Voor het gemak even alle logic weggehaald want het gaat om het principe
Laten we even één van de cardinale regels van modern JavaScript breken en gaan morellen aan de prototypes van kern types als Function.
Dat zet dus echt een vreselijk slecht precedent voor de rest van je codebase. Er is maar één goede reden waarom je dat zou mogen doen: missende functionaliteit aanvullen via een (volgens de afgesproken API werkende) polyfill.
Daarnaast is de methode om classical inheritance te implementeren in JS zoals je die hier presenteert ook echt een absolute draak. Het is afkomstig uit het MS AJAX framework; dat zegt voor velen al genoeg, maar in dit geval is het ook echt terecht. Dat kun je met geen enkel goed recht leesbaar of onderhoudbaar noemen.
Het is eigenlijk vrij simpel om een class factory te koken die werkt via deftige definities op basis van object literals. Combineer dat met AMD (bijv. via RequireJS) voor namespacing en dependency-based includes en je kunt JavaScript 'classes' schrijven haast als ware je in een taal als Java of C# aan het werken. Voilà:
JavaScript: lib/core/Class.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| define({
create : function( base, proto ) {
var Ctor, Glue;
if ( proto == null ) { proto = base; base = Object; }
Glue = function() {};
Glue.prototype = base.prototype;
Ctor = proto.hasOwnProperty( "constructor" ) ? proto.constructor : function() {
return base.apply( this, arguments );
};
Ctor.prototype = new Glue();
Ctor.prototype.constructor = Ctor;
for ( var name in proto ) {
if ( name === "constructor" || !proto.hasOwnProperty( name )) continue;
Ctor.prototype[ name ] = proto[ name ];
}
return Ctor;
}
}); |
JavaScript: geo/Shape.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| define([ "lib/core/Class" ], function( Class ) {
var Shape = Class.create({
constructor : function( x, y ) {
this.x = x;
this.y = y;
},
move : function( x, y ) {
this.x += x;
this.y += y;
}
});
return Shape;
}); |
JavaScript: geo/Rectangle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| define([ "lib/core/Class", "./Shape" ], function( Class, Shape ) {
var Rectangle = Class.create( Shape, {
constructor : function( x, y, width, height ) {
Shape.prototype.constructor.call( this, x, y );
this.width = width;
this.height = height;
},
area : function() {
return this.width * this.height;
}
});
return Rectangle;
}); |
Hopelijk kunnen we afspreken om die vreselijke, vreselijke troep van het MS AJAX framework niet meer aan andere mensen aan te leren, maar het lekker een stille dood te laten sterven.
/u/161671/269e4805d60917f22c3872de8f8fcd0e-d33ige3__1__360.png?f=community)
) manier.
:strip_icc():strip_exif()/u/5964/crop56503163e97a5.jpeg?f=community)
:strip_exif()/u/396800/D-_3427da0a9c293b63f2a66dea2e642102.gif?f=community)
/u/107051/jeroenmadtrix60.png?f=community)
:strip_icc():strip_exif()/u/283202/vlag.jpg?f=community)
Mijn commentaar ging dan ook niet over jouw vraag maar over CurlyMo's oplossing.