In this article, we will learn about the 4th principle of SOLID, which is the Interface Segregation principle through 2 sections:
- What is the Interface Segregation Principle?
- How to apply the Interface Segregation principle in JavaScript?
What is the Interface Segregation Principle?
Content:
A class should not be forced to implement methods it does not use. Multiple Interfaces with specific purposes are better than a general purpose Interface.
For example:
In the picture you can see we have the parent class Shape
and 2 subclasses including Retangle
and Line
. Class Shape
is inherited from Interface IDrawable
. This interface has 2 methods: draw
and calculateArea
for drawing and calculating area. That means all subclasses will also have to have these two methods.
However, Line
not 2-dimensional so it has no area. But it still needs to implement this approach. This is a violation of the principle.
OK, how to solve it now? You can see the draw
and calculateArea
are two methods with 2 different purposes, you should not combine them. The essence of the principle is to subdivide the Interface by purpose, so now we will add one more interface for the area calculation. That is IDrawable2D
and this interface will apply to areas such as Shape
. And IDrawable
now has only one method, draw
exactly with its name. Much more explicit, right?
How to apply the Interface Segregation principle in JavaScript?
JavaScript does not have an Interface. But you can understand the principle through this example
For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token comment">// Validate in any case</span> <span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">username <span class="token punctuation">,</span> password</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> username <span class="token operator">=</span> username <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> password <span class="token operator">=</span> password <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">initiateUser</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">initiateUser</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> username <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> username <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">validateUser</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function-variable function">validateUser</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">user <span class="token punctuation">,</span> pass</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"validating..."</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// chèn logic validate ở đây!</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User</span> <span class="token punctuation">(</span> <span class="token string">"Francesco"</span> <span class="token punctuation">,</span> <span class="token string">"123456"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> user <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// validating...</span> <span class="token comment">// User {</span> <span class="token comment">// validateUser: [Function: validateUser],</span> <span class="token comment">// username: 'Francesco',</span> <span class="token comment">// password: '123456'</span> <span class="token comment">// }</span> |
We have the User
class and as you can see in the initialization it is always necessary to check validation. However, there are cases where you do not need a validate? So when there is no need to validate, but you still have to perform validate and violate this principle.
To handle this case is also quite simple, you just need to pass validate = true / false and then check the condition to check validation in the initialization. Thus, the parts that need to be checked and validated will be checked, and the parts that are not needed will be ignored.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <span class="token comment">//ISP: Validate chỉ khi cần thiết</span> <span class="token keyword">class</span> <span class="token class-name">UserISP</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">username <span class="token punctuation">,</span> password <span class="token punctuation">,</span> validate</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> username <span class="token operator">=</span> username <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> password <span class="token operator">=</span> password <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> validate <span class="token operator">=</span> validate <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> validate <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">initiateUser</span> <span class="token punctuation">(</span> username <span class="token punctuation">,</span> password <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"no validation required"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token function">initiateUser</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">validateUser</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> username <span class="token punctuation">,</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> password <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function-variable function">validateUser</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">username <span class="token punctuation">,</span> password</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">"validating..."</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// User khi bắt buộc phải validation</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">UserISP</span> <span class="token punctuation">(</span> <span class="token string">"Francesco"</span> <span class="token punctuation">,</span> <span class="token string">"123456"</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// validating...</span> <span class="token comment">// UserISP {</span> <span class="token comment">// validateUser: [Function: validateUser],</span> <span class="token comment">// username: 'Francesco',</span> <span class="token comment">// password: '123456',</span> <span class="token comment">// validate: true</span> <span class="token comment">// }</span> <span class="token comment">// User khi không bắt buộc validation</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">UserISP</span> <span class="token punctuation">(</span> <span class="token string">"guest"</span> <span class="token punctuation">,</span> <span class="token string">"guest"</span> <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// no validation required</span> <span class="token comment">// UserISP {</span> <span class="token comment">// validateUser: [Function: validateUser],</span> <span class="token comment">// username: 'guest',</span> <span class="token comment">// password: 'guest',</span> <span class="token comment">// validate: false</span> <span class="token comment">// }</span> |
This article is over, thank you for following the article. See you at the end.