@@ -999,6 +999,80 @@ renderLargeShapes();
999999```
10001000** [ ⬆ back to top] ( #table-of-contents ) **
10011001
1002+ ### Interface Segregation Principle (ISP)
1003+ JavaScript doesn't have interfaces so this principle doesn't apply as strictly
1004+ as others. However, it's important and relevant even with JavaScript's lack of
1005+ type system.
1006+
1007+ ISP states that "Clients should not be forced to depend upon interfaces that
1008+ they do not use." Interfaces are implicit contracts in JavaScript because of
1009+ duck typing.
1010+
1011+ A good example to look at that demonstrates this principle in JavaScript is for
1012+ classes that require large settings objects. Not requiring clients to setup
1013+ huge amounts of options is beneficial, because most of the time they won't need
1014+ all of the settings. Making them optional helps prevent having a "fat interface".
1015+
1016+ ** Bad:**
1017+ ``` javascript
1018+ class DOMTraverser {
1019+ constructor (settings ) {
1020+ this .settings = settings;
1021+ this .setup ();
1022+ }
1023+
1024+ setup () {
1025+ this .rootNode = this .settings .rootNode ;
1026+ this .animationModule .setup ();
1027+ }
1028+
1029+ traverse () {
1030+ // ...
1031+ }
1032+ }
1033+
1034+ let $ = new DOMTraverser ({
1035+ rootNode: document .getElementsByTagName (' body' ),
1036+ animationModule : function () {} // Most of the time, we won't need to animate when traversing.
1037+ // ...
1038+ });
1039+
1040+ ```
1041+
1042+ ** Good** :
1043+ ``` javascript
1044+ class DOMTraverser {
1045+ constructor (settings ) {
1046+ this .settings = settings;
1047+ this .options = settings .options ;
1048+ this .setup ();
1049+ }
1050+
1051+ setup () {
1052+ this .rootNode = this .settings .rootNode ;
1053+ this .setupOptions ();
1054+ }
1055+
1056+ setupOptions () {
1057+ if (this .options .animationModule ) {
1058+ // ...
1059+ }
1060+ }
1061+
1062+ traverse () {
1063+ // ...
1064+ }
1065+ }
1066+
1067+ let $ = new DOMTraverser ({
1068+ rootNode: document .getElementsByTagName (' body' ),
1069+ options: {
1070+ animationModule : function () {}
1071+ }
1072+ });
1073+ ```
1074+ ** [ ⬆ back to top] ( #table-of-contents ) **
1075+
10021076### Prefer ES6 classes over ES5 plain functions
10031077It's very difficult to get readable class inheritance, construction, and method
10041078definitions for classical ES5 classes. If you need inheritance (and be aware
0 commit comments