」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 讓 SOLID 變得簡單:乾淨程式碼原則的 JavaScript 指南

讓 SOLID 變得簡單:乾淨程式碼原則的 JavaScript 指南

發佈於2024-08-27
瀏覽:403

Making SOLID Simple: A JavaScript Guide to Clean Code Principles

当我第一次开始涉足软件开发世界时,我经常发现自己被周围飞来飞去的流行语和概念淹没。似乎特别令人畏惧的概念之一是“坚实的原则”。感觉就像只有“认真的”开发人员才需要担心的事情。但随着我对编码越来越熟悉,我意识到这些原则并不是花哨,而是编写不会让你在几个月后就想抓狂的代码。

所以,这是我对 JavaScript 中 SOLID 原则的看法——一本严肃实用的指南,我希望在开始时就拥有它。

1. 单一职责原则(SRP):一份工作,做好

它是什么?

单一职责原则规定,一个类应该只有一个改变的理由,这意味着它应该只有一项工作或职责。

现实生活中的类比

想想您最喜欢的咖啡店的咖啡师。他们的工作是煮咖啡。如果他们突然必须开始修理浓缩咖啡机、提供糕点、倒垃圾,事情就会变得混乱。就像咖啡师应该专注于煮咖啡一样,你的班级应该专注于做好一件事。

JavaScript 中的示例:

假设您有一个 User 类,用于处理用户身份验证、数据验证和数据库存储。做得太过分了!通过将这些职责拆分为单独的类,可以使代码更易于管理和维护。

class UserAuthenticator {
  login(user) {
    // handle login
  }
}

class UserDataValidator {
  validate(user) {
    // validate user data
  }
}

class UserDatabase {
  save(user) {
    // save user to the database
  }
}

2. 开闭原则(OCP):扩展,不要修改

它是什么?

开放/封闭原则规定软件实体应该对扩展开放,但对修改关闭。换句话说,您应该能够在不更改现有代码的情况下添加新功能。

现实生活中的类比:

想象一下您最喜欢的游戏机。您可以添加新游戏、控制器和配件,但无需打开它并重新接线。同样,您应该能够在不更改其核心结构的情况下向代码添加新功能。

JavaScript 中的示例:

假设您有一个 Shape 类,其中包含计算面积的方法。如果您需要添加新形状(例如三角形),则不必修改现有类。相反,扩展它。

class Shape {
  area() {
    throw "Area method not implemented";
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius * this.radius;
  }
}

3.里氏替换原则(LSP):保持可替换

它是什么?

里氏替换原则规定超类的对象应该可以用子类的对象替换,而不影响程序的正确性。

现实生活中的类比:

想象一下租车。无论您购买的是轿车还是 SUV,您都希望它具有汽车的基本功能:驾驶、转向和停车。如果您的租赁汽车需要一套完全不同的控制装置,那么您就有麻烦了!同样,子类的行为方式不应违反其父类设定的期望。

JavaScript 中的示例:

如果你有一个 Bird 类和一个扩展它的 Penguin 类,那么 Penguin 的行为仍然应该像 Bird,即使它不能飞。它仍然应该走路、吃饭,甚至可能游泳。

class Bird {
  move() {
    console.log("Flies in the sky");
  }
}

class Penguin extends Bird {
  move() {
    console.log("Swims in the water");
  }
}

const myBird = new Bird();
const myPenguin = new Penguin();

myBird.move(); // Flies in the sky
myPenguin.move(); // Swims in the water

4. 接口隔离原则(ISP):定制接口

它是什么?

接口隔离原则建议客户端不应被迫实现他们不使用的接口。您应该创建更小、更具体的界面,而不是拥有一个大型界面。

现实生活中的类比:

想象一家餐厅,厨师还必须兼任服务员、调酒师和洗碗机。这是压倒性的和低效的!相反,每个角色都应该有其特定的任务。同样,您的界面应该专业化和集中化。

JavaScript 中的示例:

如果您有一个包含 buildHouse、paintHouse 和 designHouse 等方法的 Worker 接口,则仅粉刷房屋的 Worker 不必实现所有其他方法。将其分解为更小的接口。

class Builder {
  build() {
    console.log("Building house...");
  }
}

class Painter {
  paint() {
    console.log("Painting house...");
  }
}

class Designer {
  design() {
    console.log("Designing house...");
  }
}

5. 依赖倒置原则(DIP):依赖抽象

它是什么?

依赖倒置原则指出高级模块不应该依赖于低级模块。两者都应该依赖于抽象。

现实生活中的类比:

想想如何将手机充电器插入墙壁插座。您不需要了解墙内电线的详细信息 - 您所需要的只是为设备供电的接口(插座)。同样,您的代码应该依赖于抽象(接口),而不是具体的实现。

JavaScript 中的示例:

如果您有一个直接控制 Switch 类的 LightBulb 类,那么您正在创建紧密耦合。相反,两者都应该依赖于像 PowerSource 这样的接口。

class LightBulb {
  turnOn(powerSource) {
    powerSource.provideElectricity();
    console.log("Light is on");
  }
}

class Switch {
  constructor(powerSource) {
    this.powerSource = powerSource;
  }

  operate() {
    this.powerSource.togglePower();
  }
}

class PowerSource {
  provideElectricity() {
    console.log("Providing electricity");
  }

  togglePower() {
    console.log("Toggling power");
  }
}

结论

掌握 SOLID 原则就像学习使用一套经过验证的食谱做饭。一旦理解了它们,您就可以编写出不仅实用而且优雅且易于维护的代码。因此,下次当您遇到编码难题时,请记住:这是有原则的!

编码愉快! ?

版本聲明 本文轉載於:https://dev.to/suryanshsingh2001/making-solid-simple-a-javascript-guide-to-clean-code-principles-1n6j?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 網頁抓取 - 有趣!
    網頁抓取 - 有趣!
    一個很酷的術語: CRON = 依指定時間間隔自動安排任務的程式設計技術 網路什麼? 在研究專案等時,我們通常會從各個網站編寫資訊 - 無論是日記/Excel/文件等。 我們正在抓取網路並手動提取資料。 網路抓取正在自動化這個過程。 例子 當在網路上搜尋運動鞋時...
    程式設計 發佈於2024-11-06
  • 感言網格部分
    感言網格部分
    ?在學習 CSS 網格時剛剛完成了這個推薦網格部分的建立! ?網格非常適合建立結構化佈局。 ?現場示範:https://courageous-chebakia-b55f43.netlify.app/ ? GitHub:https://github.com/khanimran17/Testimoni...
    程式設計 發佈於2024-11-06
  • 為什麼 REGISTER_GLOBALS 被認為是 PHP 中的主要安全風險?
    為什麼 REGISTER_GLOBALS 被認為是 PHP 中的主要安全風險?
    REGISTER_GLOBALS 的危險REGISTER_GLOBALS 是一個 PHP 設定,它允許所有 GET 和 POST 變數在 PHP 腳本中用作全域變數。此功能可能看起來很方便,但由於潛在的安全漏洞和編碼實踐,強烈建議不要使用它。 為什麼 REGISTER_GLOBALS 不好? REG...
    程式設計 發佈於2024-11-06
  • Nodemailer 概述:在 Node.js 中輕鬆發送電子郵件
    Nodemailer 概述:在 Node.js 中輕鬆發送電子郵件
    Nodemailer 是用於發送電子郵件的 Node.js 模組。以下是快速概述: Transporter:定義電子郵件的傳送方式(透過 Gmail、自訂 SMTP 等)。 const transporter = nodemailer.createTransport({ ... }); 訊息物...
    程式設計 發佈於2024-11-06
  • JavaScript 中的輕鬆錯誤處理:安全賦值運算子如何簡化您的程式碼
    JavaScript 中的輕鬆錯誤處理:安全賦值運算子如何簡化您的程式碼
    JavaScript 中的錯誤處理可能很混亂。將大塊程式碼包裝在 try/catch 語句中是可行的,但隨著專案的成長,調試就變成了一場噩夢。幸運的是,有更好的方法。輸入 安全賦值運算子 (?=) - 一種更乾淨、更有效的錯誤處理方法,可將程式碼保持可讀性並簡化偵錯。 什麼是安全賦...
    程式設計 發佈於2024-11-06
  • Javascript 很難(有悲傷)
    Javascript 很難(有悲傷)
    这将是一个很长的阅读,但让我再说一遍。 JAVASCRIPT很难。上次我们见面时,我正在踏入 Javascript 的世界,一个眼睛明亮、充满希望的程序员踏入野生丛林,说“这能有多难?”。我错得有多离谱??事情变得更难了,我(勉强)活了下来,这是关于我的旅程的一个小混乱的故事。 变量:疯狂的开始 ...
    程式設計 發佈於2024-11-06
  • ## 您可以在不使用 JavaScript 的情況下使用 CSS 建立餅圖分段嗎?
    ## 您可以在不使用 JavaScript 的情況下使用 CSS 建立餅圖分段嗎?
    使用 CSS 在圓中分段使用 border-radius 在 CSS 中建立圓是一種常見的做法。但是,我們可以透過分段(類似餅圖)來實現類似的效果嗎?本文深入研究了僅透過 HTML 和 CSS 實現此目的的方法,不包括使用 JavaScript。 產生相等大小的段相等大小段的一種方法涉及產生以下內容...
    程式設計 發佈於2024-11-06
  • 從頭開始建立一個小型向量存儲
    從頭開始建立一個小型向量存儲
    With the evolving landscape of generative AI, vector databases are playing crucial role in powering generative AI applications. There are so many vect...
    程式設計 發佈於2024-11-06
  • 如何在Chrome使用AI實驗API
    如何在Chrome使用AI實驗API
    要在 Chrome 中使用實驗性 AI API,請依照下列步驟操作: 硬體需求 4GB 記憶體 GPU可用 至少 22GB 空間 Windows 10.11 或 macOS Ventura 或更新版本(無 Linux 規格) 尚不支持: Chrome作業系統 Chrome iOS C...
    程式設計 發佈於2024-11-06
  • 評論:Adam Johnson 的《Boost Your Django DX》
    評論:Adam Johnson 的《Boost Your Django DX》
    書評很微妙。您不想破壞它,但您也想讓潛在讀者體驗所期待的內容。這是提供背景和保持興趣之間的巧妙平衡。我試圖在這篇評論中達到這種平衡,為您提供足夠的內容來吸引您,而不透露太多。 一個小背景故事:我第一次從 Djangonaut Space 的好朋友 Tim 那裡聽說這本書,並將其添加到我的閱讀清單中...
    程式設計 發佈於2024-11-06
  • 如何將陣列元素分組並組合多維數組中另一列的值?
    如何將陣列元素分組並組合多維數組中另一列的值?
    按列將數組元素分組並組合另一列中的值給定一個包含兩列嵌套數組的數組,任務是將基於特定列的子數組,並將每個組中另一列的值連接起來,產生以逗號分隔的清單。 考慮以下範例陣列:$array = [ ["444", "0081"], ["44...
    程式設計 發佈於2024-11-06
  • 三個新加入的例外功能
    三個新加入的例外功能
    從 JDK 7 開始,異常處理已擴展為三個新功能:自動資源管理、多重捕獲和更準確的重新拋出。 多重catch可讓您使用同一個catch子句擷取多個異常,避免程式碼重複。 要使用多重捕獲,請指定由 | 分隔的異常清單。在 catch 子句中。每個參數都是隱式最終參數。 用法範例:catch(f...
    程式設計 發佈於2024-11-06
  • 如何修復執行 ES6 程式碼時出現「意外的令牌匯出」錯誤?
    如何修復執行 ES6 程式碼時出現「意外的令牌匯出」錯誤?
    「排除意外的令牌匯出錯誤」嘗試在專案中執行ES6 程式碼時,可能會出現「意外的令牌導出”錯誤。此錯誤表示所使用的環境不支援 ES6 模組中使用的匯出關鍵字語法。 錯誤詳細資料以下程式碼片段舉例說明了錯誤的來源: export class MyClass { constructor() { ...
    程式設計 發佈於2024-11-06
  • 即使卸載後,VSCode 擴充功能也不會從檔案系統中刪除,我建立了一個解決方案!
    即使卸載後,VSCode 擴充功能也不會從檔案系統中刪除,我建立了一個解決方案!
    所以這是基於 vscode 的編輯器的問題。即使您卸載了擴充功能,它也會保留在檔案系統中,並隨著時間的推移堵塞您的系統。我創建了一個簡單的解決方案。執行此 python 腳本將刪除 vscode 上未安裝的擴充功能。 它適用於 VS Code、VS Code Insiders,也適用於 VSCod...
    程式設計 發佈於2024-11-06
  • 透過 GitHub Actions 按計畫更新網站內容
    透過 GitHub Actions 按計畫更新網站內容
    我想分享我建立一個自我永續的內容管理系統的旅程,該系統不需要傳統意義上的內容資料庫。 問題 該網站的內容(部落格文章和書籤)儲存在 Notion 資料庫中: 附書籤的資料庫 –  Notion UI 我試圖解決的問題是不必在添加每個書籤後手動部署網站。最重要的是 - 保持託管盡可能...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3