面试资源题总结

1、弹性盒子的特性（目的）？

弹性盒子的目的是为了更加有效的对一个容器中的条目进行排列对齐和分配多余的空间。

 

弹性盒子属性

display:flex;

 

属性指定了弹性子元素在父容器中的位置。 父级添加

flex-direction row | row-reverse | column | column-reverse

column column-reverse

 

 

x轴的排序

justify-content: flex-start | flex-end | center | space-between | space-around

 

flex-start flex-end 开头，结尾

space-between

space-around

center全部居中

 

 

 

 

 

y轴排序方式

align-items: flex-start | flex-end | center | baseline | stretch

元素是否换行

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

 

 

2、解决Vue跨域问题？

在congif文件夹中的index中配置一下 proxyTable 设置一个代理转发，将changeOrigin的属性设置为true,本地会虚拟一个服务器，接受请求，然后解决跨域。

 

 

4、JQ解决跨域？

使用ajax，

（1）、设置dataType属性为:jsonp，获取数据的类型

（2）、jsonp：' cb ' 参数名

（3）、jsonpCallback:' foo ' 设置数据的回调函数名

5、JS/JQ的Dom操作？

js：

createElement 创建元素

appendChild、insertBefore 添加元素

removeChild 删除元素

 

parentNode 父节点

nextSibling 某节点之后紧跟的节点

firstChild 首个子节点

lastChild 最后一个自及诶单

getAttribute 获取属性

setAttribute 设置属性

jq：

append()

appendTo()

prepend() 元素内 前

prependTo() 元素内 后

insertBefore() 元素外 前

inserAfter () 元素外 后

remove() 删除

find() 查找

hasclass 是否包含calss

 

6、Bootstrap中组件？

字体图标组件、下拉组件、导航（标签页、胶囊式）

7、Vue、Angular单页面原理？

利用理由配置。

8、Vue、Angular组件化开发理念？

 

9、ajax的实现原理？

ajax的全称（Asynchronous JavaScript and XML）

通过XmlHttpRequest对象来创建

客户端发送请求给ajax,然后ajax去请求服务器，发送成功之后服务器在响应给ajax，在由 ajax决定渲染到页面的某个地方。

 

10、Vue、Angular的区别？

Angular是谷歌团队开发发布的，相对比较成熟，适用于PC端开发

vue相对来说比较灵活，便捷，适用于移动端开发

指令不同

11、Less、Sass的区别？

语法规则不同，Sass比较稳定，Less@ Sass$

12、Css模块化概念？

把样式分类，默认样式，商品图片样式，功能样式之类

好处：方便更换，便捷。

13、JQ绑定事件的方法？

bind()

on()可以绑定动态添加到页面的元素

live()

delegate()

14、兼容性问题有哪些（举例）？

 

img的蓝边框，border:none

块属性float后有行向margin，设置为行元素

img放一起，会有默认的边距，使用float

15、H5的行特性

h5新语义元素

header标签包含引导和导航等

nav制作导航组件。

aside标签主 要装载广告、侧边栏。

有利于代码可读性和SEO

 

c3

box-shadow、text-shadow、background-size

 

HTML5 是 HTML标准的最新演进版本,它是一个新的 HTML 语言版本包含了新的元素

 

媒体查询

@media (max-width: 1190px) { ... }

 

16、cookie储存容量。localStorage和sessionStorage

cookie 4k

localstorage 5M 5000KB左右

 

17、有哪些方法可以隐藏元素？

1、display:none;

2、visibility: hidden;

3、opacity: 0;

 

18、简述jsonp的原理

通过<script>标签没有跨域限制来进行数据交互。 就是提供一个回调函数接受json数据，在浏览器中执行并处理穿过来的数据。

 

 

19、javascript中包含6种数据类型：

undefined、

null、

string、

number、

boolean

object。其中，前5种是原始数据类型，object是对象类型。

 

 

20、对于加快网页的加载速度都有哪些优化的方法。

优化图片格式和大小;2.减少重定向请求;3.减少请求次数4.压缩css和js内容.

21、常见的HTTP状态码

200，请求成功

301，资源永久转移

404，请求资源不存在

500，内部服务器错误

 

1** 服务器接收请求，需要请求者继续执行操作

2** 成功，接收并处理

3**重定向

4**客户端错误

5**服务器错误

 

 

22、get、post区别

get从服务器获取数据，post向服务器发送数据请求

get传送数据量小，post传递数据比get大

get安全性低，post安全性高

 

 

23、事件委托

事件委托是把事件监听添加到父元素上，不用给每个子元素单独设置，子元素触发事件，冒泡到父元素。

好处：减少内存占用，只添加一次，而不是多次

不用从删除的元素中解绑处理，也无需绑定到新添加的元素上

 

 

24、this指向

es5，this指向，是哪个对象调用此函数，this就指向那个对象，如果没有对象调用，this指向window对象。

es6，this指向，原因是箭头函数没有自己的this,导致内部的this就是外层代码块的this

 

25，vuex中有哪些属性

 

state, 状态存放

 

getters，获取state状态

通过this.$store.getters获取

 

mutations,改变state状态

通过this.$store.commit()去改变

 

actions,应用mutations

通过this.$store.dispatch去应用mutations里的方法

module 把以上模块化

 

26、生命周期

分为8个周期

beforecreate

组件实例被创建，没属性

created

创建完成

 

beforemount

模板编译之前

mounted

完成渲染之后

 

beforeUpdate

组件数据更新之前

updated

数据更新完成

 

beforeDestroy 组件销毁前

destroyed销毁之后。

 

beforecreate

↓ 这俩之间可以进行初始化事件

created

 

27、路由守卫

to 进入哪个路由

from 离开哪个路由

next 能否进入路由

 

全局路由守卫

router.beforeEach（to,from,next），在mian.js中设置

路由独享守卫

beforeEnter(to,from,next) 路由中设置

组件守卫

beforeRouterEnter(to,from,next) 进入组件

beforeRouterLeave（to,from,next）离开组件

28,、vue构造器（extend）

通过new author.$mount('元素id')挂载到元素上

 

29、检查变量的数据类型 typeof

30、检查变量是否属于某个对象的实例 instanceof

31、闭包？

函数外部调用不到函数内部的定义的变量，闭包使函数内部变量保存在内存中

32、跨域理解

同源策略，发送请求url的协议，域名，端口三者之间任意与当前地址不同就是跨域

网络协议不同，如http协议访问https协议。

端口不同，如80端口访问8080端口。

域名不同，如qianduanblog.com访问baidu.com。

 

33、http响应中content-type包含哪些内容

 

请求中的消息主体是用何种方式编码

application/x-www-form-urlencoded

这是最常见的 POST 提交数据的方式 按照 key1=val1&key2=val2 的方式进行编码

application/json

告诉服务端消息主体是序列化后的 JSON 字符串

 

 

34、vue的双向数据绑定原理

1、通过object.defineProperty对象实现数据劫持，通过get，set方法进行数据重写，在通过观察者watcher接收变化通知，更新视图

 

 

35、vue开发生产切换

dev.env.js 开发环境配置

prod.env.js 生产环境配置

 

36、操作calss

classList.add('bounce');

classList.remove('bounce');

classList.toggle('bounce');

classList.contains('className')

 

37、视觉窗口宽

clientWidth 可视区宽

clientHeight 可是高度

offsetWidth 加上边框等的宽度

offsetHeight

 

 

38、数组方法

 

39、字符串方法

match() 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

replace('a',1); 替换指定字符，返回替换后新的字符串，对原有字符串有改变

split 用指定字符分割字符串，返回一个数组

slice(n,m) 截取

indexof 判断一个字符第一次出现在某个字符串的索引

 

40、事件集

onClick 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击

onDblClick 鼠标双击事件

onMouseDown 鼠标上的按钮被按下了

onMouseUp 鼠标按下后，松开时激发的事件

onMouseOver 当鼠标移动到某对象范围的上方时触发的事件

onMouseMove 鼠标移动时触发的事件

onMouseOut 当鼠标离开某对象范围时触发的事件

 

41、未知宽高元素居中

利用空标签设置

.box span { display: inline-block; height: 100%; vertical-align: middle; }