ISP Bad/Good examples refactored

Author: DavidVujic

README.md

@@ -1282,76 +1282,118 @@ renderLargeShapes(shapes);
 **[⬆ back to top](#table-of-contents)**
 
 ### Interface Segregation Principle (ISP)
-JavaScript doesn't have interfaces so this principle doesn't apply as strictly
-as others. However, it's important and relevant even with JavaScript's lack of
-type system.
-
-ISP states that "Clients should not be forced to depend upon interfaces that
-they do not use." Interfaces are implicit contracts in JavaScript because of
-duck typing.
-
-A good example to look at that demonstrates this principle in JavaScript is for
-classes that require large settings objects. Not requiring clients to setup
-huge amounts of options is beneficial, because most of the time they won't need
-all of the settings. Making them optional helps prevent having a "fat interface".
+ISP states that "___Clients should not be forced to depend upon interfaces that
+they do not use.___" In JavaScript, an interface is the contract of an object (i.e. the public properties and methods). In the "Bad" example below, the `Feedback` class inherits everything from the `Message` class, but only a couple of the features will
+make sense to the subclass.
 
 **Bad:**
 ```javascript
-class DOMTraverser {
-  constructor(settings) {
-    this.settings = settings;
-    this.setup();
+class Message {
+  constructor() {
+    this._feedback = [];
+    this._rating = 0;
   }
 
-  setup() {
-    this.rootNode = this.settings.rootNode;
-    this.animationModule.setup();
+  addFeedback(message) {
+    this._feedback.push(message);
   }
 
-  traverse() {
-    // ...
+  getFeedback() {
+    return this._feedback;
+  }
+
+  // this method makes no sense to the Feedback subclass
+  getRating() {
+    return this._rating;
+  }
+
+  // this method makes no sense to the Feedback subclass
+  setRating(stars) {
+    this._rating = stars;
+  }
+
+  // this method makes no sense to the Feedback subclass
+  postMessage(message) {
+    console.log(message);
   }
 }
 
-const $ = new DOMTraverser({
-  rootNode: document.getElementsByTagName('body'),
-  animationModule() {} // Most of the time, we won't need to animate when traversing.
-  // ...
-});
+class MessageForFeedback extends Message {
+  share(message) {
+    return super.addFeedback(message);
+  }
 
+  get() {
+    return super.getFeedback();
+  }
+}
 ```
 
 **Good:**
 ```javascript
-class DOMTraverser {
-  constructor(settings) {
-    this.settings = settings;
-    this.options = settings.options;
-    this.setup();
-  }
+// several "interfaces", separated by feature
+function postMessage(message) {
+  console.log(message);
+}
 
-  setup() {
-    this.rootNode = this.settings.rootNode;
-    this.setupOptions();
-  }
+function makeRating() {
+  let stars = 0;
 
-  setupOptions() {
-    if (this.options.animationModule) {
-      // ...
-    }
-  }
+  const get = () => stars;
+  const set = (numberOfStars) => stars = numberOfStars;
 
-  traverse() {
-    // ...
-  }
+  return {
+    get,
+    set
+  };
 }
 
-const $ = new DOMTraverser({
-  rootNode: document.getElementsByTagName('body'),
-  options: {
-    animationModule() {}
-  }
-});
+function makeFeedback() {
+  const messages = [];
+
+  const get = () => messages;
+  const add = (message) => messages.push(message);
+
+  return {
+    get,
+    add
+  };
+}
+```
+
+```javascript
+// different "clients", composed with features that makes sense
+function messageForFeedback() {
+  var feedback = makeFeedback();
+
+  const share = (message) => feedback.add(message);
+
+  return {
+    share,
+    get: feedback.get
+  };
+}
+
+function messageForRating() {
+  var ratings = makeRating();
+
+  const rate = (stars) => ratings.set(stars);
+  const send = () => postMessage(ratings.get());
+
+  return {
+    rate,
+    send
+  };
+}
+
+// example usage
+const feedback = messageForFeedback();
+feedback.share('Good job!');
+const results = feedback.get();
+
+const ratings = messageForRating();
+ratings.rate(5);
+ratings.send();
 ```
 **[⬆ back to top](#table-of-contents)**
 

examples/interface-segregation-principle-GOOD.js

@@ -1,4 +1,4 @@
-// "interfaces"
+// several "interfaces", separated by feature
 function postMessage(message) {
   console.log(message);
 }
@@ -27,8 +27,7 @@ function makeFeedback() {
   };
 }
 
-// "clients"
-
+// different "clients", composed with features that makes sense
 function messageForFeedback() {
   var feedback = makeFeedback();
 
@@ -52,7 +51,7 @@ function messageForRating() {
   };
 }
 
-// usage
+// example usage
 const feedback = messageForFeedback();
 feedback.share('Good job!');
 const results = feedback.get();