前言

氣泡組件在實(shí)際工作中非常普遍，無論是網(wǎng)頁中還是app中，比如：

我們這里所謂氣泡組件是指列表型氣泡組件，這里就其dom實(shí)現(xiàn)，CSS實(shí)現(xiàn)，js實(shí)現(xiàn)做一個(gè)討論，最后對一些細(xì)節(jié)點(diǎn)做一些說明，希望對各位有用

小釵最近初學(xué)CSS，這里做一個(gè)專題，便于自身CSS提升，文章有不少問題與可優(yōu)化點(diǎn)，請各位指導(dǎo)

組件分類

單由氣泡組件來說，他仍然屬于“彈出層”類組件，也就是說其會(huì)具有這些特性：

① 布局為脫離文檔流

② 可以具有mask蒙版，并且可配置點(diǎn)擊蒙版是否關(guān)閉的特性

③ 可選的特性有點(diǎn)擊瀏覽器回退關(guān)閉組件以及動(dòng)畫的顯示與隱藏動(dòng)畫特性

其中比較不同的是：

① 不是居中定位

② 具有一個(gè)箭頭標(biāo)識(shí)，并且可以設(shè)置再上或者在下

③ 因?yàn)榫哂屑^，而且這個(gè)箭頭是相對于一個(gè)元素的，一般意義上我們?nèi)蝿?wù)是相對某個(gè)按鈕，所以說具有一個(gè)triggerEL

所以單從這里論述來說，我們的組件名為BubbleLayer，其應(yīng)該繼承與一個(gè)通用的Layer

但是，就由Layer來說，其最少會(huì)具有以下通用特性：

① 創(chuàng)建——create

② 顯示——show

③ 隱藏——hide

④ 摧毀——destroy

而以上特性并不是Layer組件所特有的，而是所有組件所特有，所以在Layer之上還應(yīng)該存在一個(gè)AbstractView的抽象組件

至此繼承關(guān)系便出來了，拋開多余的接口不看，簡單來說是這樣的：

組件dom層面實(shí)現(xiàn)最簡單實(shí)現(xiàn)

單從dom實(shí)現(xiàn)來說，其實(shí)一個(gè)簡單的ul便可以完成任務(wù)