javascript-skill.md

javascript-skill.md

@@ -0,0 +1,95 @@
+# ---
+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. 
+
+
+