2024年Web前端最新项目总结：vue(5)，2024年最新今日头条 前端面试

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

（3）上下滚动联动

（4）下划线相对滚动

（5）tab组件抽象和封装

（6）组件使用

（7）扩展props从而可以设置初始页面

（8）样式

---

一、header组件

==============

1. 概括

---

v-header组件的主要由内容区和公告区组成，核心要点在于公告栏要有不折行+显示缩略的效果。实现方法为设置属性：white-space: nowrap； overflow: hidden；text-overflow: ellipsis。还有就是对于整个header部分显示半透明模糊效果的图片，背景整个位于这部分的底部，把图片position：absolute，并设置index：-1，宽高撑满header区块。模糊效果使用filter，并且设置header组件有一个灰色半透明背景rgba。

2. 布局

---

布局主要包含两个区块：内容区（图象+名称描述等+浮层），公告相关

3. 具体实现

---

（1）组件传值

首先需要在props接收seller对象，并且需要设置默认为空

props: {

seller: {

type: Object,

default() {

return {}

}

}

},

（2）商家图片部分

直接添加图片

（3）右侧content内容

动态绑定seller.name 、seller.description 、seller.deliveryTime

Support表示下面的满减活动，包含icon和text，并且supports是一个数组，使用v-if

{{seller.name}}

{{seller.description}}/{{seller.deliveryTime}}分钟送达

{{seller.supports[0].description}}

（4）添加浮层入口

{{seller.supports.length}}个

（5）公告区bulletin-wrapper

三个部分：icon，文字，箭头（点击展开蒙层）如果内容超出区域会显示缩略（…）

{{seller.bulletin}}

由于描述比较多，如果不写样式会把描述全部显示，不符合所需结果。不折行+显示缩略：

white-space: nowrap

overflow: hidden

text-overflow: ellipsis

（6）背景图

效果：显示半透明的图片，模糊效果，背景整个位于这部分的底部，方法：把图片position：absolute，并设置index：-1，宽高撑满header区块。模糊效果：filter，并且设置header组件有一个灰色半透明背景rgba

.background

position: absolute

top: 0

left: 0

width: 100%

height: 100%

z-index: -1

filter: blur(10px)

二、Header-detail头部弹层组件

=========================

1. 概括

---

整个组件效果是全屏效果，下部还有个固定的关闭按钮，由于本身高度可能超过手机高度，因此会滚，不能使用position fixed布局，如果内容比较长，则会盖住X。这里使用到了经典的css sticky footers 布局。

尝试过把head-detail组件放在header组件中，为了防止父元素的嵌套样式效果影响组件，更好的方法是把该部分被创建为cube-ui中的create-API组件。（cube-ui提供了一个很好的API就是creat-api模块，让我们把一个模块从声明式的写（）,而变为API调用（creatAPI(vue,component)）即当一个组件执行createAPI之后，我们可以在组件内部通过$ceate(Star)来调用组件，并且可以动态挂载到body下面。因此就很适合这种全屏弹窗组件动态挂载到body下，而移除时可以从body下卸载。）在调用时，使用驼峰形式引入组件，传入props，创建之后通过组件调用show()方法控制显示，使用hide()方法控制浮层关闭。

由于show（）和hide（）方法在后面其他部分有类似的逻辑处理，因此抽离出mixin。对于过渡动画，使用定义name=”fade”,然后写动画。

其中的—text----是flex布局由三个部分组成：line text line

2. 布局

---

效果：全部屏效果，模糊，本身高度可能超过手机高度，因此会滚动。主要分为内容部分+下层关闭部分。

不能使用position fixed布局，如果内容比较长，则会盖住X。这里使用到了经典的css sticky footers 布局。并且组件引入放在app.vue中，而不是在header组件内部.（但是此处会被使用createAPI做出修改）

3. 实现

---

（1）Css sticky footer布局

Sticky footers设计可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。参考连接：https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

我们选择一个兼容性较好的，但是比较复杂的方法，套路如下：需要设置两层，分别是：detail-wrapper clear-fix（内容内部有一个detail-main 用于真正承载内容）和detail-close。

其中detail-wrapper主要有一个min-height来成满屏幕，内部的detail-main中设置一个padding-bottom为底部留下空间，最后detail- close向上移动margin为刚才留出部分。

.detail-wrapper

display: inline-block

width: 100%

min-height: 100% // 撑满屏幕

.detail-main

margin-top: 64px

padding-bottom: 64px // 重要，撑开下面高度

.detail-close

position: relative

width: 30px

height: 30px

margin: -64px auto 0 auto // -64

clear: both

font-size: $fontsize-large-xxxx

（2）clear-fix

使用了cube-ui中的，默认写法如下：

.clear-fix

display: inline-block

&:after

display:block

content: “.”

height: 0

line-height: 0

clear: both

visibility: hidden

（3）—text—部分

需要使用flex布局，三个部分组成：line text line

小标题自适应布局，推荐文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

优惠信息

Title使用flex布局，对于屏幕80%的宽度，margin左右是浮动的

line自适应布局flex：1，位置为相对。text文字根据内容长度自动撑开

.title

display: flex

width: 80%

margin: 28px auto 24px auto

.line

flex: 1

position: relative

.text

padding: 0 12px

注意：此处使用flex布局在编译的时候会有postcss自动生成一些兼容性代码，而不用写mixin

（4）活动内容部分

主要是遍历数组实现

• {{seller.supports[index].description}}

  （5）组件之间的引用–创建CreateAPI

  思考：可以尝试把head-detail组件放在header组件中。可以实现。

  推荐：遇到全屏弹层组件，把组件放在body下是最保险的。那是因为对于嵌套的fix布局可能受到父元素影响等。

  方法：cube-ui提供了一个很好的API就是creat-api模块，让我们把一个模块从声明式的写（）,而变为API调用（creatAPI(vue,component)）即当一个组件执行createAPI之后，我们可以在组件内部通过$ceate(Star)来调用组件，并且可以动态挂载到body下面。因此就很适合这种全屏弹窗组件动态挂载到body下，而移除时可以从body下卸载。

  1）定义一个register.js,写入

  import { createAPI } from ‘cube-ui’

  import Vue from ‘vue’

  import HeaderDetail from ‘components/header-detail/header-detail’

  createAPI(Vue, HeaderDetail)

  2）并且在入口文件main.js中加入import './register’实现API的调用，因此不需要在app.vue中引入该组件

  （6）添加点击事件实现弹层显示

  1）添加click事件showDetail()

  2）在此处可以实现API调用，定义headerDetailComp是一个组件，并且使用驼峰形式引入组件，传入props，创建之后通过组件调用show()方法控制显示。同理使用hide()方法控制浮层关闭。

  methods: {

  showDetail() {

  this.headerDetailComp = this.headerDetailComp || this.$createHeaderDetail({

  $props: {

  seller: ‘seller’

  }

  })

  this.headerDetailComp.show()

  }

  },

  3）控制显示：在head-detail组件中添加v-show=”visible”,并通过show方法修改visible的true 和 false。为了简化之后的操作，使用mixin抽离出来

  const EVENT_SHOW = ‘show’

  const EVENT_HIDE = ‘hide’

  export default {

  data() {

  return {

  visible: false

  }

  },

  methods: {

  show() {

  this.visible = true

  this.$emit(EVENT_SHOW)

  },

  hide() {

  this.visible = false

  this.$emit(EVENT_HIDE)

  }

  }

  }

  （7）过渡动画显示浮层

  在head-tail中使用transition，定义name=”fade”,然后写动画

  &.fade-enter-active, &.fade-leave-active

  transition: all 0.5s

  &.fade-enter, &.fade-leave-active

  opacity: 0

  background: $color-background

  三、星级评分组件

  ============

  1. 概括

  ---

  显示是由三组图片组成（全星，半星，空），使用props接收size和score两个参数。计算属性依赖size实现三种大小的样式展现，通过计算score在数组中放入响应的星星状态，使用v-for遍历数组显示评分。

  2. 实现

  ---

  效果：使用图片素材 全星（on） 半星（half） 空（off） 拼接评分效果

  （1）组件传值

  使用span绑定starType；v-for遍历itemClasses数组，使用计算属性显示。

  Props接收两个参数：size大小（有三种类型24 36 48）score分数

  props: {

  size: {

  type: Number

  },

  score: {

  type: Number

  }

  },

  （2）数组实现评分

  定义常量length ,cls_on, cls_half, cls_off分别记录评星长度，和星级

  定义result数组，通过props中的score拿到分数，计算四舍五入之后的评分，得到hasDecimal是否有半星，integer有多少个全星。

  做循环，将全星cls_on放入数组result,如果有半星就放入半星。再循环补上空星。

  itemClasses() {

  const result = []

  const score = Math.floor(this.score * 2) / 2

  const hasDecimal = score % 1 !== 0

  const integer = Math.floor(score)

  for (let i = 0; i < integer; i++) {

  result.push(CLS_ON)

  }

  if (hasDecimal) {

  result.push(CLS_HALF)

  }

  while (result.length < LENGTH) {

  result.push(CLS_OFF)

  }

  return result

  }

  }

  （3）动态添加样式

  使用computed计算属性计算starType（）需要依赖size, 返回‘star’ + this.size，因此可以添加不同的样式star-24 star-36 star-48

  .star

  display: flex

  align-items: center

  justify-content: center

  .star-item

  background-repeat: no-repeat

  &.star-48

  .star-item

  width: 20px

  height: 20px

  margin-right: 22px

  background-size: 20px 20px

  &:last-child

  margin-right: 0

  &.on

  bg-image(‘star48_on’)

  &.half

  bg-image(‘star48_half’)

  &.off

  bg-image(‘star48_off’)

  &.star-36

  .star-item

  width: 15px

  height: 15px

  margin-right: 6px

  background-size: 15px 15px

  &:last-child

  margin-right: 0

  &.on

  bg-image(‘star36_on’)

  &.half

  bg-image(‘star36_half’)

  &.off

  bg-image(‘star36_off’)

  &.star-24

  .star-item

  width: 10px

  height: 10px

  margin-right: 3px

  background-size: 10px 10px

  &:last-child

  margin-right: 0

  &.on

  bg-image(‘star24_on’)

  &.half

  bg-image(‘star24_half’)

  &.off

  bg-image(‘star24_off’)

  （4）组件的使用

  引入组件并注册，即可使用。并且组件接收两个参数score type

  四、tab组件

  ===========

  数据结构与算法

  这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

  • 二叉树层序遍历
  • B 树的特性，B 树和 B+树的区别
  • 尾递归
  • 如何写一个大数阶乘？递归的方法会出现什么问题？
  • 把多维数组变成一维数组的方法
  • 知道的排序算法 说一下冒泡快排的原理
  • Heap 排序方法的原理？复杂度？
  • 几种常见的排序算法，手写
  • 数组的去重，尽可能写出多个方法
  • 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
  • 知道数据结构里面的常见的数据结构
  • 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
  • 合并两个有序数组
  • 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

  

  half’)

  &.off

  bg-image(‘star24_off’)

  （4）组件的使用

  引入组件并注册，即可使用。并且组件接收两个参数score type

  四、tab组件

  ===========

  数据结构与算法

  这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

  • 二叉树层序遍历
  • B 树的特性，B 树和 B+树的区别
  • 尾递归
  • 如何写一个大数阶乘？递归的方法会出现什么问题？
  • 把多维数组变成一维数组的方法
  • 知道的排序算法 说一下冒泡快排的原理
  • Heap 排序方法的原理？复杂度？
  • 几种常见的排序算法，手写
  • 数组的去重，尽可能写出多个方法
  • 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
  • 知道数据结构里面的常见的数据结构
  • 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
  • 合并两个有序数组
  • 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

  [外链图片转存中…(img-kXAs4OeB-1715471404905)]