生活随笔
收集整理的這篇文章主要介紹了
用面向对象的方法写敲门砖
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一道名為"敲門磚"的面試題:
用面向?qū)ο蟮姆椒▽?點擊列表內(nèi),子元素的子標簽, 來刪除子元素
敲門磚
考點:
- 遞歸(刪除標簽, 需要找到列表的直屬子標簽, 需要通過遞歸層層往上找, parentNode)
- 冒泡(只需為頂級父元素addEventListener綁定事件, 并通過e.target區(qū)分子標簽, 即可實現(xiàn)一次綁定, 多次使用)
- ES6語法(使用ES6的class 構(gòu)造方法需要指明constructor函數(shù))
- 布局(使用網(wǎng)格布局,快速實現(xiàn)內(nèi)聯(lián)元素的兩端對齊, justify-content: span-between)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阿里敲門磚</title><style>li{list-style: none;display: flex;justify-content: space-between;align-items: center;background-color: #fdf6e3;border: 1px solid #0c8ac5;height: 100px;padding: 5px;}.del{border:1px solid #323232;color: #c03035;}</style>
</head>
<body><ol class="list"><li><span class="desc">黃河之水</span><span class="del">X</span></li><li><span class="desc">天上來</span><span class="del">X</span></li><li><span class="desc">奔流</span><span class="del">X</span></li><li><span class="desc">到海</span><span class="del">X</span></li><li><span class="desc">不復(fù)回</span><span class="del">X</span></li><li><span class="desc">君不見</span><span class="del">X</span></li><li><span class="desc">高唐明鏡</span><span class="del">X</span></li><li><span class="desc">悲白發(fā)</span><span class="del">X</span></li></ol><ol class="list"><li><span class="desc">到海</span><span class="del">X</span></li><li><span class="desc">不復(fù)回</span><span class="del">X</span></li><li><span class="desc">天上來</span><span class="del">X</span></li><li><span class="desc">奔流</span><span class="del">X</span></li><li><span class="desc">君不見</span><span class="del">X</span></li><li><span class="desc">黃河之水</span><span class="del">X</span></li><li><span class="desc">高唐明鏡</span><span class="del">X</span></li><li><span class="desc">悲白發(fā)</span><span class="del">X</span></li></ol><script>class List{constructor(els){// 將this轉(zhuǎn)換為局部變量self, 個人愛好Python3,這個寫法類似Python3let self = this;// 根據(jù)類選擇器,選擇所有符合條件的的清單, 并生成列表let el = Array.from(document.querySelectorAll(els))// 為每個清單綁定事件el.forEach(item => item.addEventListener('click', function(e){// 如果點擊的元素的類名帶有del, 則可以刪除這條標簽if (e.target.className.indexOf('del') > -1){// 移除相應(yīng)的子元素self.removeDom.call(self, item, e.target)}}))}removeDom(item, tg){let self = this;// 設(shè)置移除判定函數(shù)let judgeRemoveDom = function(item, tg){// 獲取觸發(fā)事件元素的父級元素let parentNode = tg.parentNode;// 如果當(dāng)前找到的元素的父元素恰好為item, 則可以直接移除if (item === parentNode){item.removeChild(tg);}// 如果當(dāng)前的父元素不是item, 則繼續(xù)往上找else{tg = parentNode;judgeRemoveDom(item, tg);}}judgeRemoveDom(item, tg);}}window.addEventListener('DOMContentLoaded', function(){new List('.list')})</script></body>
</html>
總結(jié)
以上是生活随笔為你收集整理的用面向对象的方法写敲门砖的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
