D - 依賴倒置原理（DIP）

在理解 DIP（依賴倒置原理）之前，了解什麼是高階和低階模組以及抽象非常重要。

高階模組：

高階模組是指應用程式中管理核心功能或業務邏輯的部分。這些模組通常處理應用程式更大、更關鍵的功能。高階模組通常執行更廣泛和更複雜的任務，並且它們可能依賴其他模組來完成工作。

例如，如果您正在建立電子商務應用程序，則訂單管理系統將是一個高級模組。它處理主要任務，例如接受訂單、處理訂單、管理交付等等。

低階模組：

另一方面，低階模組負責特定的和較小的任務。這些模組在應用程式的基礎層級上運作，並執行更詳細的工作，例如在資料庫中儲存資料、配置網路設定等。低階模組通常幫助高階模組執行其任務。

繼續電子商務範例，支付網關整合將是一個低階模組。它的工作專門處理付款，與訂單管理系統的更廣泛功能相比，這是一項更專業的任務。

抽象：

簡單來說，抽像是指系統或過程的一般思想或表示。它定義了應該發生什麼，但沒有指定它將如何發生。它專注於基本功能，而不深入研究底層實現細節。

例子：

想像一下你要開車。駕駛汽車的概念（即抽象）包括：

• 啟動汽車
• 停車

但是，抽象並未指定這些操作將如何執行。它不會告訴您它是什麼類型的汽車，它有什麼樣的發動機，或使汽車啟動或停止的具體機制。它僅提供需要做什麼的整體思路。

軟體設計中的抽象：

在軟體設計中，抽象意味著使用定義一組規則或操作的介面或抽象類別來建立通用契約或結構，但這些操作的具體實作是分開的。這允許您定義需要做什麼，而不指定如何完成。

例子：

您可以有一個 PaymentInterface 來聲明處理付款的方法。此介面指定必須處理付款，但沒有定義如何處理付款。這可以透過不同的實現方式來完成，例如 PayPal、Stripe 或其他付款方式。

本質上，抽象著重於通用功能，同時使實作靈活，以便將來更容易更改或擴展。

什麼是依賴倒置原則（DIP）？

根據依賴倒置原則（DIP），高層模組不應該直接依賴低層模組。相反，兩者都應該依賴抽象，例如介面或抽象類別。這使得高層和低層模組可以相互獨立工作，使系統更加靈活並減少變更的影響。

簡化說明：

想像一下您有一個具有多種功能的應用程式。如果一個功能直接依賴另一個功能，那麼修改一個功能將需要更改程式碼的許多部分。 DIP 建議您應該透過通用介面或抽象來使應用程式的不同部分運作，而不是直接依賴。這樣，每個模組都可以獨立運行，並且對一項功能的變更對系統其餘部分的影響最小。

DIP的兩個要點：

• 高階模組不應依賴低階模組。相反，兩者都應該依賴抽象。

• 應該依賴抽象，而不是具體（具體實作）。

例子：

考慮一個可以同時使用 PayPal 和 Stripe 作為付款方式的付款系統。如果您直接使用 PayPal 或 Stripe，稍後新增新的支付網關將需要在整個應用程式中進行大量程式碼變更。

但是，如果您遵循DIP，您將使用通用的PaymentInterface。 PayPal 和 Stripe 都會實作這個介面。這樣，如果您以後想新增新的支付網關，只需實作現有的介面即可，讓流程變得更加簡單。

透過遵循這項原則，DIP 增強了程式碼的可維護性和靈活性，允許更平滑的調整和擴展，而不會造成重大中斷。

範例1：

讓我們考慮一個需要啟動和停止不同類型車輛的應用程式。您可以建立一個用作抽象的車輛介面。任何車輛都可以實現這個介面來提供自己的功能。

Java 程式碼：

 // Abstraction: Vehicle interface
interface Vehicle {
    void start();
    void stop();
}

// Car class implements Vehicle interface
class Car implements Vehicle {
    public void start() {
        System.out.println("Car started");
    }

    public void stop() {
        System.out.println("Car stopped");
    }
}

// Bike class implements Vehicle interface
class Bike implements Vehicle {
    public void start() {
        System.out.println("Bike started");
    }

    public void stop() {
        System.out.println("Bike stopped");
    }
}

// Main class
public class Main {
    public static void main(String[] args) {
        Vehicle car = new Car(); // Car as Vehicle
        car.start();
        car.stop();

        Vehicle bike = new Bike(); // Bike as Vehicle
        bike.start();
        bike.stop();
    }
}

解釋：

在這裡，Vehicle 作為一個抽象，指定需要執行哪些操作（即啟動和停止），但它沒有定義這些操作應該如何執行。 Car 和 Bike 類別根據自己的邏輯實作這些方法。這種設計允許輕鬆添加新的車輛類型，例如卡車，而無需更改現有代碼。

新增車輛：卡車
要新增車輛，您只需建立一個實作 Vehicle 介面的 Truck 類，並提供自己的 start() 和 stop() 方法的實作。

卡車的 Java 程式碼：

class Truck implements Vehicle {
    public void start() {
        System.out.println("Truck started");
    }
    public void stop() {
        System.out.println("Truck stopped");
    }
}

在主類別中使用卡車而不進行任何更改：
現在，要將 Truck 包含在 Main 類別中，您可以建立 Truck 的實例並將其用作車輛。 Main 類別或程式碼的任何其他部分無需進行​​任何更改。

主類別的Java程式碼：

<p>public class Main {<br>
    public static void main(String[] args) {<br>
        Vehicle car = new Car(); // Car as Vehicle<br>
        car.start();<br>
        car.stop();</p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext">    Vehicle bike = new Bike(); // Bike as Vehicle
    bike.start();
    bike.stop();

    // Adding Truck
    Vehicle truck = new Truck(); // Truck as Vehicle
    truck.start();
    truck.stop();
}

}

輸出：
複製程式碼
車子啟動了
車停了
自行車開始了
自行車停了
卡車啟動了
卡車停了

Explanation:

Here, the Truck has been added without making any changes to the existing code. The Truck class simply implements its own versions of the start() and stop() functions according to the Vehicle interface. There was no need to modify the Main class or any other part of the application. This demonstrates how the Dependency Inversion Principle (DIP) promotes flexibility and maintainability in code.

Benefits of DIP:

• Scalability: New classes (like Truck) can be easily added to the system without affecting existing components.

• Maintainability: The Main class and other high-level modules do not need to be modified when new features or vehicles are introduced.

• Flexibility: It is possible to add new vehicles without relying on existing ones, allowing for easier integration of new functionality.

By adhering to the Dependency Inversion Principle, the system remains extensible and maintainable through the use of abstractions.

Importance of DIP:

In this context, Car, Bike, and Truck do not depend directly on the Main class. Instead, the Main class relies solely on the Vehicle abstraction. This means that if a new vehicle type is introduced, there is no need to make changes to the Main class. As a result, the code is much easier to maintain, and adaptability is significantly enhanced.

This approach not only reduces the risk of introducing bugs during modifications but also encourages better design practices by promoting loose coupling between components.

Example 2:

Let's say you want to create a notification system that can send different types of notifications, such as Email, SMS, or Push Notifications. If you directly rely on the Email or SMS classes, adding a new notification method would require changes throughout your code, violating the Dependency Inversion Principle (DIP).

Solution:

We will create an abstraction called Notifier, which will only specify what needs to be done (send notification) without defining how to do it. Different notifier classes (Email, SMS, Push) will implement this functionality in their own way.

JavaScript Code:

<br>
 // Abstraction: Notifier<br>
class Notifier {<br>
    sendNotification(message) {<br>
        throw new Error("Method not implemented.");<br>
    }<br>
}

<p>// EmailNotifier implements Notifier<br>
class EmailNotifier extends Notifier {<br>
    sendNotification(message) {<br>
        console.log(Sending email: ${message});<br>
    }<br>
}</p>

<p>// SMSNotifier implements Notifier<br>
class SMSNotifier extends Notifier {<br>
    sendNotification(message) {<br>
        console.log(Sending SMS: ${message});<br>
    }<br>
}</p>

<p>// PushNotifier implements Notifier<br>
class PushNotifier extends Notifier {<br>
    sendNotification(message) {<br>
        console.log(Sending Push Notification: ${message});<br>
    }<br>
}</p>

<p>// Usage<br>
function sendAlert(notifier, message) {<br>
    notifier.sendNotification(message);<br>
}</p>

<p>// Test different notifiers<br>
const emailNotifier = new EmailNotifier();<br>
const smsNotifier = new SMSNotifier();<br>
const pushNotifier = new PushNotifier();</p>

<p>sendAlert(emailNotifier, "Server is down!");  // Sending email<br>
sendAlert(smsNotifier, "Server is down!");  // Sending SMS<br>
sendAlert(pushNotifier,"Server is down!"); // Sending Push Notification</p>

Explanation:

• Notifier is the abstraction that specifies that a notification needs to be sent.

• EmailNotifier, SMSNotifier, and PushNotifier implement the Notifier rules in their own ways.

• The sendAlert function only depends on the Notifier abstraction, not on any specific notifier. Therefore, if we want to add a new notifier, there will be no need to change the existing code.

Why DIP is Important Here:

To add a new notification method (like WhatsApp), we simply need to create a new class that implements Notifier, and the rest of the code will remain unchanged.

Example 3:

Let’s say you are creating an e-commerce site where payments need to be processed using various payment gateways (like PayPal and Stripe). If you directly rely on PayPal or Stripe, making changes or adding a new gateway would require significant alterations to your code, violating the Dependency Inversion Principle (DIP).

Solution:

We will create an abstraction called PaymentGateway. Any payment gateway will operate according to this abstraction, so adding a new gateway will not require changes to other parts of the code.

JavaScript Code:

<br>
 // Abstraction: PaymentGateway<br>
class PaymentGateway {<br>
    processPayment(amount) {<br>
        throw new Error("Method not implemented.");<br>
    }<br>
}

<p>// PayPal class implements PaymentGateway<br>
class PayPal extends PaymentGateway {<br>
    processPayment(amount) {<br>
        console.log(Processing $${amount} payment through PayPal);<br>
    }<br>
}</p>

<p>// Stripe class implements PaymentGateway<br>
class Stripe extends PaymentGateway {<br>
    processPayment(amount) {<br>
        console.log(Processing $${amount} payment through Stripe);<br>
    }<br>
}</p>

<p>// Usage<br>
function processOrder(paymentGateway, amount) {<br>
    paymentGateway.processPayment(amount);<br>
}</p>

<p>// Test different payment gateways<br>
const paypal = new PayPal();<br>
const stripe = new Stripe();</p>

<p>processOrder(paypal, 100);  // Processing $100 payment through PayPal<br>
processOrder(stripe, 200);  // Processing $200 payment through Stripe</p>

Explanation:

• PaymentGateway is an abstraction that specifies the requirement to process payments.

• The PayPal and Stripe classes implement this abstraction in their own ways.

• The processOrder function only depends on the PaymentGateway abstraction, so if you want to add a new gateway (like Bitcoin), you don’t need to make any changes to the existing code.

DIP is Important Here:

If you need to add a new payment gateway, you simply create a new class that implements the PaymentGateway, and there will be no changes to the core code. This makes the code more maintainable and flexible.

DIP কেন গুরুত্বপূর্ণ?

1. Maintainability: নতুন কিছু যোগ করতে বা পরিবর্তন করতে হলে বড় কোড পরিবর্তন করতে হয় না। DIP মেনে abstraction ব্যবহার করে সিস্টেমকে সহজে মেইনটেইন করা যায়।

2. Flexibility: নতুন ফিচার যোগ করা অনেক সহজ হয়ে যায় কারণ high-level module এবং low-level module আলাদা থাকে।

3. Scalability: DIP এর মাধ্যমে সিস্টেমে নতুন ফিচার বা ফাংশনালিটি যোগ করা সহজ এবং দ্রুত করা যায়।

4. Decoupling: High-level module এবং low-level module সরাসরি একে অপরের উপর নির্ভর না করে abstraction এর মাধ্যমে কাজ করে, যা সিস্টেমের dependencies কমিয়ে দেয়।

Dependency Inversion Principle(DIP) in React

The Dependency Inversion Principle (DIP) can make React applications more modular and maintainable. The core idea of DIP is that high-level components should not depend on low-level components or specific implementations; instead, they should work with a common rule or structure (abstraction).

To implement this concept in React, we typically use props, context, or custom hooks. As a result, components are not directly tied to specific data or logic but operate through abstractions, which facilitates easier changes or the addition of new features in the future.

Example:

• If you are building an authentication system, instead of directly relying on Firebase, create an abstraction called AuthService. Any authentication service (like Firebase or Auth0) can work according to this abstraction, allowing you to change the authentication system without altering the entire codebase.

• Similarly, when making API calls, instead of depending directly on fetch or Axios, you can use an abstraction called ApiService. This ensures that the rules for making API calls remain consistent while allowing changes to the implementation.

By adhering to DIP, your components remain reusable, flexible, and maintainable.

Example 1: Authentication Service

You are building a React application where users need to log in using various authentication services (like Firebase and Auth0). If you directly work with Firebase or Auth0, changing the service would require significant code modifications.

Solution:

By using the AuthService abstraction and adhering to the Dependency Inversion Principle (DIP), you can create an authentication system that allows different authentication services to work together.

JSX Code:

<br>
 import React, { createContext, useContext } from "react";

<p>// Abstraction: AuthService<br>
const AuthServiceContext = createContext();</p>

<p>// FirebaseAuth implementation<br>
const firebaseAuth = {<br>
  login: (username, password) => {<br>
    console.log(Logging in ${username} using Firebase);<br>
  },<br>
  logout: () => {<br>
    console.log("Logging out from Firebase");<br>
  }<br>
};</p>

<p>// Auth0 implementation<br>
const auth0Auth = {<br>
  login: (username, password) => {<br>
    console.log(Logging in ${username} using Auth0);<br>
  },<br>
  logout: () => {<br>
    console.log("Logging out from Auth0");<br>
  }<br>
};</p>

<p>// AuthProvider component for dependency injection<br>
const AuthProvider = ({ children, authService }) => {<br>
  return (<br>
    <AuthServiceContext.Provider value={authService}><br>
      {children}<br>
    </AuthServiceContext.Provider><br>
  );<br>
};</p>

<p>// Custom hook to access the AuthService<br>
const useAuthService = () => {<br>
  return useContext(AuthServiceContext);<br>
};</p>

<p>// Login component that depends on abstraction<br>
const Login = () => {<br>
  const authService = useAuthService();</p>

<p>const handleLogin = () => {<br>
    authService.login("username", "password");<br>
  };</p>

<p>return <button onClick={handleLogin}>Login</button>;<br>
};</p>

<p>// App component<br>
const App = () => {<br>
  return (<br>
    <AuthProvider authService={firebaseAuth}><br>
      <Login /><br>
    </AuthProvider><br>
  );<br>
};</p>

<p>export default App;</p>

Explanation:

• AuthServiceContext acts as a context that serves as an abstraction for the authentication service.

• The AuthProvider component is responsible for injecting a specific authentication service (either Firebase or Auth0) into the context, allowing any child components to access this service.

• The Login component does not directly depend on any specific service; instead, it uses the useAuthService hook to access the authentication abstraction. This means that if you change the authentication service in the AuthProvider, the Login component will remain unchanged and continue to work seamlessly.

This design pattern adheres to the Dependency Inversion Principle (DIP), promoting flexibility and maintainability in the application.

Example 2: API Service Layer with Functional Components

You are making various API calls using fetch or Axios. If you work directly with fetch or Axios, changing the API service would require numerous code changes.

Solution:

We will create an abstraction called ApiService, which will adhere to the Dependency Inversion Principle (DIP) for making API calls. This way, if the service changes, the components will remain unchanged.

JSX Code:

<br>
 import React, { createContext, useContext } from "react";

<p>// Abstraction: ApiService<br>
const ApiServiceContext = createContext();</p>

<p>// Fetch API implementation<br>
const fetchApiService = {<br>
  get: async (url) => {<br>
    const response = await fetch(url);<br>
    return response.json();<br>
  },<br>
  post: async (url, data) => {<br>
    const response = await fetch(url, {<br>
      method: "POST",<br>
      body: JSON.stringify(data),<br>
      headers: { "Content-Type": "application/json" }<br>
    });<br>
    return response.json();<br>
  }<br>
};</p>

<p>// Axios API implementation (for example purposes, similar API interface)<br>
const axiosApiService = {<br>
  get: async (url) => {<br>
    const response = await axios.get(url);<br>
    return response.data;<br>
  },<br>
  post: async (url, data) => {<br>
    const response = await axios.post(url, data);<br>
    return response.data;<br>
  }<br>
};</p>

<p>// ApiProvider for injecting the service<br>
const ApiProvider = ({ children, apiService }) => {<br>
  return (<br>
    <ApiServiceContext.Provider value={apiService}><br>
      {children}<br>
    </ApiServiceContext.Provider><br>
  );<br>
};</p>

<p>// Custom hook to use the ApiService<br>
const useApiService = () => {<br>
  return useContext(ApiServiceContext);<br>
};</p>

<p>// Component using ApiService abstraction<br>
const DataFetcher = () => {<br>
  const apiService = useApiService();</p>

<p>const fetchData = async () => {<br>
    const data = await apiService.get("https://jsonplaceholder.typicode.com/todos");<br>
    console.log(data);<br>
  };</p>

<p>return <button onClick={fetchData}>Fetch Data</button>;<br>
};</p>

<p>// App component<br>
const App = () => {<br>
  return (<br>
    <ApiProvider apiService={fetchApiService}><br>
      <DataFetcher /><br>
    </ApiProvider><br>
  );<br>
};</p>

<p>export default App;</p>

Explanation:

• ApiServiceContext is a context that serves as an abstraction for making API calls.

• The ApiProvider component injects a specific API service.

• The DataFetcher component does not directly depend on fetch or Axios; it relies on the abstraction instead. If you need to switch from fetch to Axios, you won't need to modify the component.

Example 3: Form Validation with Functional Components

You have created a React app where form validation is required. If you write the validation logic directly inside the component, any changes to the validation logic would require modifications throughout the code.

Solution:

We will create an abstraction called FormValidator. Different validation libraries (such as Yup or custom validation) will work according to this abstraction.

JSX Code:

<br>
 import React from "react";

<p>// Abstraction: FormValidator<br>
const FormValidatorContext = React.createContext();</p>

<p>// Yup validator implementation<br>
const yupValidator = {<br>
  validate: (formData) => {<br>
    console.log("Validating using Yup");<br>
    return true; // Dummy validation<br>
  }<br>
};</p>

<p>// Custom validator implementation<br>
const customValidator = {<br>
  validate: (formData) => {<br>
    console.log("Validating using custom logic");<br>
    return true; // Dummy validation<br>
  }<br>
};</p>

<p>// FormValidatorProvider for injecting the service<br>
const FormValidatorProvider = ({ children, validatorService }) => {<br>
  return (<br>
    <FormValidatorContext.Provider value={validatorService}><br>
      {children}<br>
    </FormValidatorContext.Provider><br>
  );<br>
};</p>

<p>// Custom hook to use the FormValidator<br>
const useFormValidator = () => {<br>
  return React.useContext(FormValidatorContext);<br>
};</p>

<p>// Form component using FormValidator abstraction<br>
const Form = () => {<br>
  const validator = useFormValidator();</p>

<p>const handleSubmit = () => {<br>
    const formData = { name: "John Doe" };<br>
    const isValid = validator.validate(formData);<br>
    console.log("Is form valid?", isValid);<br>
  };</p>

<p>return <button onClick={handleSubmit}>Submit</button>;<br>
};</p>

<p>// App component<br>
const App = () => {<br>
  return (<br>
    <FormValidatorProvider validatorService={yupValidator}><br>
      <Form /><br>
    </FormValidatorProvider><br>
  );<br>
};</p>

<p>export default App;</p>

Explanation:

• FormValidatorContext acts as an abstraction for form validation.

• The FormValidatorProvider component injects a specific validation logic (e.g., Yup or custom logic).

• The Form component does not depend directly on Yup or custom validation. Instead, it works with the abstraction. If the validation logic needs to be changed, such as switching from Yup to custom validation, the Form component will remain unchanged.

Disadvantages of Dependency Inversion Principle (DIP):

While the Dependency Inversion Principle (DIP) is a highly beneficial design principle, it also comes with some limitations or disadvantages. Below are some of the key drawbacks of using DIP:

1. Increased Complexity: Following DIP requires creating additional interfaces or abstract classes. This increases the structure's complexity, especially in smaller projects. Directly using low-level modules makes the code simpler, but adhering to DIP requires introducing multiple abstractions, which can add complexity.

2. Overhead of Managing Dependencies: Since high-level and low-level modules are not directly connected, additional design patterns like dependency injection or context are needed to manage dependencies. This increases the maintenance overhead of the project.

3. Unnecessary for Small Projects: In smaller projects or in cases with fewer dependencies or low complexity, using DIP can be unnecessary. Implementing DIP creates additional abstractions that make the code more complicated, while directly using low-level modules can be simpler and more effective.

4. Performance Overhead: By introducing abstractions between high-level and low-level modules, there can be some performance overhead, especially if there are many abstraction layers. Each abstraction adds extra processing, which can slightly impact performance.

5. Misuse of Abstraction: Excessive or incorrect use of abstraction can reduce the readability and maintainability of the code. If abstractions are not thoughtfully implemented, they can create more disadvantages than the intended benefits of DIP.

6. Harder to Debug: Due to the use of abstractions and interfaces, debugging can become more challenging. Without directly working with the implementation, identifying where a problem originates from can take more time.

7. Dependency Injection Tools Required: Implementing DIP often requires using dependency injection frameworks or tools, which take time and effort to learn. Additionally, the use of these frameworks increases the complexity of the project.

Conclusion:

Although DIP is a powerful and beneficial principle, it does have its limitations. In smaller projects or less complex contexts, adhering to DIP may be unnecessary. Therefore, proper analysis is needed to determine when and where to apply this principle for the best results.

? Connect with me on LinkedIn:

I regularly share insights on JavaScript, Node.js, React, Next.js, software engineering, data structures, algorithms, and more. Let’s connect, learn, and grow together!

Follow me: Nozibul Islam