1130

工作

这两天准备将同事的 ui 走查工具进行立项开发了，提前了解一下：

关于实际的开发效果和 UI 原型图对比，我的思路大概是：

整理 UI 图：命名，分辨率大小控制；
对实际页面效果进行截图；
使用第三方的图片对比分析工具，输出对比图片

今日算法

今日学习：

被围绕的区域
二叉树的最近公共祖先
二叉树的最大路径和
朋友圈

今日复习：

温故知新

防抖节流等各种手写，http和网络，浏览器原理，性能优化，Webpack

事件委托：

初级版本：

ul.addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
        fn() // 执行某个函数
    }
})

bug 在于，如果用户点击的是 li 里面的 span，就没法触发 fn，这显然不对。

进阶版本：

function delegate(parentNode, eventType, selector, fn) {
  parentNode.addEventListener(eventType, e => {
    let el = e.target;
    while (!el.matches(selector)) {
      if (parentNode === el) {
        el = null
        break
      }
      el = el.parentNode;
    }
    el && fn.call(el, e, el)
  })
  return parentNode;
}

在线示例：事件代理

完整代码：

html

<ul>
  <li><span>001</span></li>
  <li><span>002</span></li>
</ul>

<script>
const $ul = document.querySelector('ul')
// $ul.addEventListener('click', e => {
//   const el = e.target
//   console.log(el.tagName)
//   console.log(el.textContent)
// })

function delegate(parentNode, eventType, selector, fn) {
  parentNode.addEventListener(eventType, e => {
    let el = e.target;
    while (!el.matches(selector)) {
      if (parentNode === el) {
        el = null
        break
      }
      el = el.parentNode;
    }
    el && fn.call(el, e, el)
  })
  return parentNode;
}

delegate($ul, 'click', 'li', () => {console.log('click')})
</script>

好文推荐

有感好文

这个新人作者的文章，总体比较花里胡哨的，萌妹风格？

项目/博客推荐

值得学习的项目/作者

拍照，旅游，运动，美食，音乐，家庭，爱情...

通过博客可以看出，作者是一个多才多艺，懂得享受生活的 up，赞一个

PS: 细细反思一下自己，上面这些生活的主题，我的好像很多空白....

面经相关

八股文相关

明日计划

算法：
- 学习：高级算法：树和图
- 复习：二分查找
手写：深浅拷贝

TODOS

每日记录的项目，归类整理，未来做成一个分类导航面板
待输出文章：前端项目开发中常见的一些坑：图片，文件，水印...
整理一下自己的博客文章，搭建一个博客站点
Nest 开发一个自己的博客，使用 Docker 部署在腾讯云

1130 ​

工作 ​

今日算法 ​

温故知新 ​

好文推荐 ​

项目/博客推荐 ​

面经相关 ​

明日计划 ​

TODOS ​