@@ -999,6 +999,80 @@ renderLargeShapes();
999
999
```
1000
1000
** [ ⬆ back to top] ( #table-of-contents ) **
1001
1001
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
+
1002
1076
### Prefer ES6 classes over ES5 plain functions
1003
1077
It's very difficult to get readable class inheritance, construction, and method
1004
1078
definitions for classical ES5 classes. If you need inheritance (and be aware
0 commit comments