JavaScript高級:常見設計模式

設計模式是在軟件開發中重復出現的問題的解決方案,它們是經過驗證的、被廣泛接受的最佳實踐。設計模式可以讓我們避免重復造輪子,提高代碼質量和可維護性。在本文中,我們將介紹幾種常見的設計模式,以及它們的實現和應用。

1. 單例模式

單例模式保證一個類只有一個實例,并提供全局訪問點。在 JavaScript 中,可以通過閉包來實現單例模式。

const Singleton = (function() {let instance;function createInstance() {// 創建實例的邏輯return {};}return {getInstance: function() {if (!instance) {instance = createInstance();}return instance;}};
})();const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // 輸出:true

2. 工廠模式

工廠模式用于創建對象的方法,將對象的創建與使用分離,降低耦合度。在 JavaScript 中,可以通過構造函數或者簡單工廠來實現工廠模式。

class Product {constructor(name) {this.name = name;}
}class ProductFactory {createProduct(name) {return new Product(name);}
}const factory = new ProductFactory();
const product = factory.createProduct('A');

3. 觀察者模式

觀察者模式定義對象間的一種一對多依賴關系,當一個對象狀態發生改變時,其依賴者都會收到通知并自動更新。在 JavaScript 中,可以使用發布-訂閱模式來實現觀察者模式。

class Subject {constructor() {this.observers = [];}addObserver(observer) {this.observers.push(observer);}notify(message) {this.observers.forEach(observer => observer.update(message));}
}class Observer {update(message) {console.log(`Received message: ${message}`);}
}const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();subject.addObserver(observer1);
subject.addObserver(observer2);subject.notify('Hello, observers!');

4. 策略模式

策略模式定義一系列算法,并將其封裝成策略類,使它們可以互相替換。在 JavaScript 中,可以使用對象字面量來實現策略模式。

const discountStrategies = {normal: amount => amount,vip: amount => amount * 0.8,premium: amount => amount * 0.7
};function calculateDiscount(strategy, amount) {return discountStrategies[strategy](amount);
}const normalPrice = 100;
const vipPrice = calculateDiscount('vip', normalPrice);

5. 裝飾者模式

裝飾者模式動態地將責任附加到對象上,以擴展其功能。在 JavaScript 中,可以通過繼承或組合來實現裝飾者模式。

class Coffee {cost() {return 10;}
}class MilkDecorator {constructor(coffee) {this.coffee = coffee;}cost() {return this.coffee.cost() + 5;}
}class SugarDecorator {constructor(coffee) {this.coffee = coffee;}cost() {return this.coffee.cost() + 2;}
}let coffee = new Coffee();
coffee = new MilkDecorator(coffee);
coffee = new SugarDecorator(coffee);console.log(coffee.cost()); // 輸出:17

設計模式是開發者們多年實踐的經驗總結,它們可以幫助我們解決復雜的問題并提高代碼的可維護性。單例模式、工廠模式、觀察者模式、策略模式、裝飾者模式等都是常見且實用的設計模式。通過理解這些模式的實現和應用,你將能夠更好地構建優雅、可擴展的應用程序,提升你的編程藝術水平。無論你是初學者還是有經驗的開發者,掌握設計模式,都將讓你在編程的世界中更加游刃有余,創造出更加出色的作品!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/37315.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/37315.shtml
英文地址,請注明出處:http://en.pswp.cn/news/37315.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Conda(Python管理工具)

1.簡介 Conda是一個開源的包管理器和環境管理器,主要用于管理Python,但也可以用于其他語言。它主要用于安裝、管理和更新軟件包及其依賴項,以及創建、保存、加載和切換不同的開發環境。Conda可以在Windows、MacOS和Linux系統上使用&#xff…

Spring Boot + Vue3前后端分離實戰wiki知識庫系統十二--用戶管理單點登錄開發一...

目標: 在上一次https://www.cnblogs.com/webor2006/p/17533745.html我們已經完成了文檔管理的功能模塊開發,接下來則開啟新模塊的學習---用戶登錄,這塊還是有不少知識點值得學習的,先來看一下整體的效果,關于效果官網有…

2023全國大學生數學建模競賽C提思路模型代碼

目錄 1.C題思路模型:比賽開始后,第一時間更新,獲取見文末名片 2.比賽時間:2023年9月7日18點到2023年9月10日20點 3 全國大學生數學建模競賽常見數模問題 3.1 分類問題 3.2 優化問題 詳細思路見此名片,開賽第一時間…

YOLOv8目標檢測算法

YOLOv8目標檢測算法相較于前幾代YOLO系列算法具有如下的幾點優勢: 更友好的安裝/運行方式速度更快、準確率更高新的backbone,將YOLOv5中的C3更換為C2FYOLO系列第一次嘗試使用anchor-free新的損失函數 YOLOv8簡介 YOLOv8 是 Ultralytics 公司繼 YOLOv5…

FiboSearch Pro – Ajax Search for WooCommerce 商城AJAX實時搜索插件

FiboSearch Pro是最受歡迎的WooCommerce 產品搜索插件。它為您的用戶提供精心設計的高級 AJAX 搜索欄,并提供實時搜索建議。默認情況下,WooCommerce 提供非常簡單的搜索解決方案,沒有實時產品搜索,甚至沒有 SKU 搜索。FiboSearch&…

網絡基礎(一)橋接網絡

網絡基礎知識 橋接網絡 橋接網絡是一種網絡設計技術,其目的是將兩個或多個網絡段連接在一起,使它們在邏輯上表現為單個網絡。這通過使用網絡橋來實現,網絡橋工作在數據鏈路層(第2層),只關心MAC地址&#…

uniapp開發微信小程序底部地區選擇彈框

個人項目地址: SubTopH前端開發個人站 (自己開發的前端功能和UI組件,一些有趣的小功能,感興趣的伙伴可以訪問,歡迎提出更好的想法,私信溝通,網站屬于靜態頁面) SubTopH前端開發個人站…

React Native 圖片組件基礎知識

在 React Native 中使用圖片其實跟 HTML 中使用圖片一樣簡單,在 React Native 中我們使用Image組件來呈現圖片的內容,其中主要的屬性有:source。這個屬性主要是設置圖片的內容,它可以是網絡圖像地址、靜態資源、臨時本地圖像以及本…

Android側滑欄(一)可縮放可一起移動的側滑欄

在實際的各類App開發中,經常會需要做一個左側的側滑欄,類似于QQ這種。 今天這篇文章總結下自己在開發中遇到的這類可以跟隨移動且可以縮放的側滑欄。 一、實現原理 使用 HorizontalScrollView 實現一個水平方向的可滑動的View,左布局為側滑…

MySQL-MGR報錯MY-011526

問題背景: 單主MGR集群,主節點在服務器意外重啟之后,無法重新加入現有MGR集群,報錯誤[MY-011526] [Repl] Plugin group_replication reported: This member has more executed transactions than those present in the group. Local transact…

2023年度漏洞預警

1 漏洞 漏洞是硬件,軟件,協議的具體實現或系統安全策略上存在的缺陷。從而可以使用攻擊者能夠在破壞系統。 2 漏洞匯總數據 以下數據針對 23 年截至8月期間爆發的高危嚴重漏洞進行了數據統計和分析, 具體的數據如下所示: 漏洞…

Camx--概述

該部分代碼主要位于 vendor/qcom/proprietary/ 目錄下: 其中 camx 代表了通用功能性接口的代碼實現集合(CamX),chi-cdk代表了可定制化需求的代碼實現集合(CHI),從圖中可以看出Camx部分對上作為H…

v3s平臺學習

printf 應用程序 arm-linux-gnueabihf-gcc test.c 復制a.out 到 sd卡 /media/shen/rootfs/root 運行a.out 不顯示 解決方法 https://blog.csdn.net/whatday/article/details/85137031/?utm_mediumdistribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~def…

Linux 性能分析之iostat命令詳解

Linux 性能分析之iostat命令詳解 iostat命令是IO性能分析的常用工具,其是input/output statistics的縮寫。本文將著重于下面幾個方面介紹iostat命令: iostat的安裝iostat命令行選項說明iostat輸出內容分析如何確定磁盤IO的瓶頸iostat實際案例 命令的安…

django boostrap html實現可拖拽的左右布局,鼠標拖動調整左右布局的大小或占比

一、實現的效果 最近需要在Django項目中,實現一個左右布局的html頁面,頁面框架使用的是boostrap。但這個布局不是簡單的左右分欄布局,而是需要實現可以通過鼠標拖拽的方式動態調整左右兩側布局的大小和占比。效果大致如下: 一開始,頁面分為左右兩塊布局: 鼠標放到中間的…

Python腳本之連接MySQL【四】

本文為博主原創,未經授權,嚴禁轉載及使用。 本文鏈接:https://blog.csdn.net/zyooooxie/article/details/124640412 之前寫了篇 Python腳本之連接MySQL【三】,日常使用過程中,代碼實際有很多改動,特此更新…

阿里云SMS,APi接口返回錯誤碼

API錯誤碼 更新時間:2023-06-29 16:33提交缺陷 產品詳情 相關技術圈 我的收藏 調用API接口失敗時,會返回錯誤碼。本文檔為您提供API接口錯誤碼列表,請根據錯誤碼和對應錯誤信息排查問題。 錯誤碼(Code) 錯誤信息…

【先進PID控制算法(ADRC,TD,ESO)加入永磁同步電機發電控制仿真模型研究(Matlab代碼實現)

💥💥💞💞歡迎來到本博客????💥💥 🏆博主優勢:🌞🌞🌞博客內容盡量做到思維縝密,邏輯清晰,為了方便讀者。 ??座右銘&a…

EJB基本概念和使用

一、EJB是什么? EJB是sun的JavaEE服務器端組件模型,是一種規范,設計目標與核心應用是部署分布式應用程序。EJB2.0過于復雜,EJB3.0的推出減輕了開發人員進行底層開發的工作量,它取消或最小化了很多(以前這些是必須實現)…

如何使用Flask-RESTPlus構建強大的API

如何使用Flask-RESTPlus構建強大的API 引言: 在Web開發中,構建API(應用程序接口)是非常常見和重要的。API是一種允許不同應用程序之間交互的方式,它定義了如何請求和響應數據的規范。Flask-RESTPlus是一個基于Flask的…