96 lines
2.3 KiB
Markdown
96 lines
2.3 KiB
Markdown
# ---
|
|
name: javascript-programmeer-skill
|
|
description: Hiermee wordt mijn voorkeur racket programmeerstijl aangegeven.
|
|
---
|
|
|
|
---
|
|
name: javascript-programmeerstijl
|
|
description: Gebruik deze skill wanneer je Javascript-code voor Hans schrijft, wijzigt, refactort of beoordeelt. Pas de bestaande, eenvoudige en object georiënteerde programmeerstijl toe; voorkom over-engineering en onnodige abstracties. Gebruik deze skill niet voor algemene uitleg over Racket waarbij geen code voor zijn projecten wordt gemaakt of aangepast.
|
|
---
|
|
|
|
# javascript-programmeerstijl
|
|
|
|
Gebruik deze stijl wanneer je Javascript-code voor Hans schrijft of aanpast.
|
|
|
|
## Uitgangspunt
|
|
|
|
Schrijf code zoveel mogelijk in lijn met zoals Hans racket code schrijft. Zie daarvoor de racket skill.
|
|
|
|
Gebruik bij javascript als je een closure definitie maakt, bij voorkeur classes, m.a.w. ga
|
|
voor OO en class definities in plaats van property gestuurde closures.
|
|
|
|
Liever
|
|
|
|
```javascript
|
|
class Rectangle {
|
|
constructor(height, width) {
|
|
this.height = height;
|
|
this.width = width;
|
|
}
|
|
// Getter
|
|
get area() {
|
|
return this.calcArea();
|
|
}
|
|
// Method
|
|
calcArea() {
|
|
return this.height * this.width;
|
|
}
|
|
*getSides() {
|
|
yield this.height;
|
|
yield this.width;
|
|
yield this.height;
|
|
yield this.width;
|
|
}
|
|
}
|
|
|
|
const square = new Rectangle(10, 10);
|
|
|
|
console.log(square.area); // 100
|
|
console.log([...square.getSides()]); // [10, 10, 10, 10]```
|
|
|
|
In plaats van:
|
|
|
|
```javascript
|
|
const Rectangle = (() => {
|
|
function Rectangle(height, width) {
|
|
this.height = height;
|
|
this.width = width;
|
|
}
|
|
|
|
Rectangle.prototype.calcArea = function () {
|
|
return this.height * this.width;
|
|
};
|
|
|
|
Object.defineProperty(Rectangle.prototype, "area", {
|
|
get: function () {
|
|
return this.calcArea();
|
|
}
|
|
});
|
|
|
|
Rectangle.prototype.getSides = function* () {
|
|
yield this.height;
|
|
yield this.width;
|
|
yield this.height;
|
|
yield this.width;
|
|
};
|
|
|
|
return Rectangle;
|
|
})();
|
|
```
|
|
|
|
## Modules / source files
|
|
|
|
Houd bronbestanden overzichtelijk.
|
|
Geen grote javascript bouwwerken.
|
|
Ga voor module gewijze code.
|
|
Zorg dat modules zoveel mogelijk een eenheid zijn.
|
|
|
|
OO is prima, en een setje OO classes in een module kan, maar als het boven de 750 regels code komt,
|
|
dan wordt het onoverzichtelijk.
|
|
|
|
Voorkom eindeloze nestingen.
|
|
Probeer dingen functioneel op te zetten, zoals dat in racket zou werken.
|
|
|
|
|
|
|