【若川视野 x 源码共读】第8期 | mitt、tiny-emitter 发布订阅

学习链接： juejin.cn/post/708498…

探索与发现：

1. data attributes 竟然可以作为css的属性；

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

const article = document.querySelector('#electric-cars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
article::before {
  content: attr(data-parent);
}

article[data-columns='3'] {
  width: 400px;
}

2. clipboard.js clipboardjs.com/#example-ta… 优点：1）事件代理，简化代码 2）数据处理简洁方便。 但是，平时复制黏贴需要用到几百k吗？？? 不明白日常编写复制黏贴代码的缺点…… Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.

3. tiny-emmiter

• slice copy from index = 1, omit the fn 关于这个1，想了半天，也不及跑一次代码，功能一目了然啊~~~~~~~

var data = [].slice.call(arguments, 1) 

4. mitt ts官方查询：www.typescriptlang.org/docs/handbo…

Record： Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type

handlers.splice(handlers.indexOf(handler) >>> 0, 1);

没找到 -1 变为 4294967295，原数组不会改变. 为什么要把-1变成正数呢？？？？？

复习：

1. 适当复习下typescript，确保看到泛型不怂O(∩_∩)O哈哈~

• 基础数据类型： void，never，unknown，tuple
• type， 接口interface、泛型（interface 可以重复的对某个接口来定义属性和方法，但是type不能重复。定义对象类型时，建议使用interface）
• 缩写：T,K,V,E,O，type,key,value,element,object 目标： 基本能看明白mitter代码。 感受：这样复习感觉强度有点大啊，最后不想复习了，o(╥﹏╥)o……短时间大量关联性知识点并且内容难度逐级提升，真辛苦……我不晓得别人转专业的学习历程，但对我来说，一般都是先学一个模块或课程，建立一个学习内容的框架，然后根据业务需求或面试要求，再针对重点知识点学习。有了框架以后，学习中就容易举一反三，前后的知识点更容易建立联系。根据自己的学习感受，再安排未来学习的内容或方向。但感觉每一次在脑子里搭建学习内容的框架就好辛苦……………………累啊…………………… 后期对一些重点知识点，要在项目里反复摩擦才能真正的理解和掌握。【实践+时间】，这是门手艺活~ 经历沉淀出技术……技术再升华成艺术……漫漫长路……

2. 复习promise

• 调用resolve或reject并不会终结 Promise 的参数函数的执行 中止复习……

3. 复习this的指向（显示绑定，隐式绑定，new，apply、call、bind）

• 隐式绑定

var obj = {
  name: "enenen",
  eating: function() {
    console.log(this.name + "在吃东西")
  },
  running: function() {
    console.log(obj.name + "在跑步")
  }
}

obj.eating() // obj
obj.running() // obj

var fn = obj.eating
fn() //undefined

• 特殊情况 （new绑定 > 显示绑定(apply/call/bind) > 隐式绑定(obj.foo()) > 默认绑定(独立函数调用)） // apply/call/bind: 当传入null/undefined时, 自动将this绑定成全局对象

const boxDiv = document.querySelector('.box')
boxDiv.onclick = function() {
  console.log(this) // this是div
}

function hySetTimeout(fn, duration) {
  fn.call("abc")
}

hySetTimeout(function() {
  console.log(this) // window
}, 3000)

setTimeout(function() {
  console.log(this) // window
}, 2000)

var obj = {
  name: "obj",
  foo: function() {
    console.log(this)
  }
}

// new的优先级高于隐式绑定
var f = new obj.foo()

// 特殊的箭头函数
var name = "hhhhh"

var foo = () => {
  console.log(this)
}

foo() // {}
var obj = {foo: foo}
obj.foo() // {}
foo.call("abc") // {}