Skip to content

Commit a15c393

Browse files
committed
Interface Segregation Principle (ISP)
1 parent c85e78c commit a15c393

File tree

1 file changed

+74
-0
lines changed

1 file changed

+74
-0
lines changed

README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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
10031077
It's very difficult to get readable class inheritance, construction, and method
10041078
definitions for classical ES5 classes. If you need inheritance (and be aware

0 commit comments

Comments
 (0)