shengjiong/sheng-study

个人学习总结与代码知识点

sheng-study's Issues

11、setTimeout 实现

6、深浅拷贝

14、函数柯力化

26、前端错误信息采集

16、ES5 继承

18、WeakMap 类和 WeakSet 类

25、前端性能监控

17、对象的创建

4、call/apply

1、Array.from

12、async/await 实现

24、图片压缩

13、eventEmitter

2、overflow:hidden清楚浮动的原理

19、写一个函数，匹配输入字符串里的所有数字部分，数字至多包含两位小数，返回包含所有匹配结果的数组，并去重。

写一个函数，匹配输入字符串里的所有数字部分，数字至多包含两位小数，返回包含所有匹配结果的数组，并去重。

10、Promise 实现

23、手写一个符合 promise a+ 规范的 promise

8、JSONP

20、多个数组求交集

9、URL 参数解析实现

15、instanceof

22、hash路由

class Routers {
  constructor() {
    // 储存hash与callback键值对
    this.routes = {};
    // 当前hash
    this.currentUrl = '';
    // 记录出现过的hash
    this.history = [];
    // 作为指针,默认指向this.history的末尾,根据后退前进指向history中不同的hash
    this.currentIndex = this.history.length - 1;
    this.refresh = this.refresh.bind(this);
    this.backOff = this.backOff.bind(this);
    // 默认不是后退操作
    this.isBack = false;
    window.addEventListener('load', this.refresh, false);
    window.addEventListener('hashchange', this.refresh, false);
  }

  route(path, callback) {
    this.routes[path] = callback || function() {};
  }

  refresh() {
    this.currentUrl = location.hash.slice(1) || '/';
    if (!this.isBack) {
      // 如果不是后退操作,且当前指针小于数组总长度,直接截取指针之前的部分储存下来
      // 此操作来避免当点击后退按钮之后,再进行正常跳转,指针会停留在原地,而数组添加新hash路由
      // 避免再次造成指针的不匹配,我们直接截取指针之前的数组
      // 此操作同时与浏览器自带后退功能的行为保持一致
      if (this.currentIndex < this.history.length - 1)
        this.history = this.history.slice(0, this.currentIndex + 1);
      this.history.push(this.currentUrl);
      this.currentIndex++;
    }
    this.routes[this.currentUrl]();
    console.log('指针:', this.currentIndex, 'history:', this.history);
    this.isBack = false;
  }
  // 后退功能
  backOff() {
    // 后退操作设置为true
    this.isBack = true;
    this.currentIndex <= 0
      ? (this.currentIndex = 0)
      : (this.currentIndex = this.currentIndex - 1);
    location.hash = `#${this.history[this.currentIndex]}`;
    this.routes[this.history[this.currentIndex]]();
  }
}

7、节流防抖

21、创建一个不可变更的对象

5、bind

3、new