常见问题解析

2018年09月04日作者: 国瑞个人博客 416次浏览

面试其实也是对自己实力的一种考验，也是对自己能力的一种验证，接下来我们就来看看我们在工作中经常会遇到的一些问题：

1、常见的跨域方式

1、jsonp跨域

JSONP（JSON with Padding：填充式JSON)，应用JSON的一种新方法，
JSON、JSONP的区别：
　1、JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用)
　2、JSONP 只支持get请求、不支持post请求
　(类似往页面添加一个script标签，通过src属性去触发对指定地址的请求,故只能是Get请求)

2、nginx反向代理：

www.baidu.com/index.html需要调用www.sina.com/server.php，可以写一个接口www.baidu.com/server.php，由这个接口在后端去调用www.sina.com/server.php并拿到返回值，然后再返回给index.html

3、PHP端修改header

header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

2、jsonp是如何实现的

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
详情可以参考:https://blog.csdn.net/u011897301/article/details/52679486

3、Vue和Jquery的本质区别

这个问题你可以回答：Vue操作的数据，Jquery操作的是DOM，但是这并不是核心。
应该回答：Vue操作的是虚拟DOM，Jquery直接操作的DOM

4、列举出常见的异步方法

一、回调函数：这是异步编程最基本的方法。

1
2
3
4
5
6
7
8
9

function f1(callback){

setTimeout(function () {

// f1的任务代码

callback();

}, 1000);

二、事件监听

1
2
3
4
5
6
7
8
9
10
11

f1.on('done', f2);

function f1(){

setTimeout(function () {

// f1的任务代码

f1.trigger('done');

}, 1000);

三、发布/订阅（观察者模式）

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery.subscribe("done", f2);

function f1(){

setTimeout(function () {

// f1的任务代码

jQuery.publish("done");

}, 1000);

}

四、Promises对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

f1().then(f2);

function f1(){

var dfd = $.Deferred();

setTimeout(function () {

// f1的任务代码

dfd.resolve();

}, 500);

return dfd.promise;

}

参考资料：http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

5、如何给一个元素添加多个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="myBtn">1111</button>
</body>
</html>
<script>

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(1);
}, false);

btn.addEventListener("mouseout", function () {
alert("Hello world");
}, false);

</script>

参考网址：http://www.runoob.com/jsref/met-element-addeventlistener.html