面试过程中面试总结

1. 分别列出apply, call, bind 方法相同与不同点
2. 跨域产生的原因，作用及解决办法
3. 如何自定义事件
4. 多页面之间如何进行通讯
5. 如何实现断点传续
6. Ajax和Fetch的区别
7. var = ['3', '43', '23', '22']
   a. 递归求和
   b. 计算出数组各项重复的次数
8. 如何解决不同浏览器的样式兼容性的问题?
9. css预处理器的优缺点?
10. css实现三点省略?
11. 页面大量图片，如何优化加载，优化用户体验
12. 如何做到修改url参数页面不刷新
13. keep-alive有什么作用
14. route的区别

1.分别列出apply, call, bind 方法相同与不同点

theme: condensed-night-purple
highlight: agate

---

- call、apply、bind都是改变this指向的方法

方法定义

• apply: 调用一个对象的一个方法，用另一个对象替换当前对象，例如: B.apply(A, arguments),即A对象应用B对象的方法
• call: 调用一个对象的一个方法，用另一个对象替换当前对象。例如:B.call(A, arguments);即A对象调用B对象的方法

上面的定义看一遍是很懵的，不过自己边写例子反复读的时候，会有种拨开云雾的感觉。

call & apply的相同点:

• 方法含义是一样的，即方法功能是一样的;
• 第一个参数的作用是一样的;

call & apply的不同点:两者传入的列表形式不一样

• call 可以传入多个参数;
• apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入

call中的细节

1. 非严格模式
   如果不传参数，或者第一个参数为null或undefined，this的指向都是window

 let fn = function(a,b){
        console.log(this,a,b);
    }
    let obj = {name:"obj"};
    fn.call(obj,1,2);    // this:obj    a:1         b:2
    fn.call(1,2);        // this:1      a:2         b:undefined
    fn.call();           // this:window a:undefined b:undefined
    fn.call(null);       // this=window a=undefined b=undefined
    fn.call(undefined);  // this=window a=undefined b=undefined

2. 严格模式

第一个参数指向谁，this就指向谁，包括null&undefined,如果不传参数this就是undefined

"use strict"
    let fn = function(a,b){
        console.log(this,a,b);
    }
    let obj = {name:"obj"};
    fn.call(obj,1,2);   // this:obj        a:1          b:2
    fn.call(1,2);       // this:1          a:2          b=undefined
    fn.call();          // this:undefined  a:undefined  b:undefined
    fn.call(null);      // this:null       a:undefined  b:undefined
    fn.call(undefined); // this:undefined  a:undefined  b:undefined

apply

apply ： 和call基本一致，唯一的区别在于传参方式

apply把需要传递给fn的参数放到一个数组（或者类数组）中传递进去，虽然写的是一个数组，但是也相当于给fn一个个的传递

fn.call(obj, 1, 2)
fn.apply(obj, [1, 2])

bind

bind: 语法和call一模一样，区别在于立即执行还是等待执行，bind不兼容IE6~IE8

fn.call(obj, 1, 2); // 改变fn中的this，并且把fn立即执行
fn.bind(obj, 1, 2); // 改变fn中的this，fn并不执行

this改变为obj了，但是绑定的时候立即执行，当触发点击事件的时候执行的是fn的返回值undefined

document.onclick = fn.call(obj);

bind会把fn中的this预处理为obj，此时fn没有执行，当点击的时候才会把fn执行

document.onclick = fn.bind(obj);

2. 跨域产生的原因，作用及解决办法

同源策略：是指协议（http、https、rtmp…）、域名（jd、taobao、baidu）、端口（80、8080、443）其中有一个不同都产生跨域
解决办法:

1. CORS
   在js文件中加入

image.png

2. 代理

vue代理

proxyTable: {  
    '/api': {  //代理地址  
        target: 'http://10.1.0.34:8000/',  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            '^/api': '/'   //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉  
        }
    }
}

3. charles代理
4. jsonp 只支持GET请求，不支持post请求

3. 如何自定义事件

4 多页面之间如何进行通讯

1. props/ $emit

2. $emit /$on

3. EventBus总线

4. VUEX

5. EventBus总线事件详解
   1、在main.js中在原型上挂载$EventBus(初始化)

Vue.prototype.$EventBus = new Vue()

• 向EventBus发送事件
  发送事件的语法: this.$EventBus.$emit(发送的事件名，传递的参数)
  A组件：
  举个栗子：有两个组件A和B需要通信，他们不是父子组件关系，B事件需要获得A事件里的一组数据data

• 接收事件
  接收事件的语法: this.on(监听的事件名，回调函数)
  A组件已经向全局事件总线EventBus发送了一个aMsg事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。

B组件展示结果:

A组件中的Msg
这样，B组件就轻松接收到了A组件传递过来的参数，并成功展示了该参数，这样是不是就很简单的解决了各组件之间的通讯呢？虽然EventBus是一个很轻便的方法，任何数据都可以往里传，然后被别的组件获取，但是如果用不好，容易出现很严重的BUG，所以接下来我们就来讲解一下移除监听事件。

• 移除监听事件
  在上一个例子中，我们A组件向事件总线发送了一个事件aMsg并传递了参数MsgA，然后B组件对该事件进行了监听，并获取了传递过来的参数。但是，这时如果我们离开B组件，然后再次进入B组件时，又会触发一次对事件aMsg的监听，这时时间总线里就有两个监听了，如果反复进入B组件多次，那么就会对aMsg进行多次的监听。

总而言之，A组件只向EventBus发送了一次事件，但B组件却进行了多次监听，EventBus容器中有很多个一模一样的事件监听器这时就会出现，事件只触发一次，但监听事件中的回调函数执行了很多次
解决办法:在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听

语法: this.$EventBus.$off(要移除监听的事件名)

如何实现断点传续

6. Ajax和Fetch的区别

（1）、ajax是理用XMLHttpRequest对象来请求数据的，而fetch是window的一个方法

（2）、ajax基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

（3）、fetch比较与ajax有着更好更方便的写法

（4）、fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理

（5）、fetch没有办法原生监测请求的进度，而XHR可以
2.ajax用法
因为它原生的写法很鸡肋，所以大多会封装下，导致可能很多人不会自己写个ajax请求。都是用的JQuery或者Axios来请求数据的

var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象
xhr.onload= function(){ //请求完成
  console.log(this.responseText);
}
// 发送请求:
xhr.open('GET', '/user');
xhr.send();

这样一个请求就发出去了。很麻烦，发个简单请求，还得写这么多行代码。 实际开发中当然不会这么写，否则代码冗余，可读性差，用promise封装一下

var Ajax = {
    get: function(url,fn){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,fn){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}

代码注释：

1.open(method, url, async) 方法需要三个参数:

method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

①无法使用缓存文件（更新服务器上的文件或数据库）
②向服务器发送大量数据（POST 没有数据量限制）
③发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2.send() 方法可将请求送往服务器。

3.onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4.readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）
1: 服务器连接已建立（open方法已经被调用）
2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）

5.responseText：获得字符串形式的响应数据。

6.setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

3.fetch用法

1、第一个参数是URL
2、第二个参数可选参数 可以控制不同的init对象
3、使用了js 中的promise对象

var arr1 = [{
    name: "haha",
    detail:"123"
}];

    fetch("url", {
        method: "post",
        headers: {//设置请求的头部信息
            "Content-Type": "application/json"
            //跨域时可能要加上
            //"Accept":"allication/json"
        },    //将arr1对象序列化成json字符串
        body: JSON.stringify(arr1)//向服务端传入json数据
    }).then(function(resp) {
        resp.json().then((data) => {
                    
        })
    });

所有的IE浏览器都不会支持 fetch()方法,服务器端返回 状态码 400 500的时候 不会reject

7. var = ['3', '43', '23', '22', '22', '33'];

   a. 递归求和
   b. 计算出数组各项重复的次数

let nums =  [1, 3, 2, 3, 4, 4, 5];
    let sum = nums.reduce(function (prev, cur, index, array) {
        return prev + cur
    })
    console.log(sum)

     function sum(arr) {
        let len = arr.length;
        if(len === 0){
            return 0;
        } else if (len === 1){
            return arr[0];
        } else {
            return arr[0] + sum(arr.slice(1));
        }
    }
    let arr =  ['1', '3', '2', '3', '4', '4', '5'];
    console.log(sum(arr));

9. css预处理器的优缺点?

优点：

CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处

缺点：

简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

10. css实现三点省略?

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

效果:

三点省略的css样式.png

11. 页面大量图片，如何优化加载，优化用户体验

12. 如何做到修改url参数页面不刷新

方法1：

监听路由变化，把初始化的方法重新写到监听的方法里面执行

watch: {
    $route(to, from) {
        if (this.$route.query.参数) {
             重新加载一次created或者mounted钩子中的渲染的数据
        }
      },
    // 或者
    $route(){
         if (this.$route.query.参数) {
             重新加载一次created或者mounted钩子中的渲染的数据
         }
       }, 
    },

方法二: 给router-view加个唯一的key，来保证路由切换时都会重新渲染触发钩子了（这个方法是我在收集资料的时候看别人文章发现的）

vue-router上加个唯一的key.png

13. keep-alive有什么作用

14. $router和$route的区别

15. this.$nextTick()怎么用?