了解js設計模式

2021-10-03 03:55:46 字數 1909 閱讀 3831

針對特定問題, 給出的簡潔而優化的處理方案

乙個設計模式 a

只能解決 a 型別的問題

針對 b 型別的問題, 設計模式 a 解決不了

同乙個問題, 再不同的位置, 是不一定能用同一種方案解決

設計模式, 只在特定的情況, 特定的時期, 針對特定的問題使用

單例模式

組合模式

觀察者模式

介面卡模式

**模式

工廠模式

構建模式

單: 單一, 乙個, 獨個

例: 例項(建構函式的例項化物件)

讓乙個建構函式一輩子只有乙個例項物件

當你需要乙個建構函式一生只能 new 出乙個物件的時候

就可以使用單例模式.

單例模式的簡單應用:

彈出層 alert() 比較醜, 使用者體驗極度不好

好多**會使用乙個自己寫的 div 盒子, 當作彈出層

再自己寫的過程中, 乙個**不可能只彈出一次

創造 div 並顯示出來的建構函式

用**來表示

組合模式

組合模式:

舉例:當你回家的時候, 你一開啟門家裡的所有東西就啟動了, 燈會亮起來, 電視開啟了, 空調開啟了, 窗簾拉開了, …

組合模式:

把我們若干這啟動方式一樣的建構函式放在一起準備乙個總開關, 總開關一啟動, 那麼這些個建構函式就都啟動了

實現組合模式:

需要乙個承載所有建構函式例項的陣列

需要乙個方法, 向陣列裡面新增內容

需要乙個方法, 能把陣列裡面的所有內容啟動了

應用場景

輪播圖:

基礎版本的輪播圖依靠定時器再左右移動,一旦我切換頁面以後, dom 不動, 定時器在動, 等你再切換回來頁面的時候就出問題了。當我離開當前頁面的時候, 應該關閉定時器,等我再次回到當前頁面的時候, 應該再從新啟動定時器,乙個頁面只有乙個輪播圖, 那麼沒有問題,一旦乙個頁面多個輪播圖的時候, 我們就可以整乙個組合模式做乙個總開關,離開頁面的時候, 所有的輪播圖都停止定時器,再來乙個總開關,回到頁面的時候, 所有的輪播圖再次啟動

觀察者模式

又稱 發布/訂閱 模式

觀察者角度

就像我們小時候的班主任一樣

班主任, 年級主任, 教務主任, 都有乙個共同的能力叫做 請家長

他們就是暗中觀察我們的人, 一旦我們做的事情和他們想的不一樣, 就回觸發技能

他們就是觀察者, 當被觀察者一旦出現變化, 立馬觸發他們的技能

被觀察者

就是乙個學生, 你的狀態就應該是 好好學習

一旦你的狀態改變為 玩手機

立馬就會通知正在觀察著你的人, 觀察著你的人, 就會觸發技能

目的:

讓 觀察者 看著 被觀察者, 只要資料改變了

就讓 觀察者 做一些事情

設計模式了解

設計模式 design pattern 是前輩們對 開發經驗的總結,是解決特定問題的一系列套路。它不是語法規定,而是一套用來提高 可復用性 可維護性 可讀性 穩健性以及安全性的解決方案。如果要強行舉例子的話,我覺得有點像古代留下的三十六計,什麼情況下用什麼計謀。什麼情況下用什麼設計模式一樣。簡單來說...

全面了解「設計模式」

其他設計模式介紹 單例模式 singleton 最易懂的設計模式解析 簡單工廠模式 factorypattern 最易懂的設計模式解析 工廠方法模式 factory method 最易懂的設計模式解析 抽象工廠模式 abstract factory 最易懂的設計模式解析 策略模式 strategy ...

了解設計模式 二

不是為了用設計模式而用設計模式 設計模式三大型別 一 建立型模式 單例模式 抽象工廠模式 建造者模式 工廠模式 原型模式。二 結構型模式 介面卡模式 橋接模式 裝飾模式 組合模式 外觀模式 享元模式 模式。三 行為型模式 模版方法模式 命令模式 迭代器模式 觀察者模式 中介者模式 備忘錄模式 直譯器...