1203 今日总结

今日工作

走查工具拆包

使用 webpack 进行打包，发现自己对于 cmd，commonjs，amd，umd，es module 等都不熟悉，为什么打包最后输出都以 umd 为准？

看看这篇文章的介绍：AMD, CMD, CommonJS和UMD

今日心情

所见所想，有感而发

朋友圈某个开发同行的朋友圈：

离开家乡在外面闯荡几年之后，你会发现，在老家的人都已经买房买车了，而你除了见过一点世面以外，什么都没有留下。愿2021年最后一个月，所念皆所愿，所求皆所得，愿喜欢的都拥有，失去的都释怀，好好生活，慢慢相遇，该来的都在路上。

今日算法

今日学习：

今日复习：

手撕代码

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

发布订阅模式：

资料参考 JS的发布订阅模式

class Event {
  constructor () {}
  // 首先定义一个事件容器，用来装事件数组（因为订阅者可以是多个）
  handlers = {}

  // 事件添加方法，参数有事件名和事件方法
  addEventListener (type, handler) {
    // 首先判断handlers内有没有type事件容器，没有则创建一个新数组容器
    if (!(type in this.handlers)) {
      this.handlers[type] = []
    }
    // 将事件存入
    this.handlers[type].push(handler)
  }

  // 触发事件两个参数（事件名，参数）
  dispatchEvent (type, ...params) {
    // 若没有注册该事件则抛出错误
    if (!(type in this.handlers)) {
      return new Error('未注册该事件')
    }
    // 便利触发
    this.handlers[type].forEach(handler => {
      handler(...params)
    })
  }

  // 事件移除参数（事件名，删除的事件，若无第二个参数则删除该事件的订阅和发布）
  removeEventListener (type, handler) {
      // 无效事件抛出
      if (!(type in this.handlers)) {
        return new Error('无效事件')
      }
      if (!handler) {
        // 直接移除事件
        delete this.handlers[type]
      } else {
        const idx = this.handlers[type].findIndex(ele => ele === handler)
        // 抛出异常事件
        if (idx === -1) {
          return new Error('无该绑定事件')
        }
        // 移除事件
        this.handlers[type].splice(idx, 1)
        if (this.handlers[type].length === 0) {
          delete this.handlers[type]
        }
      }
    }
}

var event = new Event() // 创建event实例
// 定义一个自定义事件:"load"
function load (params) {
  console.log('load', params)
}
event.addEventListener('load', load)
// 再定义一个load事件
function load2 (params) {
  console.log('load2', params)
}
event.addEventListener('load', load2)
// 触发该事件
event.dispatchEvent('load', 'load事件触发')
// 移除load2事件
event.removeEventListener('load', load2)
// 移除所有load事件
event.removeEventListener('load')

好文推荐

有感好文

项目/博客推荐

值得学习的项目/作者

一个美化网站-电脑桌面美化，以及相关工具
vivo 的文章分享
HJianfeng 上面模块化原理作者的 github，里面有很多原理性的示例 demo 可以学习

面经相关

八股文相关

webpack Tapable 专题

明日计划

算法：
- 学习：
- 复习：
手写：
面经复习：

TODOS

短期内要做的事情

1203 今日总结 ​

今日工作 ​

今日心情 ​

今日算法 ​

手撕代码 ​

好文推荐 ​

项目/博客推荐 ​

面经相关 ​

明日计划 ​

TODOS ​