首頁 web前端 js教程 了解乾淨的程式碼:系統⚡️

了解乾淨的程式碼:系統⚡️

Sep 18, 2024 pm 01:49 PM

Understanding Clean Code: Systems ⚡️

建構軟體系統時,管理程式碼庫複雜性至關重要。

《Clean Code》第 11 章討論了設計模組化系統,這些系統隨著時間的推移更容易維護和適應。

我們可以使用 JavaScript 範例來說明這些概念。


?大型系統的問題

隨著系統的發展,它們自然會變得更加複雜。這種複雜性可能會導致難以:

  • 從整體上了解系統。
  • 進行更改,而不會造成意外的副作用。
  • 透過新功能或要求擴充系統。

設計良好的系統應該易於修改、可測試和可擴展。實現這一目標的秘訣在於模組化和仔細的關注點分離。


?模組化:分而治之

清潔系統設計的核心是模組化原則。透過將大型系統分解為更小的獨立模組,每個模組都有明確的職責,可以使系統更易於管理。

每個模組應該封裝特定的功能,使整個系統更容易理解和更改。

範例:整理購物車系統

讓我們想像 JavaScript 中的購物車系統。您可以將系統分成幾個模組,而不是將所有邏輯集中到一個檔案:

// cart.js
export class Cart {
    constructor() {
        this.items = [];
    }

    addItem(item) {
        this.items.push(item);
    }

    getTotal() {
        return this.items.reduce((total, item) => total + item.price, 0);
    }
}

// item.js
export class Item {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
}

// order.js
import { Cart } from './cart.js';
import { Item } from './item.js';

const cart = new Cart();
cart.addItem(new Item('Laptop', 1000));
cart.addItem(new Item('Mouse', 25));

console.log(`Total: $${cart.getTotal()}`);
登入後複製

職責劃分如下:Cart 管理商品,Item 代表產品,order.js 協調互動。

這種分離確保每個模組都是獨立的,並且更容易獨立測試和更改。


?封裝:隱藏實作細節

模組化的目標之一是封裝-向系統的其餘部分隱藏模組的內部工作原理。

外部程式碼只能透過其定義良好的介面與模組互動。

這使得更改模組的內部實作變得更容易,而不會影響系統的其他部分。

範例:封裝購物車邏輯

假設我們想要更改計算購物車總數的方式。也許現在我們需要考慮銷售稅。我們可以將這個邏輯封裝在 Cart 類別中:

// cart.js
export class Cart {
    constructor(taxRate) {
        this.items = [];
        this.taxRate = taxRate;
    }

    addItem(item) {
        this.items.push(item);
    }

    getTotal() {
        const total = this.items.reduce((sum, item) => sum + item.price, 0);
        return total + total * this.taxRate;
    }
}

// Now, the rest of the system does not need to know about tax calculations.
登入後複製

系統的其他部分(例如 order.js)不受總計計算方式變化的影響。這使您的系統更加靈活且更易於維護。


?關注點分離:保持責任清晰

大型系統中的一個常見問題是系統的不同部分相互糾纏。

當一個模組開始承擔太多職責時,在不同的上下文中更改或重複使用就會變得更加困難。

關注點分離原則確保每個模組都有一個特定的職責。

範例:單獨處理付款

在購物車範例中,付款處理應在單獨的模組中處理:

// payment.js
export class Payment {
    static process(cart) {
        const total = cart.getTotal();
        console.log(`Processing payment of $${total}`);
        // Payment logic goes here
    }
}

// order.js
import { Cart } from './cart.js';
import { Payment } from './payment.js';

const cart = new Cart(0.07); // 7% tax rate
cart.addItem(new Item('Laptop', 1000));
cart.addItem(new Item('Mouse', 25));

Payment.process(cart);
登入後複製

現在,支付邏輯與購物車管理分開。這使得以後可以輕鬆修改支付流程(例如,與不同的支付提供者整合),而不會影響系統的其餘部分。


?獨立測試模組

模組化的最大好處之一是您可以獨立測試每個模組。

在上面的範例中,您可以為 Cart 類別編寫單元測試,而無需擔心付款的處理方式。

範例:購物車進行單元測試

// cart.test.js
import { Cart } from './cart.js';
import { Item } from './item.js';

test('calculates total with tax', () => {
    const cart = new Cart(0.05); // 5% tax
    cart.addItem(new Item('Book', 20));

    expect(cart.getTotal()).toBe(21);
});
登入後複製

透過清晰的關注點分離,每個模組都可以單獨測試,使調試更容易,開發更快。


?處理依賴關係:避免緊密耦合

當模組彼此過度依賴時,系統某一部分的變更可能會在其他地方產生意想不到的後果。

為了最大限度地減少這種情況,目標是模組之間的鬆散耦合。

這允許每個模組獨立發展。

範例:注入依賴項

不要在模組內硬編碼依賴項,而是將它們作為參數傳遞:

// cart.js
export class Cart {
    constructor(taxRateCalculator) {
        this.items = [];
        this.taxRateCalculator = taxRateCalculator;
    }

    addItem(item) {
        this.items.push(item);
    }

    getTotal() {
        const total = this.items.reduce((sum, item) => sum + item.price, 0);
        return total + this.taxRateCalculator(total);
    }
}
登入後複製

這種方法使 Cart 類別更加靈活,並且更容易使用不同的稅務計算進行測試。


結論:保持系統模組化、靈活且易於更改

編碼快樂! ?

以上是了解乾淨的程式碼:系統⚡️的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何實現視差滾動和元素動畫效果,像資生堂官網那樣?
或者:
怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? 如何實現視差滾動和元素動畫效果,像資生堂官網那樣? 或者: 怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? Apr 04, 2025 pm 05:36 PM

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

JavaScript引擎:比較實施 JavaScript引擎:比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

前端開發中如何實現類似 VSCode 的面板拖拽調整功能? 前端開發中如何實現類似 VSCode 的面板拖拽調整功能? Apr 04, 2025 pm 02:06 PM

探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中,如何實現類似於VSCode...

See all articles