每日3+3前端面试题(2020.12.15) 淩亂°似流年 2021-07-24 11:29 298阅读 0赞 ### 每天一组3+3面试题 ### * * HTML * * 通过设置表单的target="\_blank"来下载文件会被浏览器拦截吗?如何解决? * CSS * * 1.css有9大单位 * 2.固定宽度的div下,怎么让字体自适应大小,不超出宽度,也不要换行 * Javascript * * * 1.模拟 localStorage 时如何实现过期时间功能 * 2.获取浏览器当前页面的滚动条高度的兼容写法 * vue * * 跟keep-alive有关的生命周期是哪些?描述下这些生命周期 * * 基础: * 题解: * 网络 * * TCP,UDP 协议的区别 * tcp的优点,并解释 * node * * 如何获取项目的根路径 ## 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
相关 前端面试题 事件代理优点有哪些? 可以为将来元素绑定事件 减少事件注册 什么是事件对象? 保存调用该事件详细信息的一个参数,没有固定命名 li与li之间有看不见的 本是古典 何须时尚/ 2022年05月21日 00:23/ 0 赞/ 273 阅读
相关 前端面试题 [前端面试题《CSS》][CSS] [前端面试题《JS》][JS] [前端面试题《vue》][vue] [前端面试题《网络&浏览器》][L £神魔★判官ぃ/ 2022年05月15日 18:12/ 0 赞/ 456 阅读
相关 前端面试题 一、532道前端真实大厂面试题 1.express和koa的对比,两者中间件的原理,koa捕获异常多种情况说一下 2.你项目里用到第三方登录涉及的oAuth(JWT)协 以你之姓@/ 2022年05月09日 12:04/ 0 赞/ 292 阅读
相关 前端面试题 2018 vue前端面试题 1、active-class是哪个组件的属性?嵌套路由怎么定义? vue-router模块的router-link组件 2、怎么定义 灰太狼/ 2022年03月26日 14:10/ 0 赞/ 218 阅读
相关 前端面试题 今天看到一份某大厂的前端面试题,自己看了看挺简单的,由于我是即将要面临找工作实习的大学生,所以想分享给大家。 1. 给String定义一个doRepate方法,该方法接受一 ╰半橙微兮°/ 2022年01月19日 02:55/ 0 赞/ 307 阅读
相关 前端面试题 1. css的三种盒模型 c s s 的 两 种 盒 模 型 = \{ w 3 c 标 准 盒 模 型 I E 盒 模 型 弹 性 盒 模 型 css的两种盒模型=\\ 古城微笑少年丶/ 2021年11月11日 07:44/ 0 赞/ 393 阅读
相关 前端面试题 前端面试题汇总 一、HTML和CSS 21 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 21 2. 每个HTML文件里开头都有个很重要的东西,Do 不念不忘少年蓝@/ 2021年11月05日 04:44/ 0 赞/ 550 阅读
相关 前端面试题 对闭包的理解 [http://www.ruanyifeng.com/blog/2009/08/learning\_javascript\_closures.html][h 蔚落/ 2021年10月19日 00:20/ 0 赞/ 380 阅读
相关 前端面试题 版权声明:本文为博主【小北】原创文章,如要转载请评论回复。个人前端公众号:前端你别闹,JS前端实用开发QQ群 :147250970 欢迎加入~! ![Center][] 古城微笑少年丶/ 2021年10月08日 06:16/ 0 赞/ 422 阅读
相关 前端面试题(每日一更) 一,什么是MVVM? 二、写React和vue项目时为什么要在列表组件中写key,其作用是什么? 三,TCP三次握手和四次挥手 四、ES5和ES6 的继承除了写法以 我不是女神ヾ/ 2021年10月01日 05:34/ 0 赞/ 242 阅读
还没有评论,来说两句吧...