学习es5

开始学习 es5 核心知识

• '珠峰高级工程师'参考这里的项目：https://gitee.com/wangluoshihuang/webgaoji (opens new window)
• js 的 6 种继承方式优缺点：
  • 探究 JS 常见的 6 种继承方式 (opens new window)
• new 一个对象的时候发生了什么？ (opens new window)
• JS 的 history 和 location 用法；react 路由的 history 对象的插件 history 的使用介绍
  • 参考这里 (opens new window)
• 为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false 。
  • 参考：https://www.runoob.com/jsref/event-onpagehide.html
  • 参考：https://developer.mozilla.org/zh-CN/docs/Web/API/PageTransitionEvent
• console 的使用：
  • console.dir(XXX)：可以打印出一个对象的所有属性。
• 面向对象的里的“多态”
  • 多态：同一操作作用于不同的对象，可以有不同的解释，产生不同的执行结果。
  • https://www.cnblogs.com/aaronchu/p/6169843.html
• 面向对像编程基本概念：
  • 

• 数组和对象的关系

  • 哈希表和关联型数组

    • 在一些编程语言中，通常会存在两种不同的数组形式：

    一般性数组，也叫作索引型数组或者枚举型数组（通常以数字为键）；

    关联型数组，也叫作哈希表或者字典（通常以字符串为键）。

    在 JavaScript 中，我们会用数组来表示索引型数组，而用对象来表示关联型数组。因此，如果我们想在 JavaScript 中使用哈希表，就要用到对象。

    • 所以我们可以通过以下两种方式来访问对象的属性：方括号表示法，如 hero[＇occupation＇]； 点号表示法，如 hero.occupation。

• postmessage 的使用：页面间通讯使用

  • https://mp.weixin.qq.com/s/EZ7mf6kT5fNApXMSJpkV9A
  • postMessage - 跨域消息传递：https://blog.csdn.net/huangpb123/article/details/83692019
  • 文章截图在https://gitee.com/wangluoshihuang/static_article/tree/master/JS 里的 postMessage 的使用

• h5 原生拖拽： ​- 讲解：https://juejin.cn/post/7075918201359433758

  • 问题处理：
    • h5 原生拖拽不能触发 drop 事件问题：
      • 需要给目标元素至少绑定 dragOver 以及 drop 事件；并且都要执行 evente.preventDefault();
      • dragOver 执行阻止默认事件，是为了防止 drop 事件不触发。
      • drop 执行阻止默认事件，是为了防止浏览器打开文件。
    • 当前前面事件处理好后，drop 事件里打印 event.dataTransfer.files 始终为空
      • 实际上是有值的。我们使用 console.dir()打印就会发现有值（实际上通过 event.dataTransfer.files 可以拿到文件信息）。只是打印结果出不来而已。

• web worker

  • https://juejin.cn/post/7139718200177983524
    • (截图)[https://gitee.com/wangluoshihuang/static_article/blob/master/JS/webWorker/%E4%B8%80%E6%96%87%E5%BD%BB%E5%BA%95%E5%AD%A6%E4%BC%9A%E4%BD%BF%E7%94%A8web%20worker%20-%20%E6%8E%98%E9%87%91.html]
  • https://mp.weixin.qq.com/s/Sz8SaBWj4CazH6yI9Ivu0w
    • (截图)[https://gitee.com/wangluoshihuang/static_article/blob/master/JS/webWorker/Web%20%E5%A4%9A%E7%BA%BF%E7%A8%8B%E5%BC%80%E5%8F%91%E5%88%A9%E5%99%A8%20Comlink%20%E7%9A%84%E5%89%96%E6%9E%90%E4%B8%8E%E6%80%9D%E8%80%83.html]

• JS 四种 Observers：监听元素

  • 直接在 mdn 上直接搜索 Observer 也可以看见这 4 个 api：http://www.luyanghui.com/?p=102

• 关闭页面请求也可以发送成功：

  • https://juejin.cn/post/7082238461121396749

• JS 烧脑面试题大赏

  • https://mp.weixin.qq.com/s/nTO4e4cfqlbB0p2xzYa6UA
  • 文章截图 (opens new window)
    • 第 4 题执行过程如下
      • 网上说的都不对，实际上打印 a、b 的值，a 等于：{n:2}；b 等于：{n: 1，x: {n: 2}}
      • 可以让 gpt 解释第 4 题：执行赋值表达式 a.x = a = {n:2}。这个表达式先将 a 的属性 x 赋值为 a，即 a.x = a。然后将 a 的值修改为一个新的对象{n:2}，即 a = {n:2}。此时 a 和 b 指向不同的对象。
      • 
      • 理解的重点在于： a.x = a 先执行。然后就是 a.x 指向的是变量 a，a 到底是什么值，不会在 a.x = a 此语句执行时就被决定，后面的语句也可能更改 a 的值。

• 客户端监听浏览器事件：

  • EventSource：https://developer.mozilla.org/zh-CN/docs/Web/API/EventSource

• try... catch 抛出自定义对象

方式1：
try{
   if(a==5){
        //   抛出错误
        throw {yu:7};  // 直接使用 throw  抛出对象即可
     }
}catch(e){
    console.log(e);    //打印: loopTerminates
    console.log(e.message); //打印：undefined
}

方式2：
var a = 5;
try{
   if(a==5){
        //   抛出错误
      await  Promise.reject({yui:7}) // 这样也可以
     }
}catch(e){
    console.log(e);    //打印: loopTerminates
    console.log(e.message); //打印：undefined
}

// 下面这种方法没法抛出自定义对象，因为x必须为字符串
var a = 5;
try{
   if(a==5){
        //   抛出错误
      throw new Error(x) // x必须为字符串
     }
}catch(e){
    console.log(e);
    console.log(e.message); //打印：这里才是x的值
}

• 对于 cookie 的认识

  • cookie 属性以及不同值的区别：https://www.cnblogs.com/sunLemon/p/10563818.html
  • Cookie 顶级域名、二级域名、三级域名共享：https://blog.csdn.net/supermao1013/article/details/83827310

• 当 flex 布局使用 flex-direction: column-reverse; 属性用在元素上时，元素里的元素位置会倒序，此时我们使用 js 滚动页面时：

  • 假如元素要滚动到顶部时：

  element.scrollTo({
    top: -800000, // 对应元素滚动到顶部。这里的值不再是0， 而是一个足够小的负值
    bottom: 0,
    left: 0,
    behavior: "smooth",
  });
  

• js 实现滚动有两个好用方法：

  • element.scrollIntoView({ behavior: 'smooth', block: 'start' }) 。元素滚到可视区。元素滚到流布局的可视区，换而言之如果有绝对定位以及固定定位存在那么元素即使使用了这个 api 滚动到可视区了（也是在流布局的可视区，并不是视觉上的可视区）也有可能被遮挡。
  • 还有就是上面的 scrollTo 方法。
  • 相对来说使用 scrollIntoView 更灵活，不需要计算位置。

• ajax fetch axios 三种方式实现 progress（进度条）

  • https://mp.weixin.qq.com/s/zOhYbrQZWHDs6PGlsymdtQ
    • 截图 (opens new window)

• 前端请求大比拼：Fetch、Axios、Ajax、XHR

  • https://mp.weixin.qq.com/s/8b58SicOjeEXjGt766xHAg
    • 截图 (opens new window)

• js 是怎么运行起来的

  • https://mp.weixin.qq.com/s/QFfjss-gcHFY1ID1xiqn6Q

    • 截图 (opens new window)
    • 解释型和编译型语言的区别

• scroll 事件：

  • 现代浏览器在单独的进程上执行滚动，因此只能异步传递滚动事件。由于是异步传递，因此主线程动画容易出现卡顿。

• js 监听元素发生变化

  • MutationObserver：https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
  • 还可以使用 dom 事件：https://blog.csdn.net/dejing6575/article/details/101474317

• stopPropagation 和 stopImmediatePropagation 的区别

  • event.stopPropagation 只会阻止相同类型(event.type 相同)事件传播，上面有提到过 移动端 触摸事件触发的顺序问题，假如 我在 touchstart 中调用了 event.stopPropagation 只会 阻止后续 event flow 上其他 touchstart 事件，并不会阻止 touchmove，touchend 等 mouseEvent 事件的发生。
  • event.stopPropagation 阻止捕获和冒泡阶段中当前事件的进一步传播。如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行 event.stopImmediatePropagation 方法，则当前元素剩下的监听函数将不会被执行。

• workers 使用离屏 canvas

  • https://my.oschina.net/ahaoboy/blog/4697059
    • 截图 (opens new window)

• JSON.stringify

  • https://juejin.cn/post/7251786870186147901?searchId=202406040906256FB7A7CC4F424E0EE772

• 5 个比较实用的 api（观察 api）

  • 5 高级前端常用的 API：https://mp.weixin.qq.com/s/75OiaDSXH3igkefI8IL34A
    • 截图 (opens new window)
  • 监听元素大小变化：ResizeObserver
    • https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

• 异常处理：

  • 全局监听 js 报错

  window.onerror = function (message, source, lineno, colno, error) {
    console.log("捕获到异常：", { message, source, lineno, colno, error });
  };
  // 函数参数:
  // message：错误信息（字符串）。可用于HTML onerror=""处理程序中的 event。
  // source：发生错误的脚本URL（字符串）
  // lineno：发生错误的行号（数字）
  // colno：发生错误的列号（数字）
  // error：Error对象[3]（对象）
  // 若该函数返回true，则阻止执行默认事件处理函数。
  

• 8 种现代 JavaScript 响应式模式

  • 参考：https://mp.weixin.qq.com/s/zGNE3aTVcTim5C9r3enwnw
  • 截图 (opens new window)

• 代码注释规范：

  • https://segmentfault.com/a/1190000040967907
  • https://knightyun.github.io/2020/03/13/js-comment-format
  • https://itmyhome.com/js/lei_xing_ding_yi.html
  • https://www.shouce.ren/api/view/a/13248

• 不同 tab 之间就算相同 url，sessionStorage 也是不会共享的。sessionStorage 只存在于当前会话(tab 页)中

  • 使用 window.open 或者点击链接跳转的页面，新页面的 sessionStorage 会拷贝老页面的。但两者之间并无关联，还是两个会话。
    • 自注：主要表现在假如页面 1 使用链接或者 window.open 打开页面 2，页面 2 的 sessionStorage 会拷贝页面 1 的 sessionStorage。但是无论在哪个页面操作 sessionStorage，另外一个页面的 sessionStorage 都会不会发生变化。

• 有些事件会随着浏览器的不同而有不同的实现：

  • 视频的自动播放：在谷歌浏览器中如果用不不对浏览器进行操作，那么视频将不会自动播放，例如：需要用户手动点击页面（页面的任何地方）后才可自动播放

  • 页面卸载时的事件——beforeunload：在谷歌浏览器上，如果用户没有操作页面，那么直接关闭时次事件是不会触发的；但是在火狐浏览器上，不管用户有没有操作页面，直接关闭时次事件都会触发。

  • javascript 坐标：event.x、event.clientX、event.offsetX、event.screenX 用法

    • https://www.cnblogs.com/asqq/archive/2012/04/19/2456927.html (opens new window)
      • 关于位置的计算这里用得很好，避免了性能问题：https://www.npmjs.com/package/react-draggable