每日前端签到（第106天）

第106天（2018-11-18）

• [html] 在HTML5中如何组合标题？用哪个元素？
• [css] 标签、class和id选择器三者的区别是什么？分别在什么时候用？
• [js] 用js写一个事件侦听器的方法
• [软技能] shim和polyfill有什么区别？它们分别有什么用？

题目一：
<hgroup> 是H5新增的标签可以用于对各级标题进行组合

<hgroup>
<h1><a href="/">标题一</a></h1>
<h2>标题二</h2>
</hgroup>
但是实际使用中各级标题中会有其他内容，实用性不强，已经W3C被移除
题目二：
标签选择器：tag{} 选取对应的标签例如 a span div
class选择器：.class-name{} 选取对应class-name的元素
id选择器：#id-name{} 选取对应id的元素
其中id是具有唯一性的。
三者优先级为 id>类>标签
因此一般可以用标签选择器添加该标签的通用样式，类选择器对样式进一步细化，id选择器针对某几个需要特殊处理的元素添加单独的样式。
题目三：

class EventBus {
  events = {};

  on(eventName, callback) {
    const events = this.events;
    if (!events[eventName]) {
      events[eventName] = [];
    }
    events[eventName].push(callback);
    return this;
  }

  emit(eventName, params) {
    const events = this.events;
    if (events[eventName]) {
      events[eventName].forEach(cb => cb(params));
    }
    return this;
  }
}

题目四：
首先 polyfill是shim的一种.目的都是在没有相关API的环境上顺利执行代码
区别是:
shim:是js库, 用库定义的api去执行一些操作, 如jquery,$.ajax,底层用ActiveXObject或XMLHttpRequest实现,用户不直接用标准API,而是用库定义的api,具体环境判断和实现交给库.
polyfill: 用js模拟标准api，抹平环境差异，用户仍是使用标准api
如发现window.requestAnimationFrame不存在,polyfill会用setTimeout覆写window.requestAnimationFrame
polyfill的好处在于，可以动态监测浏览器版本,低版本加载,而在高本版浏览器可以不加载这段js，用户代码不修改直接可用
shim则是无论浏览器版本都要加载这段js，因为用的api是库定义的