D7【问答格式】【精简版】每日一练前端

Q1. 前端路由中hash和history有什么区别？

• hash是通过监听location对象的hash值变化事件来实现前端路由的。hash模式下的url是带有#号的，hash值变化是不会重新对服务器发起请求的，因为hash后面的部分是不会被包含在http请求中传递到服务器，他只会传根url。
• history是通过利用浏览器的History API来实现的。history模式下的url是不带有#号的，是那种传统的url。history模式需要后端去配置，去重定向到前端应用的入口点，防止后端返回404错误。

Q2. 判断两个值是否相同有哪些方法？

• ==: 在测试相等性之前，会对两个操作数进行类型转换，比如"" == false结果为true
• ===: 在测试相等性之前，不会对两个操作数进行类型转换，比如"" == false结果为false
• Object.is(): 也不会对操作数进行类型转换，但他和===还是有区别的，Object.is()将数值+0和-0视为不相等，会将NaN和NaN视为相等
• 用lodash里的isEqual进行一个深比较

Q3. React类组件和函数组件的本质区别

• 类组件是通过继承React.component得到的组件，他有生命周期，可以获取实例化的this，并且基于this做各种操作，内部可以定义并且维护state
• 函数组件是以函数形态存在的组件，他没有生命周期，而且他是无状态组件
• 而且函数式组件能捕获特定的渲染所用的特定的值，他是可以和一个特定的渲染绑定在一起的，因为props他是不可变的，而类组件中的this永远是可变的，他永远绑定最新的实例，这样他就会失去正确的props

Q4. document.ready和window.onload区别

• document.ready是指DOM加载完成后就会被调用，不包括图片等非文字媒体文件，window.onload是指页面包含图片等文件在内的所有元素都加载完成后被调用
• 多次执行document.ready的话他会按顺序分别执行，但是多次执行window.onload的话他只会执行最后一个函数。

Q5. localStorage如何像Cookie一样有过期时间？

• 存储数据同时存储一个过期时间戳，然后在获取数据时候，检查有没有过期，过期的话就删除存储的数据
• 如果想要数据在用户关闭浏览器后自动过期，可以监听页面关闭时间，通过beforeunload事件来清除存储的数据。

Q6. 伪类和伪元素的区别

• 伪类用于选择元素的状态或位置，而伪元素用于选择元素内的特定内容部分，生成一个行内元素
• 伪类是:开头，伪元素是::开头，伪类有hover,active,first-child,nth-child, 伪元素有::before, ::after, ::first-line, ::first-letter，而且需要content去修饰他的内容
• 优先级的话是伪类高于伪元素

Q7. css怎么实现模块化

• 可以通过css in js的方式实现模块化，也就是最近很火的styled-components库
• 也可以通过配置webpack里的loader，在css-loader里把模块化开启

Q8. this是什么

它代表当前执行上下文中的对象。this 的指向是动态的，它根据执行上下文的不同而变化。

1. 全局上下文中的 this： 当在全局范围中使用 this 时，它指向全局对象，通常在浏览器中是 window 对象。
2. 函数上下文中的 this： this 在函数内部的指向取决于函数是如何被调用的。下面是一些情况：
   • 函数作为独立函数调用： 当函数独立调用时，this 指向全局对象（在浏览器中通常是 window）。
   • 函数作为对象的方法调用： 当函数作为对象的方法被调用时，this 指向该对象。
   • 使用构造函数： 当函数被用作构造函数创建对象时，this 指向新创建的对象。
   • 使用 call、apply 或 bind 方法： 这些方法允许你显式设置函数内部的 this 值。
3. 箭头函数中的 this： 箭头函数的 this 始终指向定义它的外部函数的 this 值，而不受调用方式的影响。
4. DOM 事件处理程序中的 this： 在事件处理程序中，this 通常指向触发事件的 DOM 元素。
5. 类中的 this： 在类的方法中，this 指向实例对象。

Q9. e.target和e.currentTarget区别

• e.target是指的事件触发者
• e.currentTarget是指的事件监听者

Q10. link的preload和prefetch

• preload: 让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源。这样可以将加载和执行分离开，可以不阻塞渲染和window.onload 事件。
• 提前加载指定资源，不再出现依赖的font字体隔了一段时间才刷出
• prefetch: 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。