连云港市建设银行网站办公空间设计经典案例

概念

• 共享内存（主要考虑内存，而非效率）
• 相同的数据，共享使用
• （JS中未找到经典应用场景）

演示

<!-- 无限下拉列表，将事件代理到高层节点上 -->
<!-- 如果都绑定到`<a>`标签，对内存开销太大 -->
<div id="div1"><a href="#">a1</a><a href="#">a2</a><a href="#">a3</a><a href="#">a4</a><!-- 无限下拉列表 -->
</div><script>var div1 = document.getElementById('div1')div1.addEventListener('click',function(e) {var target = e.targetif (e.nodeName === 'A') {alert(target.innerHTML)}})
</script>

设计原则验证

• 将相同的部分抽象出来
• 符合开放封闭原则