2020年10月10日
1.css中隐藏元素的方法:
opacity 设为 0:该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用
注意:该属性是兼容IE9以上的浏览器,IE8 以及更早的版本支持替代的 filter 属性,例如: filter:Alpha(opacity=50)
visibility 设为 hidden:该属性类似opacity属性,该属性值为hidden的时候,元素将会隐藏,也会占据着自己的位置,并对网页的布局起作用,与 opacity 唯一不同的是它不会响应任何用户交互。
display 设为 none:该属性才是真正意义上的隐藏元素,当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。
注意:1.任何的版本的 Internet Explorer (包括 IE8)都不支持 “inherit” 和 “collapse” 属性值。
position 设为 absolute 然后将位置设到不可见区域:该属性的意义就是把元素脱离文档流移出视觉区域,添加该属性后既不会影响布局,又能让元素保持可以操作。应用该属性后,主要就是通过控制方向(top,left,right,bottom),达到一定的值,离开当前可是页面。
注意:你得避免使用这个方法去隐藏任何可以获得焦点的元素,因为如果那么做,当用户让那个元素获得焦点时,会导致一个不可预料的焦点切换。这个方法在创建自定义复选框和单选按钮时经常被使用。
结论:
这里介绍了5中方法,每种方法之间都是存在区别的,到底要用哪一种的话,就要视情况而定。
2.vue中隐藏元素的方法:
v-show和v-if
v-if控制 DOM的删除和添加,不同于v-show对DOM的显示和隐藏
3.定位有哪几种方式:
Position:absolute绝对定位,relative相对定位,fixed 固定定位,static 静态定位
这几种定位方式分别是基于什么定位的?
4.轮播图的实现:
原生JS无缝轮播图(左右切换、导航图标)
功能:
1、实现轮播图的左右无缝切换
2、实现导航图标的跟随显示、点击切换
3、使用定时器进行无缝轮播
轮播图有很多种实现方式
5.状态码有哪些?
HTTP状态码的英文为HTTP Status Code。下面是常见的HTTP状态码:
200 – 请求成功
301 – 资源(网页等)被永久转移到其它URL
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误
HTTP状态码的分类
HTTP状态码由三个十进制数字组成,第一个十进制数字定义了状态码的类型,后两个数字没有分类的作用。HTTP状态码共分为5种类型:
分类分类描述
1信息,服务器收到请求,需要请求者继续执行操作
2成功,操作被成功接收并处理
3重定向,需要进一步的操作以完成请求
4客户端错误,请求包含语法错误或无法完成请求
5**服务器错误,服务器在处理请求的过程中发生了错误
6.http和HTTPS的区别:
http协议和https协议的区别:传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同
一、传输信息安全性不同
1、http协议:是超文本传输协议,信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息。
2、https协议:是具有安全性的ssl加密传输协议,为浏览器和服务器之间的通信加密,确保数据传输的安全。
二、连接方式不同
1、http协议:http的连接很简单,是无状态的。
2、https协议:是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议。
三、端口不同
1、http协议:使用的端口是80。
2、https协议:使用的端口是443.
四、证书申请方式不同
1、http协议:免费申请。
2、https协议:需要到ca申请证书,一般免费证书很少,需要交费。
7.Vue的传值方法?除了父子和兄弟组件还有什么方法?vuex怎么用的?路由是怎么传值的?
1、 使用$router.push 拼接参数传参
2、 使用name来确定匹配的路由,通过params来传递参数
3、 使用path来匹配路由,然后通过query来传递参数
注意path不能与params一起使用,需要通过path来匹配路由的时候,使用query来传参。
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this.route.query.name和this.route.params.name。
query更加类似于我们ajax中get传参,params则类似于post,前者在浏览器地址栏中显示参数,后者则不显示
8.axios中哪些方法:
9.get和post的区别除了安全方面还有什么区别?
2020.10.16
1.Es6有哪些新特性?
(重点是要理解每一个特性)
Let和const关键字
变量的解构赋值
字符串,数值的扩展
数组,对象的扩展
函数的扩展
for…of
2.路由导航守卫是什么?如果有五个路由其中两个要通过登录,其中三个不用登录可以直接访问这个怎么实现?
全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫:
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数:
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
3.一个盒子水平垂直居中的方法
1.盒子没有固定的宽高
(1)transforms变形(IE8不支持,属性需要些浏览器厂商前缀)
(2)弹性盒子:
在父元素上加三句话:
/*只需要在父元素上加这三句*/
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
display: -webkit-flex;
2.盒子有固定的宽高
(1)margin负间距(绝对定位+top:50%+left:50%+margin-top:-盒子的高度+margin:-盒子的宽度)
(2)绝对定位+margin:auto(该方法兼容ie8以上浏览器)
上下左右均0位置定位;margin: auto;
4.数组去重的方法
(1)第一种方式就是最简单的set去重(o(n))
var arr = [1,2,2,4,3,4,1,3,2,7,5,6,1]
var newArr = new Set(arr)
(2)2.第二种方式就是用indexOf来去重(o(n^3))
判断新数组中某个数字是否存在
function fn(arr){
let newArr = []
arr.forEach((val)=>{
if(newArr.indexOf(val) == -1){
newArr.push(val)
}
})
return newArr
}
(3)第三种方式普通去重(o(n^3))
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1)
}
}
}
(4)键值去重(o(n^3))
根据键值是唯一的来去重
function fn(arr){
let arr1 = [],
arr2 = []
arr.forEach((val)=>{
arr1[val]=val
})
//arr1数组会存在空的情况
//所以返回arr2
arr1.forEach((val)=>{
if(!!val){
arr2.push(val)
}
})
return arr2
}
(5)sort排序后去重(o(n^2))
只比set复杂度低
function fn(arr){
let newArr = []
arr.sort((a,b)=>{
return a-b
})
arr.forEach((val,index)=>{
if(val != arr[index+1]){
newArr.push(val)
}
})
return newArr
}
5.vue框架的优点和缺点
vue是一个构建数据驱动的web界面的渐进式MVVM框架
vue有什么好处呢?
性能好
简单易用
前后端分离
单页面应用用户体验好
but
它不适于seo优化,而且封装的比较厉害,报错不明显,适合单人开发,适合中小型项目
6.对于原型链的理解?
(1)原型对象和构造函数有何关系?
在JavaScript中,每当定义一个函数数据类型(普通函数、类)时候,都会天生自带一个prototype属性,这个属性指向函数的原型对象。
当函数经过new调用时,这个函数就成为了构造函数,返回一个全新的实例对象,这个实例对象有一个__proto__属性,指向构造函数的原型对象。
(2)能不能描述一下原型链?
JavaScript对象通过prototype指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条, 即原型链。
对象的hasOwnProperty()来检查对象自身中是否含有该属性
使用in检查对象中是否含有某个属性时,如果对象中没有但是原型链中有,也会返回true
7.行内元素和块级元素的区别?
1.行内元素与块级函数可以相互bai转换,通过修改display属性du值来切换块级元zhi素和行内元素,行内元素display:inline,块级元素display:block。
2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。
3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。
4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。
Img标签是个例外,它虽然是行内标签,但是可以设置宽高
8.谈谈你对setTimeout的理解?setTimeout(0)是什么意思?
(1)setTimeout(fun,time);//fun为一个函数,time为等待的时间。
等待time时间后,把要执行的任务(fun)加入到Event Queue中,又因为是单线程任务要一个一个执行,如果前面的任务需要的时间太久,那么只能等着,导致真正的延迟时间远远大于time。
setTimeout设置的时间,不是等主线程执行完开始计时,而是当执行到这条语句时就开始计时了
(2)如果代码中设定了一个 setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。所以setTimeout 并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
settimeout(0)就起到了一个将事件加入到队列中,待执行的一个功能效果!
2020年10月19日上午
1.数组去重的方法
重点:ES6的set方法有两种写法去重
(1)let array = […new Set(arr)]
(2)Array.from(new Set(arr))
set有一个缺点就是不能去掉空对象{ }
其他的方法的话前面都总结了(面试中常问的)
2.生命周期什么时候能拿到实例data,页面渲染完成在生命周期什么时候
是在beforecreate之后created之前
根实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)
组件实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted)
全局路由勾子(router.beforeEach)
组件路由勾子(beforeRouteEnter)
组件路由勾子的next里的回调(beforeRouteEnter)
指令的周期(bind,inserted)
nextTick方法的回调
3.iframe的优缺点?
iframe 创建包含另外一个文档的内联框架(即行内框架),简而言之,iframe标签是框架的一种形式,一般用来包含别的页面。
优点:
1.iframe能够把嵌入的网页原样展现出来;
2.模块分离,便于更改,如果有多个网页引用iframe,只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷;
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,增加代码的可重用;
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决;
5.重载页面时不需要重载整个页面,只需要重载页面中的一个框架页;
6.方便制作导航栏。
缺点:
1.样式和脚本需要额外链入,调用外部页面,需要额外调用css,增加页面额外的请求次数,增加服务器的http请求;
2.代码复杂,在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面,会影响搜索引擎优化,不利于网站排名;
3.框架结构有时会让人感到迷惑,滚动条除了会挤占有限的页面空间外会使iframe布局混乱,还会分散访问者的注意力,影响用户体验;
4.链接导航疑问。运用框架结构时,必须保证正确配置所有的导航链接,否则,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内,这种情况下访问者便被陷住了,因为此时他没有其他地点可去;
5.产生多个页面,不易管理;
6.多数小型的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
4.怎么在css中设置盒模型?
设置box-sizing:boder-box/content-box
这个时候可能还会问到关于IE盒模型与W3C盒模型的区别
5.data-自定义属性的作用?
data- 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
(1) 属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符
(2)属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 “data-” 的自定义属性。
2020年10月19日下午
1.vue生命周期?
同上答案
2.ES6有哪些新特性?
同上答案
3.如果开发一个项目怎么着手去开发?
面试官说的是:首先要分析这个项目具体有哪些功能,这些功能有哪些是必要的和能够做出来的,有哪些是不必要的和无法做出来的,在正对于这些功能看能够具体的通过哪些技术能够实现,在进行项目的搭建以及开发写代码。
网上的答案的话参考这篇文章:
如何开始接手一个项目
4.如果两个人合作开发一个功能怎么去开发?
------解决方案--------------------
起码的配置管理工具得有啊
肯定都是更新同一个工作区
而且最开始做的时候要统一风格和标准
开始做的东西要找老大们评审,确认一下这样做行不行,别闷头往下做,很容易做的越多错的越多,到头来返工
------解决方案--------------------
两人的水平接近的话,一起开发各自负责的模块,然后交叉测试