前端开发面试题

闭包

能访问到其他函数内部的变量的函数就叫闭包,优点是可以防止被引用的私有变量不能被销毁,会增大内存的消耗,造成内存的泄露

双向绑定的原理

采用数据劫持结合发布者-订阅者模式的方式,在数据变动时发布消息给订阅者,触发相应的监听回调。

节流和防抖

节流和防抖都是防止用户多次频繁的触发一个事件,防抖是如果用户频繁触发一个事件 那只会执行最后一次

节流的话是,如果用户频繁触发一个事件,他只会每隔一段时间触发一次

git打包遇到冲突怎么解决

一般是先拉取最新的代码,有冲突的话本地手动解决,然后再push上去

git常用命令

git clone 拷贝代码

git pull 拉取新的代码

git add 新增文件

git commit 提交文件

git push 提交到仓库

vuex

1.vuex是什么?怎么使用?哪种功能场景使用它? 答:vue框架中状态管理。在main.js引入store,注入。 新建了一个目录store.js,…… export 。 场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车 2.vuex有哪几种属性? 答:有五种,分别是 State、 Getter、Mutation 、Action、 Module state => 基本数据(数据源存放地) getters => 从基本数据派生出来的数据 mutations => 提交更改数据的方法,同步! actions => 像一个装饰器,包裹mutations,使之可以异步。 modules => 模块化Vuex 3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中? 答:如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。 如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用。

如何处理防抖和节流

我一般会在请求成功的时候给个setimeout函数 让他隔一段时间在进行请求之类的

浏览器的兼容性

好像处理过一些样式上的问题,但是一时想不起来,您可以先问问其他的吗

webpack 打包优化

减小文件的大小,一些组件就不要再main.js里全局引用,只在用到组件的地方按需引用

vue和jq之间有什么区别

vue注重数据的绑定和数据的操作

jq 的话比较注重dom和样式的操作,

vue的created(创建)和mounted(挂载)有什么区别

created是模板渲染html前调用

mounted是模板渲染html 后才调用的

watch和computed和methods有什么区别

计算属性有缓存,可以节省内存空间。

computed 为响应式依赖,当它所依赖的值或者变量改变时,计算属性也会跟着改变;

watch 监听的是已经在 data 中定义的变量,当该变量变化时,会触发 watch 中的方法;

methods就像我们写的普通函数一样,需要我们主动去调用才会执行,不会返回结果,只是执行过程。

当我们在获取一个数据时需要对一个大的数组进行大量循环才能获取时,那我们选择计算属性,基于依赖进行缓存那将会节省大量的性能消耗。

区别:

computed

  • 支持缓存,只有依赖数据发生改变,才会重新进行计算

  • 不支持异步

    watch

    • 不支持缓存,数据变,直接会触发相应的操作

    • 支持异步

es6新增的属性有哪些

let

const

对象和数组的解构

展开运算符

箭头函数

塌陷形成的原因如何解决

给父元素加上边框

给父元素加上内边距

给父元素添加overflow:hidden

rem适配方法怎么计算

我一般是直接在vscode里面有一个用户片段,之间设置好 然后直接用就可以了

css 的盒子模型

padding

margin

content

border

js 的数据类型有哪些 怎么判断数据类型

number、undefined、null、boolean。string

判断数据类型:typeof

比较attachEvent和addEventlistener

addachEvebt(额他吃e问)可以绑定多个事件 this指向window

addEventlistener只能绑定一个事件 this指向被绑定的事件对象

es6的class

es6的class可以看做是语法糖 他的实现基本可以用es5来实现 就是在原型上声明一个class方法,就是更像面向对象编程的语法而已

promise

promise是可以处理异步函数的方法 可以获取异步操作的消息

里面有三个参数 pendding resolve reject

resolve是成功 reject是失败

可以在 promise.then里处理失败成功的回调

localstorage和cookie的区别

1)cookie在浏览器与服务器之间来回传递 sessionStorage和localStorage不会把数据发给服务器,仅在本地保存 2)数据有效期不同 cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭 sessionStorage:仅在当前浏览器窗口关闭前有效 localStorage 始终有效,长期保存

 

什么是mvvm

MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器) 1、 M:模型层,主要负责业务数据相关; 2、 V:视图层,就是html+css层; 3、 VM:双向绑定

MVVM支持双向绑定,,可以实现视图与模型层的相互解耦

兼容性面试整理 :挑两条

(一)html部分
1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]>
 <script type="text/javascript" src="js/html5shiv.js"></script>

<![endif]-->

html5shiv.js下载地址

2.ul标签内外边距问题ul标签在IE6IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。解决方法:统一设置ul的内外边距为0
(二)CSS样式的兼容性
1.css的hack问题:主要针对IE的不同版本,不同的浏览器的写法不同

IE的条件注释hack:

<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->

<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

2.IE6双边距问题:IE6在浮动后,又有横向的margin,此时,该元素的外边距是其值的2倍

解决办法:display:block;

3.IE6下图片的下方有空隙

解决方法:给img设置display:block;

4.IE6下两个float之间会有个3px的bug

解决办法:给右边的元素也设置float:left;

5.IE6下没有min-width的概念,其默认的width就是min-width
6.IE6下在使用margin:0 auto;无法使其居中

解决办法:为其父容器设置text-align:center;

7.被点击过后的超链接不再具有hover和active属性

解决办法:按lvha的顺序书写css样式,

":link": a标签还未被访问的状态;

":visited": a标签已被访问过的状态;

":hover": 鼠标悬停在a标签上的状态;

":active": a标签被鼠标按着时的状态;

8.在使用绝对定位或者相对定位后,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序
9.IE6下无法设置1px的行高,原因是由其默认行高引起的

解决办法:为期设置overflow:hidden;或者line-height:1px;

(三)JavaScript的兼容性

1.标准的事件绑定方法函数为addEventListener,但IE下是attachEvent;
2.事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准
3.window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement
4.在低版本的IE中获取的日期处理函数的值不是与1900的差值,但是在高版本的IE中和标准浏览器保持了一致,获取的值也是与1900的差值。

比如:var year= new Date().getYear();

5.ajax的实现方式不同,这个我所理解的是获取XMLHttpRequest的不同,IE下是activeXObject
6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同

其他浏览器:parentNode parentNode.childNodes

IE:parentElement parentElement.childre

 

 

原文地址:https://www.cnblogs.com/HelloLc/p/14055155.html