前端知识

🔴重点🟠难点🟡性能🟢算法🔵JS高阶🟣框架

JS知识点

get、post（请求参数长度限制）——HTTP协议
1. 两者区别
2. GET 和 POST
原型链
1. gitee -> 原型链代码
2. processOn 思维导图
mouseover、mouseenter
1. 文章
2. 共同点：鼠标移入元素触发事件
3. 不同点：
  - mouseover：若存在子元素，则会冒泡触发多次mouseover事件
  - mouseenter：不存在子元素冒泡，也就是鼠标移入只会触发一次mouseenter事件

可视区域就是不包括上下左右的工具栏、状态栏（滚动条特殊）。代码：

//可视区域宽度
document.documentElement.clientWidth
document.body.clientWidth
//可视区域高度
document.documentElement.clientHeight
document.body.clientHeight

document.documentElement也可以为document.body

//水平滚动条的位置
document.documentElement.scrollLeft
//垂直滚动条位置
document.documentElement.scrollRight

defer（异步加载js)
1. defer和async
2. defer和async简洁版

防抖节流

防抖（高阶）

function debounce(method, context, param) {
        clearTimeout(method.tId);
        method.tId = setTimeout(function () {
          method.apply(context, param);
        }, 500);
      }

防抖（闭包型）

function debounce(method, time) {
        let out = null;
        let that = this;
        return function (args) {
          clearTimeout(out);
          out = setTimeout(() => {
            method.call(that, args);
          }, time);
        };
      }

节流（自定义）

参考文章

function throlle(method, timeout = 1000) {
  let out;
  let last;
  return function (...args) {
    let now = new Date();
    if (now - last < timeout) {
      clearTimeout(out);
      out = setTimeout(() => {
        method(...args);
      }, timeout);
    } else {
      last = now;
      method(...args);
    }
  };
}

事件流
1. JS事件流和事件委托
2. 你真的理解事件冒泡和事件捕获吗
3. 阻止冒泡,阻止默认事件
  1
  2
  3
  4
  5
  6
  7
  8
  9
  c.addEventListener(
  'click',
  e => {
  console.log('c 冒泡');
  e.stopPropagation();//阻止冒泡
  return false//阻止默认事件
  },
  false
  );
  注意：return false 不仅阻止了事件往上冒泡，而且阻止了事件本身(默认事件)。event.stopPropagation()则只阻止事件往上冒泡，不阻止事件本身
4. javascript 事件流

JS拖拽

// 拖动开始-->拖动过程中-->拖动结束
// 监听目标DOM的onmousedown事件→document的onmousemove→document的onmouseup
//记录旧坐标鼠标移动后记录下新坐标,通过新坐标减去旧坐标得出变化的坐标,然后改变其位置
function drag(ele) {
  let oldX, oldY, newX, newY; //存储新旧鼠标位置

  // 元素点击事件
  ele.onmousedown = function (e) {
    oldX = e.clientX; //存储鼠标当前位置(初始化位置)
    oldY = e.clientY;
    if (!this.style.left && !this.style.top) {
      //如果元素无初始值,则需要赋值
      this.style.left = 0;
      this.style.top = 0;
    }

    // 鼠标移动事件
    document.onmousemove = function (e) {
      newX = e.clientX; //存储移动后的鼠标位置
      newY = e.clientY;
      // 移动后的位置 = 当前位置 - (移动后的鼠标位置-移动前的鼠标位置)
      ele.style.top = parseFloat(ele.style.top) + (newY - oldY) + 'px';
      ele.style.left = parseFloat(ele.style.left) + (newX - oldX) + 'px';

      oldX = newX; //移动完后旧鼠标位置为新鼠标位置
      oldY = newY;
    };

    // 鼠标松开事件
    document.onmouseup = function () {
      // 解绑事件
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
}

js drag api

HTML5 拖放（Drag 和 Drop）详解与实例 - 风雨后见彩虹 - 博客园 (cnblogs.com)

在被拖动的元素上需定义
1
<img src="./PoinkoParrot2.jpeg" alt="" id="draggable" draggable="true" />
在拖放的过程中会触发以下事件：
- 在拖动目标上触发事件(源元素):
  - ondragstart - 用户开始拖动元素时触发
  - ondrag - 元素正在拖动时触发
  - ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件:
  - ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  - ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  - ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  - ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
eval
- Eval
- 你不知道的 eval
- 欺骗词法 eval 和 with
AMD、CMD、CommonJs
- Module 的加载实现 - ECMAScript 6入门
- 前端模块化：CommonJS,AMD,CMD,ES6
🟠js监听对象属性改变（vue属性监听）
- 论如何监听一个对象某个属性的变化
JS实现跨域
- 笔记
JS深度拷贝（浅拷贝、深拷贝…）
重排重绘
- 浏览器重绘(repaint)重排(reflow)与优化

🟠JS全排列

前端电商 sku 的全排列算法很难吗？学会这个套路，彻底掌握排列组合

let combine = function (...chunks) {
  let res = [];
  let helper = function (chunkIndex, prev) {
    let chunk = chunks[chunkIndex];
    let isLast = chunkIndex === chunks.length - 1;
    for (let val of chunk) {
      let cur = prev.concat(val);
      if (isLast) {
        // 如果已经处理到数组的最后一项了 则把拼接的结果放入返回值中
        res.push(cur); //将最后一个数组的所有选项分别压入
      } else {
        helper(chunkIndex + 1, cur);
      }
    }
  };
  // 从属性数组下标为 0 开始处理
  // 并且此时的 prev 是个空数组
  helper(0, []);
  return res;
};

let names = ['iPhone X', 'iPhone XS'];
  let colors = ['黑色', '白色'];
  let storages = ['64g', '256g'];
  let res = combine(names, colors, storages);

  console.log(res);
  /* result
  [
    [ 'iPhone X', '黑色', '64g' ],
    [ 'iPhone X', '黑色', '256g' ],
    [ 'iPhone X', '白色', '64g' ],
    [ 'iPhone X', '白色', '256g' ],
    [ 'iPhone XS', '黑色', '64g' ],
    [ 'iPhone XS', '黑色', '256g' ],
    [ 'iPhone XS', '白色', '64g' ],
    [ 'iPhone XS', '白色', '256g' ]
  ]
  */

this指向、隐式丢失、显式绑定
- this绑定的四种方式：new，显式，隐式，默认
🟠virtual dom
- 探索Virtual DOM的前世今生
- 深入框架本源系列 —— Virtual Dom
- 面试官问: 如何理解Virtual DOM？
vue生命周期
🔴🟠Promise底层实现
事件监听
- HTML DOM 事件对象
- 一篇文章能否解决你事件监听的许多疑问
- 🔴🔵撸一个JS的事件管理
- 🔵🔥JavaScript 自定义事件如此简单！

Generator

generator
基本使用

// generator
function* foo(x) {
  yield x + 1;
  yield x + 2;
  return x + 3;
}
let res = foo(1);
console.log(res.next());//{ value: 2, done: false }
console.log(res.next());//{ value: 3, done: false }
console.log(res.next());//{ value: 4, done: true }

生成自增id函数

function* next_id() {
  let id = 0;
  while (true) {
    // !不是阻塞执行，是yield时跳出函数并储存当时的状态。
    // !执行next()时还原当时的状态，从上次yield的位置向下执行
    yield ++id;
  }
}
let a = next_id();
console.log(a.next().value); //1
console.log(a.next().value); //2
console.log(a.next().value); //3
console.log(a.next().value); //4
console.log(a.next().value); //5