huanggr
面试其实也是对自己实力的一种考验，也是对自己能力的一种验证，接下来我们就来看看我们在工作中经常会遇到的一些问题：
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
清除浮动的方法
一、给父级添加overflow:hidden
二、给父级添加边框
三、在父级下面添加这样一句话：
,意思为它的左右两边都不能够有浮动
待续……
1 | 待续…… |
![前端[yarnpkg/yarn] There appears to be trouble with your network connection.](https://www.huanggr.cn/wp-content/themes/menhu-1/thumb.php?src=https://www.huanggr.cn/wp-content/uploads/2020/04/74115b4a8959fd3375a087dc7690f4d3.png&w=300&h=180)
7