前端程式設計中的設計模式

2021-10-05 19:08:36 字數 1478 閱讀 6221

工廠

函式封裝建立物件細節,傳參呼叫函式返回相似物件

缺點(無繼承性,不知其型別)

建構函式

直接將屬性方法賦值給this

優點:有繼承性,知其型別

缺點:每次例項化,方法也重新例項化。如果把函式移到外部,造成全域性函式太多

原型建構函式的原型物件上的屬性和方法被建構函式的例項共享

缺點:值型別屬性所有例項都可更改

組合使用建構函式模式和原型模式

寄生建構函式

工廠的形式+new例項化

在包裝函式內部呼叫別的建構函式,新生成的物件加以包裝並返回

缺點:無繼承性

穩妥建構函式模式

無公共屬性,例項方法中不使用this,不使用new呼叫

也無繼承性

單例mobx中,單例模式建立資料物件,在不同模組間共享資料,且避免資料的重複載入。

public

class

singleton

public

static singleton getinstance()

return instance;

}}

裝飾模式

將乙個類的物件嵌入另乙個物件中,由另乙個物件來決定是否呼叫嵌入物件的行為以便擴充套件自己的行為,我們稱這個嵌入的物件為裝飾器(decorator)

裝飾模式可以在不需要創造更多子類的情況下,將物件的功能加以擴充套件。這就是裝飾模式的模式動機。

觀察者模式

事件監聽

mobx中的元件和資料

redux中的action與state

發布訂閱機制,在觀察者和被觀察者之間建立乙個chanel,解耦觀察者和被觀察者

原型鏈問題在於引用型別值共享/向超類建構函式傳引數,會影響物件例項

借用建構函式

子型別的建構函式內部呼叫超型別建構函式,同時傳參

缺點:函式無法復用

組合缺陷:子建構函式原型指向父例項(此處建立的屬性多餘了)/子建構函式借用父建構函式,故子例項化需兩次呼叫父構造

原型式繼承

父例項作為子例項臨時建構函式的原型

優點:無需費力於建構函式的建立

缺點:淺複製,共享屬性

寄生式繼承

原型式產生新物件,增強新物件,返回

缺點:共享&函式復用率低

寄生組合

父類原型的副本作為子類的原型

model 儲存資料view 展示資料controller控制資料,三者各司其職

例如react redux中

model----store中的state

view----react元件

controller----action+reducer

model和view的通訊依靠viewmodel

例如vue

vue----viewmodel(與view雙向繫結,且監聽model變化)

view----檢視層

model----資料

前端中的設計模式 單例模式

什麼是單例模式 保證乙個類僅有乙個例項,並提供乙個訪問它的全域性訪問點.為什麼需要單例模式 單例模式的優點 常見的單例模式 單例模式的實現 class godstatic getinstance this this instance instance instance newgod return t...

前端常用設計模式

炒個冷飯,設計模式 前端常用設計模式 我們在面試的時候很多情況都需要手寫 所以我們寫都時候盡量用es6,且裡面要用設計模式。這樣評分可以達到優秀,如果只是手寫實現出功能那麼我們只能是及格 主要面試和別人競爭 游泳健身了解一下 github 哈哈哈哈哈?你走到一棟大樓面前 哇!鋼筋,水泥,木板。面向過...

前端常用設計模式

像流水線作業,產出一樣的產品。傳參進去,操作的具體邏輯封裝在乙個方法裡,最終返回乙個物件。將new操作單獨封裝,遇到new時,就要考慮是否用工廠模式 這個creator就是乙個工廠,裡面有create函式,工廠通過create函式建立product。這樣通過create已經把真正的建構函式封裝起來,...