JS优秀编码欣赏--列表事件绑定

要求:点击X,删除对应列

优势梳理

  • 用class封装类
  • Array.from:方法从一个类似数组或可迭代对象中创建一个新的数组实例。

    Array.from(arrayLike[, mapFn[, thisArg]])

    mapFn是每个item都执行都方法

                Array.from([1, 2, 3], x => x + x);  // [2, 4, 6]
            
  • Array.find: 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

    arr.find(callback[, thisArg])

  • 事件代理:通过addEventListener绑定到ul上,防止li特别多时绑定事件太多,影响性能。
  • 递归:通过递归找到父级DOM,然后移除li。
  • 解藕:事件绑定与事件处理解藕,更方便后续扩展
  • DOMContentLoaded:在DOMContentLoaded的时候调用,控制页面生命周期。

知识点

  • 复用性设计
  • 事件代理
  • 事件绑定
  • 渲染机制
  • 递归
    class List {
        constructor (sel) {
            this.el = Array.from(document.querySelectorAll(sel))
            let self = this
            this.el.forEach(item => {
                item.addEventListener('click', (e) => {
                    if (e.target.className.indexOf('del') > -1){
                        self.removeItem(e.target)
                    }
                })
            })
        }
        removeItem (target) {
            let self = this
            let findParent = function (node) {
                let parent = node.parentNode;
                let root = self.el.find(item => item === parent)
                if (root){
                    root.removeChild(node)
                } else {
                    findParent(parent)
                }

            }
            findParent(target)
        }
    }
    window.addEventListener('DOMContentLoaded', function () {
        new List('.list')
    }) 

随机浏览