每日3+3前端面试题（2020.12.15）

HTML

通过设置表单的target="_blank"来下载文件会被浏览器拦截吗？如何解决？

下载文件的话，一般是使用创建a标签然后指定a标签的link，然后控制click()触发下载，下载完之后移除创建的a标签

如果是跳转新页面被拦截的话，比如支付宝的支付页面被拦截

可以使先访问空页面，然后在回调中重新赋值url：

 const openWindow = window.open("about:blank");
  $.ajax({ 
	  url: "test.html", 
	  context: document.body, 
	  success: function(res){
	    openWindow.location = res.data.payUrl;
   	  }
 });

CSS

1.css有9大单位

为了补充下面的知识

rem 相对于根组件定位的单位

html { font-size: 14px; }
div { font-size: 1.2rem; }  // 这边1rem就指的是14px

em 相对于父组件定位的单位

vh 1vh等于viewport高度的1/100

vw 1vw等于viewport宽度的1/100

vmin和vmax

如果浏览器设置为1100px宽、700px高，1vmin等于7px,1vmax等于11px。

如果宽度设置为800px，高度设置为1080px，1vmin等于8px，1vmax等于10.8px。
ex和 ch

ex和ch单位，与em和rem相似，依赖于当前字体和字体大小。然而，与em和rem不同的是，这两个单位只也依赖于font-family，因为它们被定为基于特殊字体的法案。

px就不解释了

2.固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行

css3有 vw和vh属性，指定字体大小相对于视口的百分比

div{
    font-size: 10vw;
}
<div>666</div>

Javascript

1.模拟 localStorage 时如何实现过期时间功能

在存入的时候存入过期的时间戳，拿的时候判断它的时间戳和现在的时间相比较是否超过了自己规定的过期时间，是就返回null并清空，否就取出

let getStorage = (key)=>{
    let StorageValue = localStorage.getItem(key)
    if(!value) return false
    let {value, expires} = JSON.parse(StorageValue)
    if ((expires != null && Date.now() < expires) || expires == null) {
      return value
    }
    return false
}
let setStorage = (key,value,expires)=>{
    let StorageValue = {value,expires:Date.now() + expires;}
    localStorage.setItem(key, JSON.stringify(StorageValue));
}

2.获取浏览器当前页面的滚动条高度的兼容写法

this.scrollTop 滚轮距离顶部的距离

this.clientHeight 当前视口的高度

this.scrollHeight 滚动条的高度

this.scrollTop + this.clientHeight == this.scrollHeight 到底了

window.addEventListener('scroll', function() {
    if (~~this.scrollTop == 0) {
        return that.$refs.content.classList.remove('content-change');
    }
    if (~~this.scrollTop + this.clientHeight == this.scrollHeight) {
        return that.$refs.content.classList.add('content-change');
    }
    if (timeCount == '动画改变中')  return;
    ~~this.scrollTop >= 200 ? that.$refs.content.classList.add('content-change') : '';
})

兼容写法

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

vue

跟keep-alive有关的生命周期是哪些？描述下这些生命周期

基础：

keep-alive使用 is attribute 来切换不同的组件：

• Props：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

• 用法：

  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

  和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

  当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

  主要用于保留组件状态或避免重新渲染。

<!-- 基本 -->
<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="currentTabComponent"></component>
  </keep-alive>
</transition>



<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="currentTabComponent"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="currentTabComponent"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="currentTabComponent"></component>
</keep-alive>


最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
<keep-alive :max="10">
  <component :is="currentTabComponent"></component>
</keep-alive>

注意

在 2.2.0 及其更高版本中，它还拥有activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。

题解：

keep-alive的生命周期
1.activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

网络

TCP,UDP 协议的区别

UDP 在传送数据之前不需要先建立连接，远地主机在收到 UDP 报文后，不需要给出任何确认。UDP 不提供可靠交付，一般用于即时通信），比如： QQ 语音、 QQ 视频 、直播等等

TCP 提供面向连接的服务。在传送数据之前必须先建立连接，数据传送结束后要释放连接。三次握手，四次挥手。一般用于文件传输、发送和接收邮件、远程登录等场景。

下次补：

tcp的优点，并解释

node

如何获取项目的根路径

先补充下 如何获取当前路径：以下3种都行

console.log(process.execPath)			 /usr/local/bin/node
console.log(__dirname)					 /Users/mac/Desktop/demo/03-node
console.log(__filename)					 /Users/mac/Desktop/demo/03-node/login.js
console.log(process.cwd())				 /Users/mac


var path = require("path");
var url = path.resolve('./');

• process.execPath: 当前执行的node路径
• __dirname: 当前文件所在的绝对路径
• __filename: 当前文件的文件名,包括全路径
• process.cwd() 当前执行程序的路径

获取项目的根目录

使用path模块 然后通过判断当前是第几层来拼接几个 ‘…/’

var path=require('path');
var defpath=path.join(__dirname,'../');
var abcpath=path.join(__dirname,'../../');  

或者用包 node-app-root-path 绝对路径用的包best-require