一些前端面试题,网上找的答案仅供参考
1.JavaScript严格模式与非严格模式区别
JavaScript 严格模式(strict mode)即在严格的条件下运行。
严格模式通过在脚本或函数的头部添加 use strict 表达式来声明。
区别如下:
(1) 严格模式下,不允许使用with。
(2)delete运算符后跟随非法标识符(即delete 不存在的标识符),会抛出语法错误; 非严格模式下,会静默失败并返回false。
(3)严格模式中,对象直接量中定义同名属性会抛出语法错误; 非严格模式不会报错。
(4)严格模式中,函数形参存在同名的,抛出错误; 非严格模式不会。
(5)严格模式不允许八进制整数直接量(如:023。
(6)严格模式中,arguments对象是传入函数内实参列表的静态副本;非严格模式下,arguments对象里的元素和对应的实参是指向同一个值的引用。
(7)严格模式中 eval和arguments当做关键字,它们不能被赋值和用作变量声明。
(8)严格模式会限制对调用栈的检测能力,访问arguments.callee.caller会抛出异常。
(9)严格模式 变量必须先声明,直接给变量赋值,不会隐式创建全局变量。
(10)严格模式中 call apply传入null undefined保持原样不被转换为window。
参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
2.如何清除浮动
(1) 在子级元素后添加一个空元素,为其添加clear:both。 弊端:增加了无意义的元素结构。(不推荐使用)
(2)给父级元素设置一个overflow:hiddden。弊端:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素。(不推荐使用)
(3)使用after伪元素清除浮动。弊端:IE6-7不支持伪元素:after。(推荐使用)
.layout:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
3.PC端和移动端区别
(1)界面布局。PC端和移动端的屏幕尺寸不同,导致显示的内容也会有所差异。移动端屏幕相对窄小,一般是单列显示,最多也只能是双列+响应式,但是PC端的屏幕大,布局可以更加灵活。
(2)使用习惯。移动端的操作尺度比较大,单击误差大,所以按钮、链接等元素比较设计的大一些。而PC端的操作尺度比较小,用鼠标单击是一件比较准确的事情,所以在设计按钮或者链接等样式时可以稍微小一些。比如说淘宝网页的PC版和手机版。在PC版的淘宝页面中,有些小按钮能放下的功能,在移动版就必须另弹窗口让用户详细输入。
(3)网络速度。手机的网络一般是2G\3G\4G\WIFI等,网页的加载速度会影响用户的体验,需要消耗用户的流量,所以要少用图片、动画、JS等,而PC的网络一般是连接宽带或者WIFI,PC端的用户一般不会考虑页面消耗的流量,所以一般不用考虑加载问题。
(4)技术层面。移动端开发有一些jquery for mobile一类的库是专用,不适用于PC端。当然,反过来有些PC端的工具或者技术在移动端也不好用。PC应用更关注的是后台、大数据、算法类的,而移动端更关注的是如何更好地交互和体验。
4.position属性有哪些
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,sticky是CSS3新发布的一个属性。
(1)position: static(静态定位)
static是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。
(2)position: relative(相对定位)
是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响。
(3)position: absolute(绝对定位)
是指给元素设置绝对的定位,元素会脱离文档流,绝对定位的元素是不区分块级元素/行内元素/行内块级元素。
①设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。
② 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。
(4)position: fixed(固定定位)
可以简单说fixed是特殊版的absolute,fixed元素总是相对于body定位的,固定定位的元素是脱离标准流的, 不区分行内/块级/行内块级元素。
(5)position: inherit
继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。
(6)position: sticky(粘滞定位)
结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
使用条件:
父元素不能overflow:hidden或者overflow:auto属性。
必须指定top、bottom、left、right4个值之一,否则只会处于相对定位。
父元素的高度不能低于sticky元素的高度 。
sticky元素仅在其父元素内生效。
5.事件冒泡,如何阻止事件冒泡
(1)事件冒泡:在一个对象上触发某类事件,这个事件会向这个对象的的父级传播,从里到外,直至它被处理或者到达了对象层次的最顶层,即document对象。这个过程就是JavaScript的事件冒泡。
(2)阻止事件冒泡:
①直接在对应方法中使用**event.stopPropagation()**便可阻止事件冒泡。
②vue.js中提供事件修饰符:.stop 阻止事件冒泡
6.Vue2和vue3区别
(1)默认进行懒观察(lazy observation)。
在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
(2)更精准的变更通知。
比例来说:2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。
(3)3.0 新加入了 TypeScript 以及 PWA 的支持
(4)部分命令发生了变化:
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
(5)默认项目目录结构也发生了变化:
移除了配置文件目录,config 和 build 文件夹
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
参考链接:https://m.php.cn/vuejs/464077.html
7.Vue打包
需要在项目目录下执行npm run build命令,对象目进行打包,打包生成dist文件夹。
8.Vue组件之间如何传值
(1)父组件向子组件传递数据:在 Vue 中,可以使用 props 向子组件传递数据。
(2)子组件向父组件传递数据:通过一个$emit自定义一个事件,并传递数据;
子组件
this.$emit('myEvent')
父组件
<my-component v-on:myEvent="doSomething"></my-component>
9.v-if、v-show有什么区别
(1)v-if v-else 通过控制dom节点的渲染,实现显示与隐藏。
(2) v-show 通过控制dom节点css样式中display,来实现显示与隐藏。
(3)频繁的显示与隐藏某个组件时,用v-show较好。
(4)v-if会频繁渲染dom树,占用资源,影响代码运行效率。
10.Ajax跨域问题
跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等
解决方案:参考链接:https://blog.csdn.net/itcats_cn/article/details/82318092