目錄

1、封裝對(duì)象時(shí)的設(shè)計(jì)模式

2、基本結(jié)構(gòu)與應(yīng)用示例

2.1 工廠模式

2.2 建造者模式

2.3 單例模式

---

封裝的目的：①定義變量不會(huì)污染外部；②能作為一個(gè)模塊調(diào)用；③遵循開閉原則。

好的封裝（不可見、留接口）：①變量外部不可見；②調(diào)用接口使用；③留出擴(kuò)展接口。

1、封裝對(duì)象時(shí)的設(shè)計(jì)模式

	模式	目的	應(yīng)用場(chǎng)景	應(yīng)用示例
創(chuàng)建一個(gè)對(duì)象的模式	工廠模式	方便大量創(chuàng)建對(duì)象	當(dāng)某一個(gè)對(duì)象需要經(jīng)常創(chuàng)建的時(shí)候	多彩的彈窗；頁(yè)碼；jQuery
	建造者模式	需要組合出一個(gè)全局對(duì)象	當(dāng)要?jiǎng)?chuàng)建單個(gè)、龐大的組合對(duì)象時(shí)	復(fù)雜的輪播圖；編輯器插件；vue的初始化
保障對(duì)象只有一個(gè)	單例模式	需要確保全局只有一個(gè)對(duì)象	為了避免重復(fù)新建，避免多個(gè)對(duì)象存在互相干擾	全局?jǐn)?shù)據(jù)儲(chǔ)存對(duì)象；vue-router

2、基本結(jié)構(gòu)與應(yīng)用示例

2.1 工廠模式

基本結(jié)構(gòu)：寫一個(gè)方法，只需要調(diào)用這個(gè)方法，就能拿到想要的對(duì)象

工廠模式示例:

（1）多彩的彈窗：彈窗有多種，它們之間存在內(nèi)容和顏色上的差異。

1. jquery需要操作dom，每一個(gè)dom都是一個(gè)jq對(duì)象

2.2 建造者模式

基本結(jié)構(gòu)：把一個(gè)復(fù)雜的類各個(gè)部分，拆分成獨(dú)立的類，然后再在最終類里組合到一塊。

建造者模式的示例:

1. 編輯器插件，初始化時(shí)需要配置大量參數(shù)，而且內(nèi)部功能很多。

把不同的模塊拆分為不同的類，給類定義不同的方法；最后把不同的類組合在最終的使用類里。

1. Vue的初始化：vue內(nèi)部眾多模塊，而且過程復(fù)雜

2.3 單例模式

基本結(jié)構(gòu)：通過定義一個(gè)方法，使用時(shí)只允許通過此方法拿到存在內(nèi)部的同一實(shí)例化對(duì)象。

單例模式的示例：

1. 寫一個(gè)數(shù)據(jù)儲(chǔ)存對(duì)象，全局儲(chǔ)存者只能有一個(gè)，不然會(huì)需要進(jìn)行同步，增加復(fù)雜度
2. Vue-router需要保障全局有且只有一個(gè)，否則會(huì)錯(cuò)亂。