常见面试问题总结

1、常见的标签以及标签之间的转换
块级元素：h1-h6，p，hr水平线标签，table，form，div
行内元素：a，b，strong，em，br，span
行内块元素：img，input，select，textare，iframe
之间的转换为display：block，inline，inline-block
window.onload()和$(document).ready(function(){})，简写为
$(function(){})区别为，前者必须等页面中所有元素加载完成，后者仅仅是DOM元素绘制完成，可能相关东西并没有加载完。且第一个只能执行一个，后者可以加载多个。
2、http协议的简单理解
http为服务器端到本地浏览器之间传输超文本（即电子文档和超文本链接）的传输协议。它的默认端口是80端口。是无连接：即每次请求完成之后都会断开链接、无状态的。（无状态：即无记忆能力的，当之后的处理需要之前的文档时，还需要重新传输）。目前用的最多的是1.0版本。
常见的状态码：2xx表示请求成功，3xx表示url改变，4xx客户端错误，500服务器错误。

3、获取到下拉菜单的值和监听事件变化
根据selected来获取被选中的下拉菜单的值：

jQuery("#select1  option:selected").text();

监听事件通过onchang事件来实现：

select.onchange = function () {
  if ( select.selectedIndex != 0 ) {
    img.src = " img/ " + select.selectedIndex + " .jpg "
  }
}

4、JSON.parse() 和 JSON.stringify()
parse用于从字符串中解析出对象。如

var str = '{"name":"huangxiaojian","age":"23"}'
结果：
JSON.parse(str)

Object

age: "23"
name: "huangxiaojian"
__proto__: Object

stringify用于从对象转字符串。

var
 a = {a:1,b:2}
结果：
JSON.stringify(a)

"{"a":1,"b":2}"

5、判断是否是数组
由于typeof 判断返回值为object，所以可以通过instanceof来判断，或者通过原型来判断。

        var arr = [1,2,3];
        console.log(typeof arr);//object
        console.log(arr instanceof Array);//true
        console.log(arr.__proto__.constructor == Array);//true
        console.log(arr.constructor == Array);//true
        //和上个方法一样，自身没有这个属性，也是从原型上去找
        var str = "abc";
        console.log(typeof str);//string

6、如何实现深拷贝
简单来说就是先用JSON.stringify将对象转为字符串拷贝过去。再用JSON.parse()方法将字符串转为对象。

var a ={};
var b = JSON.parse( JSON.stringify(a) );

7、字符串逆序反转
var a = "hello";
var b = a.split('').reverse().join('');//b = "olleh"

• split为字符串方法，分割为数组，参数为分割依据。不传只有hello一个元素
• reverse,join为数组方法，join为依据参数为连接符将数组连接为字符串
• splice（开始下标，删除个数） 数组的删除方法，返回被删除的数组，即截取数组

8、修改localstrage的方法
window.localstrage.setItem和window.localstrage.getItem
9、只让CSS在当前组件起作用
只需在style中写入scoped， 。 scope：范围的意思。
10、关于webpack
解析一些文件时，需要安装一些解析器。如：
CSS文件-----------css-loader；
es6---------bable-loader（bable嘈杂的）；
vue-loader；vue文件打包给后台通过webpack build或npm来打包。
通过config.json来修改一些配置项。
11、箭头函数与普通函数的区别
箭头函数没有constructor方法，也没有prototype，所以不支持new 操作。
this始终指向函数定义时的环境，而不是执行时。
12、get和post请求
发送post请求时，会发送两次TCP请求，第一次发送请求头，再发送data。get则是一起发送过去。请求头：声明请求的方式。
13、一像素问题
使用伪元素设置1px的边框，然后使用媒体查询，根据dpr的大小，对边框进行缩放（scaleY）。
14、阻止冒泡和默认行为
分别为stopPropagation、preventDafault。

• 事件冒泡：里外两个DIV给里面的DIV添加点击事件时，出先触发里面的点击事件，然后触发外面的DIV的点击事件。原生的写法为：addEventLisner( "click",fun,true)；即多写一个true参数。
• 默认事件：如a标签的默认刷新页面。

15、分页时传参的问题
每页${pager.pageSize}条记录；//pager：寻呼机
共${pager.totalPages}页；
共${pager,totalRows};
请求时拼接在后面的参数设置。
首页：page=1;
上一页：page=${pager.currentPage-1}；
下一页：page=${pager.currentPage+1}；
末页：page=${pager.totalPages}；
16、VUE传值的问题

• 父向子传值
  父级通过props写一些数据，通过v-bind简写为:绑定属性到子组件上，就可以实现传值。v-on绑定事件，简写为@。
• 子向父传值
  在父级的methods里写一个方法（函数），通过@绑定这个函数到子组件，然后在子组件写一个函数，通过this.$emit(事件名)来触发事件，给父级发送消息。
• 兄弟之间
  通过vuex来传值，vuex的mutations，methods里写一个方法，通过export default new vuex.store({})给返回出去。vue实例下的组件获取vuex里的值用this.$store.下面数据来获取，修改里面的值我们在methods里显示的提交（commit）一个mutations来修改里面的值。this.$store.commit(" vuex里修改数据的方法名")。
• 父组件触发子组件里的方法：通过在子组件上绑定ref属性，如ref='a'，然后在父组件通过this.$refs.a获取到这个组件，然后通过this.$refs.a.click()来触发子组件上的事件。同样，也可以通过这种方法来获取DOM元素。

17、vue子路由传值的问题
是通过在路径后面拼接参数来实现的，即path: "/home/game/:num"。如：/home/game/123.
在game子路由中通过this.$route.params来获取。如：

18、关于页面重构
首先，要明确迭代的目的，最好不要进行大规模的改版，最一些用户调查，看看问题出在什么地方。然后设计好迭代方案之后再进行迭代。
目前，互联网公司通常有开发环境、测试环境、生产环境。开发环境就是我们做开发的环境，生产环境就是正式对外服务的。

19、移动端的300ms点击事件的解决
常用的有两种解决方案：
第一种：因为它的产生是因为判断是否双击缩放页面而存在的。所以解决方案就是禁止用户缩放。

第二种：通过fastclick.js这个脚本来实现。然后在window load之后在body上调用fastclick.attach(document.body)即可。