总结一下前端常见面试题（一）_前端观察者模式面试题

d、按钮提交事件
e、浏览器窗口缩放，resize事件

function debounce(func, delay) {
        let timer = null // 计时器
        return function (...args) {
          clearTimeout(timer) // 清除上一次计时器
          timer = setTimeout(() => {
            // 重新定时
            func.apply(this, args)
          }, delay)
        }
      }

节流

• 节流是指如果持续触发某个事件，则每隔n秒执行一次。

function throtte(func, time) {
        let timer = null // 计时器
        return function (...args) {
          if (timer) return // 无视，直接返回
          timer = setTimeout(() => {
            func.apply(this, args)
          }, time)
        }
      }

13.promise的3种状态

这点简单介绍概念，用法后面在详细介绍

1 . 初始态pending

• pending。它的意思是 “待定的，将发生的”，相当于是一个初始状态。创建[Promise]对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。
  2 . 成功态resolved--也叫fulfilled
• resolved。表示解决了，就是说这个承诺实现了。 要实现从pending到resolved的转变，需要在 创建Promise对象时，在函数体中调用了resolve方法(即第一个参数)。
  3 . 失败态rejected
• rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。

14.冒泡排序

// 上口诀 双层for循环 外层长度-1 内层长度-1-i
      let arr = [4, 3, 1, 7, 8, 10]
      for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            let temp = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = temp
          }
        }
      }
      console.log(arr)

Vue部分

1.MVVM

MVVM是三个单词的缩写，model(数据，一般来自ajax或本地存储)+view(视图template)+viewmodel(vue实例)

• model数据变了，视图会跟着改变，如果用的是v-model，数据也会跟着改变，viewmodel在中间起一个桥梁作用
• model 和 view 就像现实中房东和租客一样，他们是不认识的，通过中介 viewmodel
  好处：
  • 数据驱动
    • 因为数据变了。视图也会跟着变，所以在 vue 中不用操作dom来改变视图
  • 解耦(降低了耦合性)
    • 由于 model 和 view 是没有关系的，是通过 viewmodel 结合在一起的，所以维护起来很方便，因为 model 逻辑代买改了，view 不用改

2.vue生命周期

• vue中的生命周期是指组件从创建到销毁的过程,主要分为4个周期8个钩子函数

1.分别是创建阶段的beforeCreate，created，一般在beforeCreate写loading加载效果，使用户体验更好，一般在created中发送ajax请求获取数据

2.然后是挂载阶段的beforeMount，mounted，一般会在mounted中操作DOM元素

3.更新阶段的是beforeUpdate ，updated，当数据更新时需要做统一的业务处理时，拿到最新的dom，可以使用updated 这个钩子函数

4.最后是销毁阶段的beforeDestroy，destroyed，可以在beforeDestroy做一些清理的工作，比如说定时器 和解绑一些addEventListener监听的事件

• 补充：（还有keep-alive的两个钩子函数，使用场景是当组件切换时会进行销毁，因此组件中的初始化的4个钩子函数会多次执行，比较浪费资源,此时可以使用keep-alive纪行组件的缓存,可以让组件切换时不被销毁,keep-alive有两个独有的钩子函数,分别是activated和deactivated,是组件激活和失活时会执行的两个钩子函数）
• 问：在created钩子里面可以操作dom吗？（有坑）
  • 其实是可以的，用$nextTick可以实现的

3.单向数据流

单向数据流是指父组件向子组件传递数据，子组件通过props接收，当父组件中的值改变了，子组件中对应的数据也会改变，因为props是只读的，所以无法直接在子组件中对父组件传递过来的值进行修改，但是如果这个数据是一个引用数据类型，是可以直接在子组件中修改数据中的某个属性的，只要不改变这个数据的内存地址就可以

4.双向数据绑定

• 数据 -> 视图
• 视图 -> 数据

vue中普通指令都可以实现数据变了，视图会跟着变，但是有一个特殊的指令叫v-model，它一般用于表单控件，它可以实现双向数据绑定，所谓的双向数据就是数据变了，视图就会跟着改变，反过来也是

5.v-model原理

v-model一般配合input框使用，实现双向数据绑定的效果，它是v-bind和v-on的语法糖，原理是通过v-bind将数据绑定给input框，再通过v-on:input，在input中的值改变时，通过$event可以获取到事件源对象 再通过target.value获取到input中更新后的值 将这个值再赋值给绑定的数据即可

6.事件传参

在vue的组件使用自定义事件时，$event代表子组件抛出的数据，当这个自定义事件触发一个方法时，
可以不传$event而且可以在方法中进行接收，但是如果写的话就一定要写成$event的形式，这是一个固定写法，
或者这个方法既要传参又要使用事件对象，这个时候$event也是必须要写的
- @click='fn' 在回调函数直接通过参数可以拿到事件对象
- @click='fn($event)' 这个时候@event是固定写法

7.父子组件的声明周期执行顺序

1.初始化阶段时，先执行父组件的beforeCreate、created、beforeMount三个钩子函数，然后执行子组件的beforeCreate、created、beforeMount、mounted四个钩子函数，最后执行父组件的mounted钩子函数

2.更新阶段，先执行父组件的beforeUpdate，然后执行子组件的beforeUpdate，updated，最后执行父组件的updated

3.销毁阶段，先执行父组件的beforeDestroy，然后执行子组件的eforeDestroy，destroyed，最后执行父组件的destroyed

8.v-if和v-show的区别

v-if和v-show都可以控制标签，实现组件的显示与隐藏，不同点是v-show是通过display的block和none属性来控制的，当元素隐藏时，页面结构依然存在

• v-if是通过将元素创建和销毁来控制显示与隐藏的，当v-if的条件为否时，会直接销毁该元素，当满足时会重新创建出来，有可能会影响页面的回流或重绘
• 如果该元素需要频繁切换时可以使用v-show，不需要频繁切换时可以使用v-if，提高性能

9.v-for和v-if为什么要避免一起使用

• 因为v-for的优先级比v-if要高，两者同时作用于一个标签或组件时，v-for会优先执行，执行后再进行v-if的判断，但是不满足v-if的条件的时候是可以不执行v-for的，这时候就会造成资源浪费，性能比较差
• 解决办法是可以通过计算属性将满足v-if判断条件的数据筛选出来，再使用v-if直接渲染筛选后的数据，或者是当v-if不依赖v-for时，可以通过template将v-if写在循环的外部，这样当不满足v-if的判断条件时，就不会再执行v-for了，也可以将数据放在计算属性里面计算过滤出来的数据在交给v-for循环，代替v-if的作用，即可解决。

10.自定义指令：directive

应用场景

• v-imgerror 公司项目中有的用户头像可能加载报错，可以给他一张默认图片， onerror this.img=默认图片
• v-focus 打开带有搜索的页面的时候，实现自动把光标定位到 input 中
• v-lazy 图片到可视区可以懒加载
• 自定义指令的钩子函数

1.bind 属性绑定的时候执行 只会有一次

1. inserted 当前指令所在的元素插入到页面中的时候执行一次
2. update 当前指令所在的组件中的 data 数据有更新就会执行，可以执行多次 （vue3改成mounted）
3. componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
4. unbind：只调用一次，指令与元素解绑时调用。

// 指令的钩子有三个 bind inserted update
// bind inserted 只会执行一次
// update 会反复执行
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  },
})

Vue.directive('red', {
  bind(el) {
    el.style.color = 'red'
  },
})

Vue.directive('check', {
  update(el) {
    const reg = /^[a-zA-Z0-9]+$/
    if (reg.test(el.value)) {
      el.style.color = 'green'
    } else {
      el.style.color = 'red'
    }
  },
})
复制代码

浏览器的缓存机制

这块部分理解不是很透彻，大家浅看一下就可以了🤣

• 概念：浏览器会将请求后的资源进行存贮为离线资源，当下次需要该资源时，浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求
  作用：
• 减少了不必要数据的传输、降低服务器的压力
• 加快了客户端访问速度
• 增强用户体验

1. 强缓存：过期之前一直用本地离线资源 不会和服务器交互
   • http1.0 expire 具体的时间2023年1月1日
   • http1.1 cache-control 时间期限1年 （优先级高）
2. 协商缓存 本质是看本地东西和服务器有没有变旧（服务器上有没有更新的资源） 强缓存不会和服务器交互 协商缓存会交互一次来判断东西有没有变旧
   • http1.0 last-modified/if-modified-since
   • http1.1 etag/if-none-match（优先级高）

• 当前页面中有一个img，它的src是logo.png

1. 先看本地有没有缓存资源，如果没有，就需要向服务器发请求 拿回来这个资源同时拿回来expire,cache-control,last-modified,etag(响应报文中)
2. 过了一段时间（不确定的），又有一个别的页面上面有一个img，src也是logo.png,这个时候就去看一下本地有没有缓存资源，发现有，再看一下它expire,catch-control（如果有，优先级是看cache-control),如果没有过期，就用就行了（这块属于强缓存） 但是发现如果过期了，就开始进入协商缓存的阶段，就向服务器发送一个请求把if-modified-since（值就是last-modifyed)/if-none-match(etag)通过请求头发过去, 服务器开始对比看看服务器上的资源有没有比本地更新一点，如果服务器资源还是旧的，返回一个状态码叫304，浏览器一看状态是304就继续用本地离线资源，如果服务器资源有更新的资源，状态码就是200，服务器就需要传给浏览器一个新的logo.png,流程重新再走一遍

设计模式

本人技术栈是主要是前端vue的，所以对这方面的知识还是有所欠缺的，尽量说的明白一点，其实我也不是很懂，大致明白，如果想要全面理解透还是需要很多技术储备的，很明显我不是的哈哈🤣

1.观察者模式

观察者模式即一个对象被多个对象所依赖，当被依赖的对象发生更新时，会自动通知所有依赖的对象

• 观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新
  比喻：
  宝宝 -> 父母爷爷奶奶 一对多的依赖关系
  宝宝哭 -> 父母爷爷奶奶赶紧过来服务 当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新
• 模式特点： 有二个主体 一个是被观察者 Dep 一个是观察者 watcher，在vue中v-band就是采用这种模式理念，缺点是耦合性太高

2.发布订阅模式

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。

• 在现在的发布订阅模式中，称为发布者的消息发送者不会将消息直接发送给订阅者，这意味着发布者和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件，称为调度中心或事件通道(event bus)，它维持着发布者和订阅者之间的联系，过滤所有发布者传入的消息并相应地分发它们给订阅者
• 模式特点：有三个主体 发布者 调度中心 订阅者，在vue中eventBus体现出来了这种模式理念，可以实现解耦

3.两者模式区别

1. 主体数量不一样，观察者模式有二个主体 分别是被观察者 Dep 和观察者 watcher,发布订阅模式有三个主体 分别是发布者 调度中心（事件通道 ) 订阅者
2. 发布订阅模式相比观察者模式多了个事件通道，事件通道作为调度中心，管理事件的订阅和发布工作，彻底隔绝了订阅者和发布者的依赖关系，订阅者和发布者是解耦的（不知道彼此存在）

总结给大家推荐一个实用面试题库

**1、前端面试题库 （**面试必备） 推荐：★★★★★

地址：前端面试题库

2、前端技术导航大全      推荐：★★★★★