js 設計模式

2021-09-26 15:17:43 字數 2921 閱讀 1599

廣義上,模式是乙個可以用來產生其他事物的模板或者模型。

在軟體開發過程中,模式是指乙個通用問題的解決方案,用抽象化表示和解決一類問題的模板。

學習設計模式,有助於寫出可復用和可維護性高的程式

設計模式的原則是「找出 程式中變化的地方,並將變化封裝起來」。

1.工廠模式

即,函式裡面返回單個物件。缺點就是建立多個物件,無法區分物件型別。

function factory()

return obj;

}var people1=factory("人物a","男",20);

var people2=factory("人物b","女",19);

2.建構函式模式即,在函式上直接寫物件,在未被例項化之前this指代window,例項化後,指當前的物件,建構函式一般在類被例項化的時候執行,constructor相當於後端class類裡的構造。

function person()

var son=new person("張三","20","老師")

var son1=new person("李四","21","醫生")

例項化物件 相當於在重新new的時候重新宣告

優點是可以區分型別person

3.混合模式

純原型模式,可以實現原型屬性的共享,但不能傳遞引數,原型+建構函式的混合模式,可以互補,實現屬性共享+引數傳遞。

function animal()

// animal.prototype.name="小花";

// animal.prototype.***="female";

animal.prototype = ,

sleep: function () ,

info: function ()

}//例項化這個類

//原型模式 會導致所有的原型屬性以及方法全部共享

var cat = new animal("喵喵", "母", "貓科");

4.動態原型模式可以通過相關屬性動態新增原型 (檢測原型是否存在)

function animal(name,age,job)}}

var dog=new animal("小狗","3","play");

console.log(dog);

5.單例模式返回乙個物件。保證乙個類僅有乙個例項,並提供乙個訪問它的全域性訪問點。

核心:確保只有乙個例項,並提供全域性訪問。

function instance(name,age)

if(par==null)

return par;

}var tom=instance("tommy","12");

console.log(tom);

6.模組模式即**塊的封裝

7.發布和訂閱模式也稱作觀察者模式,定義了物件間的一種一對多的依賴關係,當乙個物件的狀態發 生改變時,所有依賴於它的物件都將得到通知。

核心:乙個物件不用再顯式地呼叫另外乙個物件的某個介面。

實現:-----

js中的事件就是經典的發布-訂閱模式的實現。

// 訂閱

document.body.addeventlistener('click', function() , false);

document.body.addeventlistener('click', function() , false);

// 發布

document.body.click(); // click1 click2

舉個栗子:

a在公司c完成了筆試及面試,b也在公司c完成了筆試。他們焦急地等待結果,每隔半天就**詢問公司c,導致公司c很不耐煩。一種解決辦法是 ab直接把****留給c,有結果的話c自然會通知ab。這裡的「詢問」屬於顯示呼叫,「留給」屬於訂閱,「通知」屬於發布

優點:

一為時間上的解耦,二為物件之間的解耦。

缺點:建立訂閱者本身要消耗一定的時間和記憶體,訂閱的處理函式不一定會被執行,駐留記憶體有效能開銷。

弱化了物件之間的聯絡,複雜的情況下可能會導致程式難以跟蹤維護和理解

JS設計模式

什麼是模式?什麼是設計模式?設計模式是解決軟體設計常見問題的可復用方案 什麼是反模式?反模式是一種針對某個特定問題的不良解決方案,該方案會導致槽糕的情況發生 單例模式?皇帝單例模式 var kingsingleton function return 皇帝存在返回皇帝 return instance ...

js 設計模式

1.單例模式 保證乙個類只有乙個例項,並提供乙個訪問它的全域性訪問點 呼叫乙個類,任何時候返回的都是同乙個例項 class singleton getname static getinstance name return this.instance const instancea singleton...

js 設計模式

設計模式就是一套被反覆使用的 多數人知曉的 經過分類編目的 設計經驗的總結。使用設計模式是為了重用 讓 更容易被他人理解 保證 可靠性。其實就是前人總結的,針對特定型別問題的設計方案。總體來說設計模式分為三大類 建立型模式 共五種 工廠方法模式 抽象工廠模式 單例模式 建造者模式 原型模式。結構型模...