面试回顾（二）

9.跨域

因为浏览器的同源策略（同协议，同域名，同端口）导致了跨域问题

跨域XHR对象增加了一些限制（不能使用setRequestHeader()设置自定义头部；不能发送和接受cookie；getAllResponseHeaders()方法始终返回空字符）

• CORS（跨域资源共享）-使用自定义的头部允许浏览器和服务器互相了解
  • 客户端请求时会有一个额外的头部origin，服务器相应请求，发送Access-Control-Allow-Origin头部，包含相同的源
    • origin:http://www.baidu.com
    • Access-Control-Allow-Origin:http://www.baidu.com
• 替代性跨源
  • 图片探测
    • 可以动态创建图片，然后通过他们的onload和onerror事件处理得知何时收到响应
    • 只能发送get请求，无法获取服务器的响应内容
  • JSONP（JSON with padding）
    • 包含回调和数据
    • 通过动态创建<script>元素并为src属性指定跨域URL实现的
      • 缺点：不能确保这个域可信，已经不好确定JSONP是否请求失败

10.前端页面常见布局

• 文档布局
• 浮动布局
• 流式布局
• 定位布局
• 自适应布局
• 弹性布局
• 响应式布局

11.Promise的原理

• 构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject。

• Promise上还有then方法，then 方法就是用来指定Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）

• 当状态变为resolve时便不能再变为reject，反之同理

function Promise(executor){
    let self = this;
    self.status = 'pending';
    self.value = undefined;
    self.reason = undefined;

    function resolve(value){
        if(self.status === 'pending'){
            self.status = 'resolved';
            self.value = value;
        }
    }
    function reject(reason){
        if(self.status === 'pending'){
            self.status = 'rejected';
            self.reason = reason;
        }
    }
    executor(resolve,reject);
}
Promise.prototype.then = function(onRejected,onFufiled){
    let self = this;
    if(self.status === 'resolved'){
        onFufiled(self.value);
    }
    if(self.status === 'rejected'){
        onRejected(self,reason);
    }
}

12.js的深拷贝和浅拷贝

• 基本数据类型不存在深拷贝和浅拷贝

• 引用数据类型会有深拷贝和浅拷贝

  • 引用数据类型进行复制时，将A复制给B，修改B的值，A也会修改，这属于浅拷贝
    • 数组的concat，slice，对象的assign
  • 将A复制给B，修改B的值，A不会修改，这属于深拷贝
    • JSON内置对象
      • var b = JSON.parse(JSON.stringify(s))
    • 采用递归去拷贝所有层级属性

13.Vue双向绑定

vue的数据双向绑定主要通过Object.defineProperty()方法来进行数据劫持以及发布者-订阅模式来实现的

• 1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

• 2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

• 3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

14.web安全

• xss攻击（跨站脚本攻击）：攻击者通过在返回回来的HTML中插入恶意的脚本进行攻击
  • 设置cookie为http-only，它会禁止脚本访问cookie
  • 对用户的输入进行检查
  • 对服务端的输出进行检查
• csrf（跨域请求伪造）：攻击者冒充用户获得用户权限进行攻击
  • 使用验证码
  • 使用token

15.v-router

• 路由懒加载（将组件模块化，然后按需加载）
  • const app = ()=> import('../views/app.vue')
• 路由模式
  • history
  • hash（默认模式）-url使用#后面定位路由
• 钩子函数
  • 全局钩子函数（beforeEach，afterEach）
  • 路由内部钩子函数（beforeEnter）
  • 组件内部钩子函数（beforeRouterEnter，beforeRouterUpdate，beforeRouterLeave）