生活随笔
收集整理的這篇文章主要介紹了
用面向对象的方法写敲门砖
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一道名為"敲門磚"的面試題:
用面向對象的方法寫,點擊列表內,子元素的子標簽, 來刪除子元素
敲門磚
考點:
- 遞歸(刪除標簽, 需要找到列表的直屬子標簽, 需要通過遞歸層層往上找, parentNode)
- 冒泡(只需為頂級父元素addEventListener綁定事件, 并通過e.target區分子標簽, 即可實現一次綁定, 多次使用)
- ES6語法(使用ES6的class 構造方法需要指明constructor函數)
- 布局(使用網格布局,快速實現內聯元素的兩端對齊, 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">不復回</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></ol><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">君不見</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></ol><script>class List{constructor(els){// 將this轉換為局部變量self, 個人愛好Python3,這個寫法類似Python3let self = this;// 根據類選擇器,選擇所有符合條件的的清單, 并生成列表let el = Array.from(document.querySelectorAll(els))// 為每個清單綁定事件el.forEach(item => item.addEventListener('click', function(e){// 如果點擊的元素的類名帶有del, 則可以刪除這條標簽if (e.target.className.indexOf('del') > -1){// 移除相應的子元素self.removeDom.call(self, item, e.target)}}))}removeDom(item, tg){let self = this;// 設置移除判定函數let judgeRemoveDom = function(item, tg){// 獲取觸發事件元素的父級元素let parentNode = tg.parentNode;// 如果當前找到的元素的父元素恰好為item, 則可以直接移除if (item === parentNode){item.removeChild(tg);}// 如果當前的父元素不是item, 則繼續往上找else{tg = parentNode;judgeRemoveDom(item, tg);}}judgeRemoveDom(item, tg);}}window.addEventListener('DOMContentLoaded', function(){new List('.list')})</script></body>
</html>
總結
以上是生活随笔為你收集整理的用面向对象的方法写敲门砖的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
