設計者模式

1.單例模式：每個new出來的例項都需要有乙個相同的方法，但是這時候如果每個例項都新建乙個這種方法，太佔據記憶體也太慢，所以在這裡有乙個重要的判斷：如果有例項，則返回例項；如果沒有例項，則建立例項，並且返回例項。

例：

class createuser 
return createuser.ins;
}constructor(name) 
getname() 
}let c1 = createuser.shareinstance()
let c2 = createuser.shareinstance()
console.log(c1==c2)

2.組合模式：組合模式中基本物件和組合物件被一致對待;無須關心物件有多少層, 呼叫時只需在根部進行呼叫;類似dom樹

例：

const macrocommand = function() ,
excute: function() 
},}}
const command1 = macrocommand() // 命令1
command1.add()
const command2 = macrocommand() // 命令2
command2.add()
command2.add()
const command3 = macrocommand() //命令3
command3.add()
command3.add()
const macrocommand = macrocommand()//組合物件
macrocommand.add(command1)
macrocommand.add(command2)
macrocommand.add(command3)
macrocommand.excute()
// 吃飯
// 唱歌
//畫畫
// 下棋
// 玩遊戲

3. 觀察者模式：類似於事件監聽, 觀察者只要訂閱了被觀察者的事件，那麼當被觀察者的狀態改變時，被觀察者會主動去通知觀察者，而無需關心觀察者得到事件後要去做什麼，實際程式中可能是執行訂閱者的**函式

例：

var obj = ,
}// defineproperty 可以觀察 obj物件 的list 屬性的使用
object.defineproperty(obj, 'list', ,
set(val) 
})// 獲取了list屬性，那麼get 方法就會被呼叫
console.log(obj.list)
// 設定了list屬性set 方法就會被呼叫
obj.list = ['a', 'b']

4. 工廠模式: 去做同樣的事情，實現同樣的效果，批量生產

例：

// 文字工廠
class text 
insert(where) 
}// 鏈結工廠
class link 
insert(where) 
}

5. 抽象的工廠模式：先標記好模式，然後下面引用，但是裡面什麼都沒有

class domfactory 
// 各流水線
insert() 
}

6. 策略模式：策略類部分和環境類部分

①策略類：寫出好幾種策略，類似於plana，planb….

例：

var levelobj = ,
"b": function (money) ,
"c": function (money) 
};/*環境類*/
var calculatebouns = function (level, money) ;
console.log(calculatebouns('a', 10000)); // 40000

②環境類：執行的環境

例：

const myimage = function (parent) 
}// 直接新增 ，如果比較大，可能載入的比較慢，導致網頁上的img一開始顯示不出來
let myimage = new myimage(document.body)
// 寫個** 提供 預載入功能
const proxyimage = function (myimage) ,2000)
}this.setsrc =function (src) }//
let proxyimage = new proxyimage(myimage)
proxyimage.setsrc('')

8. 介面卡模式：類似於把obj物件轉為陣列，這時候如果是大量的操作怕出意外，就可以運用這種模式，就相當於有個中介轉一下

例：

// 老介面
const zhejiangcityold = function () ,]}
console.log(zhejiangcityold())
// 新介面希望是下面形式
// // 這時候就可採用適配者模式
const adaptor = function (oldcity) 
for (let city of oldcity) 
return obj
}let olddata = zhejiangcityold();
//把老資料放在介面卡中產生新資料
console.log(adaptor(olddata))

既然看了這麼多設計者模式，接下來也可以了解一下hash，它在我們的應用中也很重要：

1．hash：傳統的網頁根據使用者訪問的不同位址，瀏覽器從伺服器獲取對應頁面的內容展示給使用者，這樣造成伺服器壓力比較大，使用者訪問比較慢，在這種場景下，出現了單頁應用。

2. hashchange：想要用hash就要監聽到hash什麼時候改變，這時候就需要用hashchange來監聽

設計者模式

設計者模式構建者模式

設計者模式觀察者模式

c 設計者模式工廠模式

設計者模式

設計者模式 構建者模式

設計者模式 觀察者模式

c 設計者模式 工廠模式

相關推薦

設計者模式構建者模式

設計者模式觀察者模式

c 設計者模式工廠模式