組合模式
概念
- 生成樹形結(jié)構(gòu)妻顶，表示 “整體-部分”
-
讓整體和部分都具有一致的操作方式
例如文件夾目錄
image.png
虛擬DOM中的vnode是這種形式犀斋，但數(shù)據(jù)類型簡單。
演示
<div id="div1" class="container">
<p>123</p>
<p>456</p>
</div>
{
tag: "div",
attr: {
id: "div1",
className: "container"
},
children: [
{
tag: "p",
attr: {},
children: ["123"]
},
{
tag: "p",
attr: {},
children: ["456"]
},
]
}
其他
我們常用的菜單一般也是組合模式的
設(shè)計(jì)原則驗(yàn)證
- 將整體和單個(gè)節(jié)點(diǎn)的操作抽象出來
- 符合開放封閉原則
享元模式
概念
- 共享內(nèi)存（主要考慮內(nèi)存馏锡，而非效率）
- 相同的數(shù)據(jù)蛔外，共享使用
前端的事件代理可以看成一個(gè)簡單的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 無限下拉列表蛆楞，將事件代理到高層節(jié)點(diǎn)上 -->
<!-- 如果都綁定到'<a>'標(biāo)簽，對內(nèi)存開銷太大夹厌，容易瀏覽器卡死 -->
<div id="div1" class="container">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<!-- ...無限下拉 -->
</div>
</body>
<script>
const div1 = document.querySelector("#div1");
div1.addEventListener("click", (e) => {
const target = e.target;
if(target.nodeName === "A"){
alert(target.innerHTML)
}
})
</script>
</html>
設(shè)計(jì)原則驗(yàn)證
- 將相同的部分抽象出來（因?yàn)樗麄児蚕淼臄?shù)據(jù)一樣豹爹，只用改一個(gè)地方）
- 符合開放封閉原則
本文資料來自慕課網(wǎng)-雙越老師-Javascript 設(shè)計(jì)模式系統(tǒng)講解與應(yīng)用視頻課程
