前端設(shè)計(jì)原則

1 開(kāi)閉原則

該原則指出軟件實(shí)體（類、模塊、函數(shù)等）應(yīng)該對(duì)擴(kuò)展開(kāi)放，對(duì)修改關(guān)閉。也就是說(shuō)，在添加新功能時(shí)，應(yīng)該通過(guò)擴(kuò)展現(xiàn)有代碼來(lái)實(shí)現(xiàn)，而不是直接修改已有的代碼。這樣可以確保現(xiàn)有代碼的穩(wěn)定性，并且減少對(duì)其他部分的影響。

// 開(kāi)閉原則示例

// 原始功能實(shí)現(xiàn)類
class OriginalFunctionality {
  performAction() {
    console.log("Original functionality");
  }
}

// 擴(kuò)展功能實(shí)現(xiàn)類
class ExtendedFunctionality extends OriginalFunctionality {
  performAction() {
    super.performAction();
    console.log("Extended functionality");
  }
}

// 使用示例
const functionality = new ExtendedFunctionality();
functionality.performAction();

在上述例子中，有一個(gè)原始功能實(shí)現(xiàn)類 OriginalFunctionality，它定義了一個(gè) performAction 方法來(lái)執(zhí)行某些功能。

根據(jù)開(kāi)閉原則，需要通過(guò)擴(kuò)展而不是修改原始功能類來(lái)添加新功能。因此，創(chuàng)建一個(gè)擴(kuò)展功能實(shí)現(xiàn)類 ExtendedFunctionality，它繼承自 OriginalFunctionality 并重寫了 performAction 方法，在執(zhí)行新功能之前先調(diào)用了原始功能。

通過(guò)應(yīng)用開(kāi)閉原則，可以減少對(duì)現(xiàn)有代碼的修改，從而提高代碼的穩(wěn)定性和可維護(hù)性。同時(shí)，它也使得代碼更易于擴(kuò)展和重用，提供了更靈活的架構(gòu)設(shè)計(jì)。

這里，再介紹一個(gè)常見(jiàn)的開(kāi)閉原則示例：

// 原始的 if-else 結(jié)構(gòu)
function performAction(option) {
  if (option === 'A') {
    console.log("Performing action A");
  } else if (option === 'B') {
    console.log("Performing action B");
  } else if (option === 'C') {
    console.log("Performing action C");
  } else {
    console.log("Invalid option");
  }
}

// 使用 key-value 形式執(zhí)行特定邏輯
const actions = {
  A: () => console.log("Performing action A"),
  B: () => console.log("Performing action B"),
  C: () => console.log("Performing action C"),
};

function performAction(option) {
  const action = actions[option];
  if (action) {
    action();
  } else {
    console.log("Invalid option");
  }
}

// 使用示例
performAction('A'); // 輸出: Performing action A
performAction('B'); // 輸出: Performing action B
performAction('C'); // 輸出: Performing action C
performAction('D'); // 輸出: Invalid option

將 if-else 結(jié)構(gòu)改成 key-value 形式來(lái)執(zhí)行特定邏輯，可以被視為一種應(yīng)用開(kāi)閉原則的方式。這樣的改變?cè)试S通過(guò)添加新的鍵值對(duì)來(lái)擴(kuò)展代碼，而不需要修改原有的邏輯。

2 單一職責(zé)原則

該原則提倡每個(gè)類或模塊應(yīng)該只負(fù)責(zé)一個(gè)單一的功能或任務(wù)。這樣可以提高代碼的可讀性、可維護(hù)性和重用性。當(dāng)一個(gè)類具有多個(gè)職責(zé)時(shí)，建議將其拆分為多個(gè)獨(dú)立的類，每個(gè)類專注于一個(gè)職責(zé)。

// 組件的單一職責(zé)示例

// 用戶列表組件，負(fù)責(zé)渲染用戶列表
class UserList {
  render(users) {
    // 渲染用戶列表邏輯...
    console.log("User list rendered:", users);
  }
}

// 用戶管理組件，負(fù)責(zé)處理用戶的增刪改操作
class UserManager {
  createUser(userData) {
    // 創(chuàng)建用戶邏輯...
    console.log("User created:", userData);
  }

  updateUser(userId, userData) {
    // 更新用戶邏輯...
    console.log("User updated:", userId, userData);
  }

  deleteUser(userId) {
    // 刪除用戶邏輯...
    console.log("User deleted:", userId);
  }
}

// 模塊的單一職責(zé)示例

// 用戶相關(guān)功能模塊，僅負(fù)責(zé)用戶相關(guān)的功能
const userModule = {
  createUser(userData) {
    // 創(chuàng)建用戶邏輯...
    console.log("User created:", userData);
  },

  updateUser(userId, userData) {
    // 更新用戶邏輯...
    console.log("User updated:", userId, userData);
  },

  deleteUser(userId) {
    // 刪除用戶邏輯...
    console.log("User deleted:", userId);
  }
};

// 函數(shù)的單一職責(zé)示例

// 檢查用戶名是否唯一
function checkUsernameUnique(username) {
  // 檢查用戶名唯一性邏輯...
  console.log("Checking username uniqueness:", username);
  return true;
}

// 驗(yàn)證密碼
function validatePassword(password) {
  // 驗(yàn)證密碼邏輯...
  console.log("Validating password:", password);
  return true;
}

// 使用示例
const userList = new UserList();
userList.render(["John", "Mike"]);

const userManager = new UserManager();
userManager.createUser({ name: "John", age: 25 });

userModule.updateUser(1, { name: "Mike" });

checkUsernameUnique("john123");

validatePassword("password123");

上述示例展示了組件、模塊和函數(shù)的單一職責(zé)原則應(yīng)用。

• 組件的單一職責(zé)：UserList 組件負(fù)責(zé)渲染用戶列表，UserManager 組件負(fù)責(zé)處理用戶的增刪改操作。每個(gè)組件只負(fù)責(zé)一個(gè)特定的功能，使得代碼更加清晰和易于維護(hù)。

• 模塊的單一職責(zé)：userModule 是一個(gè)用戶相關(guān)功能的模塊，其中包含了創(chuàng)建、更新和刪除用戶的功能。該模塊只關(guān)注用戶相關(guān)的功能，保持了模塊的單一職責(zé)。

• 函數(shù)的單一職責(zé)：checkUsernameUnique 函數(shù)用于檢查用戶名是否唯一，validatePassword 函數(shù)用于驗(yàn)證密碼。每個(gè)函數(shù)負(fù)責(zé)一個(gè)具體的功能，使得函數(shù)的職責(zé)清晰可見(jiàn)。

通過(guò)應(yīng)用單一職責(zé)原則，可以將不同的功能分別封裝到不同的組件、模塊和函數(shù)中，使代碼更具可讀性、可維護(hù)性和重用性。這種設(shè)計(jì)方式幫助我們遵循獨(dú)立職責(zé)的原則，提高代碼的可擴(kuò)展性，并減少不必要的耦合。

3 依賴倒置原則

該原則提倡通過(guò)抽象來(lái)解耦代碼之間的依賴關(guān)系。高層模塊應(yīng)該依賴于抽象接口，而不是具體實(shí)現(xiàn)細(xì)節(jié)。這樣可以降低模塊之間的耦合度，并且使得系統(tǒng)更容易擴(kuò)展和修改，同時(shí)也更易于進(jìn)行測(cè)試。

// 不符合依賴倒置原則

class UserService {
  getUser(userId) {
    // 獲取用戶邏輯...
  }
}

class UserController {
  constructor() {
    this.userService = new UserService();
  }

  getUser(userId) {
    const user = this.userService.getUser(userId);
    // 處理用戶數(shù)據(jù)邏輯...
  }
}

// 符合依賴倒置原則

class UserService {
  getUser(userId) {
    // 獲取用戶邏輯...
  }
}

class UserController {
  constructor(userService) {
    this.userService = userService;
  }

  getUser(userId) {
    const user = this.userService.getUser(userId);
    // 處理用戶數(shù)據(jù)邏輯...
  }
}

// 使用示例

const userService = new UserService();
const userController = new UserController(userService);

userController.getUser(123);

上述示例展示了一個(gè)不符合依賴倒置原則的情況和一個(gè)符合依賴倒置原則的情況。

在不符合原則的情況下，UserController 類內(nèi)部直接創(chuàng)建了 UserService 的實(shí)例。這種硬編碼的依賴關(guān)系導(dǎo)致了緊耦合，不利于代碼的擴(kuò)展和維護(hù)。

通過(guò)采用依賴注入的方式，可以將 UserService 作為參數(shù)傳遞給 UserController 的構(gòu)造函數(shù)。這樣，UserController 不再關(guān)心具體的 UserService 實(shí)現(xiàn)，而是依賴于抽象接口，降低了組件之間的耦合性。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-733258.html

到了這里，關(guān)于前端設(shè)計(jì)模式和設(shè)計(jì)原則之設(shè)計(jì)原則的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！