前端面试题（一）

一， 垂直居中方法：

1. 设定行高（line-height）， 仅限于单行元素效果会更好；
2. calc 动态计算： 元素的 top 属性 50%的外框高度 - 50%的元素高度；
3. 使用 table 垂直居中， 将父元素的 display设置成 table-cell；
4. transform设置， 子元素设置 relative 定位， top 设置  50%， transform 设置Y轴偏移 -50% 【  transformY(-50%)   】；
5. 绝对定位：父元素设置 relative， 子元素设置 absolute， 并且margin： auto；
6. Flex布局： 设置align-item： center；或者align-content： center；

二，三等与双等的区别：

== 仅仅检查值是否相等， 不检查类型； === 不仅检查值相等， 还检查类型是否一样；

三，如何判断一个数据类型：

1.  typeof  用于判断基本数据类型： 目前只能返回8种： string， number， boolean，symbol，bigint（es10 新增），unfined， object， function；
2. instanceof 用于引用数据类型的判断：Object，Function， Array, Date, RegExp；
3. Object.prototype.tostring（）这个是判断类型最准确的方法

四， vue 生命周期

1. beforeCreate（创建前）：在实例初始化之后， 数据观测和事件配置之前调用，这个时候组件的选项对象还没有创建，el 跟data 还没初始化， 所以 methods， data， computed这些方法于数据还没有办法访问；
2. created（创建后）： 可以调用watch， event， data， methods等数据，但是el没有， 挂载阶段还没有开始， 所以$el 属性不可见。但此时不合适发请求；
3. beforeMount： 挂载开始之前被调用， 相关的render函数首次被调用（虚拟DOM）， 实例已经完成了编译模板，el于data 的初始化， 还未挂载html到页面上。
4. mounted： 挂载完成， 模板中的html 渲染到 html 页面中， 此时可以做一些 ajax操作， mounted只会执行一次。
5. beforeUpdate： 数据更新之后被调用，在虚拟DOM重新渲染和打补丁之前，可以在该钩子中设置， 不会触发附加的重复渲染。
6. updated（更新后）： 由于数据更改会导致虚拟DOM重新渲染，调用时， 组件DOM已经更新， 所以可以执行依赖于DOM的操作， 然后在大多数情况下， 应该避免在此期间更改状态，有可能会导致更新无限循环。
7. beforeDestroy（销毁前）：在实例销毁之前调用， 实例任然完全可用。 1. 一般清除组件中的定时器和监听得dom事件。
8. destroyed（销毁后）：调用后， 所有的事件监听器都会被移除。

四， vueX  

   是vue应用程序的状态管理模式。  把组件的共享状态抽取出来， 以一个全局的单例模式管理。分别有 State， Getter， Mutation, Action，Module：

• State： vuex的仓库 ，是数据源存放地，其中存放的数据都是响应式数据，可以通过 mapState把全局的state和getters映射到当前组件的computed中。
• Getter： 可以对State进行计算，该计算属性可以多组件复用；
• Mutation： Action 类似于Mutation， 而不是直接变更状态；Action 可以包含任意异步操作；
• Module： 可以让每一个模块拥有自己的state、mutation、action、getters， 使得结构清晰， 便于管理；

优点： 多层嵌套的组件，兄弟组件间的状态可以更好的管理。缓存一些当前要使用请求远程的数据。

五， computed与watch的区别

computed（计算属性）：支持缓存， 只有当依赖发生变化， 才会重新计算。 不支持异步，无法监听数据的变化。会默认走缓存，计算属性是基于他们的响应式依赖发生的 。 如果computed 属性是函数，默认走get方法， 数据变化时， 调用set方法；

watch（侦听属性）：不支持缓存， 数据变化，会触发对应的操作。 支持异步。 监听得函数接收两个参数，一个最新的值， 一个之前的值。监听数据必须时data声明过的， 或者父组件传递过来的props中的数据。

六，设计模式

• 工厂模式：创建一个工厂，只要传递参数进去，最后返回一个对象；

  class Person {
      constructor(name) {
          this.name = name
      }
      getName() {
          console.log(this.name)
      }
  }
  class Factory {
      static create(name) {
          return new Person(name)
      }
  }
  Factory.create('alanwu').getName()

• 单例模式：保证一个类；仅有一个实例，并提供一个全局访问点；

  var Singleton = funtion(name) {
      this.name = name;
  }
  
  Singleton.prototype.getName = function() {
      console.log(this.name);
  }
  Singleton.getInstance = (function() {
      var instance = null;
      return function(name) {
          if (!instance) {
              instance = new Singleton(name);
          }
          return instance;
      }
  })
  
  var a = Singleton.getInstance('alan1');
  var b = Singleton.getInstance('alan2');
  
  console.log(a === b);

• 适配器模式：相当于一个转换接口，该模式是为了解决两个软件实体间的接口不匹配的问题

  var googleMap = {
      show: function () {
          console.log('googleMap show!');
      }
  }
  var baiduMap = {
      display: function () {
          console.log('baiduMap show!');
      }
  }
  
  var renderMap = function (map) {
      if (map.show instanceof Function) {
          map.show()
      }
  }
  // 适配器
  var baiduMapAdapter = {
      show:function(){
          return baiduMap.display()
      }
  }
  renderMap(googleMap);
  renderMap(baiduMapAdapter);

• 代理模式：监听事件全部交由父节点监听， 这样当删除增加节点的时候就不用去改变监听的代码；

  <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  <script>
      let ul = document.querySelector('#ul')
      // 事件代理
      ul.addEventListener('click', (event) => {
          console.log(event.target);
      })
  </script>

• 发布 - 订阅模式： 比如你订阅了一个网课，开始前10分钟就会提醒你去听课。这里其实就是发布-订阅的模式；

• 策略模式： 根据情况进行不一样的方案；

  var strategies = {
      "rich": function () {
          console.log("You can go with plane!");
      },
      "poor": function () {
          console.log("OH, You can go with your feet!");
      },
      "middle": function () {
          console.log("You can go with train!");
      }
  }
  // 情况
  var howShouldGo = function (money) {
      return strategies[money]();
  }
  console.log(howShouldGo("rich"));

• 迭代器模式：提供一种按顺序访问的方法。 比如foreach

  var myForEach = function (arr, callback) {
      for (var i = 0, l = arr.length; i < l; i++) {
          callback.call(arr[i], i, arr[i]) //把元素以及下标传递出去
      }
  }f
  
  myForEach([1, 2, 3], function (item, n) {
      console.log([item, n]);
  })

七， 左边右边同高

1. 添加多余的padding， margin（数字很大）， 将高度补全， 父元素设置 overflow: hidden;

2. flex: align-items: stretch； 可以将内部元素高度铺满；

3. 定位， 父元素 relative， 子元素 absolute， top，bottom 设置 0；