前端面试自闭36问(三)

1. 实现水平和垂直居中的方式

1. 使用flex

display: flex;
justify-content: center;
align-items: center;

2. 使用定位

// 父盒子
position: relative;
// 子盒子
position:absolute;
top: 50%;
left: 50%;
translate: tranforem(-50%, -50%);

3. 使用grid

// 父 盒子
display: grid;
// 子盒子
justify-self: center;
agign-self: center

2. (必要)布局（定位布局、flex布局、栅格布局； 如何实现自适应、定位方式）

定位布局:
position取值：absolute、fixed、relative、static、inherit，配合top、left、right、bottom属性定位
position: relative; 相对自身定位
position: absolute; 相对于 static 定位以外的第一个父元素进行定位。
position: fixed; 固定定位，相对于浏览器窗口进行定位。
position: static; 默认值
flex弹性布局
grid网格布局
实现自适应：

• rem布局实现宽高自适应
• 百分比布局
• flex弹性布局
• 左侧固定，右侧自适应：

.box1 {
    width: 200px;
    height: 50px;
    background-color: aqua;
    float: left;
}

.box2 {
    height: 50px;
    background-color: burlywood;
    overflow: hidden;
}

3. (不能错)生命周期（created 和mounted 这2个节点时 完成了什么；我们一般在这2个节点时干什么？ $nextTick）

可以是用created钩子说明组件data中的数据已经注入到了vm实例上，并且是响应式的。
可以使用mounted钩子说明组件中数据和模板已经结合，并且染到了el指定的视图上。
created 是最早可以发送ajax请求的钩子，mounted是最早可以操作dom的钩子。

4. (必要)面向对象的理解（对对象的理解：数据类型 属性和方法 设计模式 原型链 继承 多态 面向对象和面向过程）

万物皆对象，将现实生活中的事物抽象到计算机中作为计算机对现实生活的模拟即面向对象开发，有三个特征：封装、继承、多态。
封装：功能封装、组件封装，将功能的具体实现，全部封装到对象的内部，外界使用对象时，只需要关注对象提供的方法如何使用，而不需要关心对象的内部具体实现，这就是封装。
继承：子类可以引用父类的数据或者功能。在js中，继承的概念很简单，一个对象没有的一些属性和方法，另外一个对象有，拿过来用，就实现了继承。
多态：相同的事物，调用相同的方法，参数也相同时，但表现的行为却不同。多态是在强类型的语言中才有的。js是弱类型语言，所以JS不支持多态
设计模式：

• 创建型
  工厂方法，抽象工厂，单例，建造者，原型。
• 结构型
  适配器，装饰器，代理，外观，桥接，组合，享元。
• 行为型
  策略，模板，观察者，迭代器，中介者，状态，职责链，命令，访问者，备忘录，解释器。
  原型链：
  原型：Javascript 规定，每一个函数都有一个 prototype 属性，指向另一个对象。 这个对象的所有属性和方法，都会被构造函数的实例继承。这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。
  原型链：任何一个对象，都有原型对象，原型对象本身又是一个对象，所以原型对象也有自己的原型对象，这样一环扣一环就形成了一个链式结构，我们把这个链式结构称为：原型链。
  继承：

1. 原型继承：A、B两个构造函数，修改B的prototype属性指向为A的实例对象。继承到了原型上的方法
2. 借用构造函数继承：A、B两个构造函数，在B中通过call或者apply改变A的this指向，并把B的参数传给A，达到借用A中的属性实现继承的目的。继承到了构造函数中的属性
3. 组合继承: 原型链继承 + 借用构造函数继承

function Person(name, age, sex) {
    this.name = name,
    this.age = age,
    this.sex = sex
}
Person.prototype.sayHi = function () {
    console.log("Hi" + "\t我是：" + this.name + "---" + this.skin + "色皮肤");
}
function Chinese(name, age, sex, skin) {
    Person.call(this, name, age, sex)
    this.skin = skin
}
Chinese.prototype = new Person()//改变原型指向
var xy = new Chinese("小杨", 23, "男", "yellow")
xy.sayHi()

5. ES6 class继承
   Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

// 继承Person类中的属性和方法
// 父类
class Person {
    constructor(name, age, gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    sayHi(){
        console.log("hello");
    }
}

// 子类
class Chinese extends Person {
    constructor(name, age, gender, skin){
        // 在子类中，必须在constructor函数中，首先调用super()
        super(name, age, gender);
        // 调用super之后才可以去写其他代码
        this.skin = skin;
    }
}
var xm = new Chinese("xm", 20, "male", "黄");
console.log(xm);
xm.sayHi();

面向对象和面向过程：

• 面向过程就是亲历亲为，事无巨细，有条不紊，面向过程是解决问题的一种思维方式，（执行者的角度）
  • 关注点在于解决问题的过程（先xx，然后xx，在xx）；
• 面向对象就是找一个对象，让她去做这件事情（指挥者的角度）
  • 关注点在找到能解决问题的对象上。
• 面向对象不是面向过程的替代，而是面向过程的封装 ，例如洗衣服（面向过程和面向对象的区别）找洗衣机去洗衣服和自己直接取洗衣服

5. 跨域 （为何跨域 如何解决）

为了保证用户信息的安全，防止恶意的网站窃取数据。浏览器引入了同源策略，即打开的网址的协议、域名、端口号必须相同。A和B两个服务器，前端代码资源放在了A服务器中，但是页面需要请求B服务器的资源，由于受到同源策略的限制，因此需要跨域。服务器与服务器之间是不存在跨域的问题的。
如何解决：

1. jsonp:
   原理：script 标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。类似的还有img和link标签，服务端返回一个预先定义好的javascript函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合。在jquery中，将dataType设置成jsonp即可
2. 跨域资源共享(CORS)
   1. 浏览器会根据同源策略 查看是否是跨域请求，如果同源，直接发送ajax请求。
   2. 如果非同源，说明是跨域请求，浏览器会自动发送一条请求（预检请求 ），并不会携带数据，服务器接受到请求之后，会返回请求头信息，浏览器查看返回的响应头信息中是否设置了header(‘Access-Control-Allow-Origin:请求源域名或者*’);
   3. 如果没有设置，说明服务器不允许使用cors跨域，那么浏览器不会发送真正的ajax请求。
   4. 如果返回的响应头中设置了header(‘Access-Control-Allow-Origin:请求源域名或者*’);,浏览器会跟请求头中的Origin: http://www.study.com进行对比，如果满足要求，则发送真正的ajax请求，否则不发送。
3. 反向代理
   在webpack中的devServer属性的proxy中配置代理服务器地址

devServer: {
    // 自定义端口号
        open: true,
    // 开启自动刷新
        port: 3000
    }
    //配置代理，看官方webpack文档
    proxy: {
    // 只要路径以/api开头，都会被代理到http://localhost:8888/api/private/v1/api
    // 例如：/api/login 会被代理到http://localhost:8888/api/private/v1/api/login
      '/api': {
        target: 'http://localhost:8888/api/private/v1/api',
        // 配置了路劲重写后：
        // /api/login会被代理到http://localhost:8888/api/private/v1/login
        pathRewrite: {'^/api' : ''}
      }
    }