2024年uniapp实现动态标记效果详细步骤【前端开发】(2)，阿里快手拼多多等7家大厂前端面试真题

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

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

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

✅每一个元素都不同，是为了实现唯一选中，这也是我们的基本需求。

✅有规律可循，是为了后面我们通过用户的点击事件，能够通过一些逻辑判断哪一个元素被点击。

此时回看第一步给出的代码块，发现原来这个span标签被赋值了一个动态类名数组：

<span @click = “addSpecialList(item.uid,index)” :class=“currentFontIconClass” >

---

3️⃣实现点击元素选中：

紧接上一步最后，我们已经把span标签进行了动态类名数组处理。接下来，介绍怎么完整实现点击选中：

首先，给父span标签的子标签span添加一个点击事件，至于为什么有一个子span标签，是因为子span标签是实际上是用来显示心形图标的标签。这个点击事件的对象毫无疑问就是心形图标，其中传参要特别注意把index作为参数传入，这是我们在点击事件函数中获取唯一元素的必要参数。(第一个参数是原项目的特殊参数，这里不需要care它，重点关注index参数)

接下来，我们对点击函数进行处理：

addSpecialList(e,f){

this.uid = e;

if(this.currentFontIconColorClass[f] == “un” + f.toString()){

uni.request({

url:‘https://xxxx’,

method:‘GET’,

data:{username : this.username, uid: this.uid},

header: {

‘content-type’: ‘application/x-www-form-urlencoded’ //表明后端接收的是（表单）字符串类型，例如’id=1231454&sex=男’

},

success: (res) => {

if(res.data.status == “200”){

uni.showToast({

title: “已添加特别关心”

})

}

}

})

this.currentFontIconColorClass[f] = “Specilized”;

this.$forceUpdate();

}

else{

uni.request({

url:‘https://xxxx’,

method:‘GET’,

data:{username: this.username,uid: this.uid},

header: {

‘content-type’: ‘application/x-www-form-urlencoded’

},

success: (res) => {

uni.showToast({

title: “已取消特别关心”,

})

// this.friendList = res.data

}

})

this.currentFontIconColorClass[f] = “un” + f.toString();

this.$forceUpdate();

}

}

上面的代码处理过程是这样的：

✅ 首先，用户点击了某个元素，触发了点击函数，同时该元素对应的索引index一并被传入，这时候，我们进行一个简单的字符串拼接，把"un"和这个索引值index拼接，并与我们最初的动态类名数组的对应位进行比较，实现了我们说的对象的点击选中。同时，它的新类名变成了一个统一的类名：Specilized，该类名的渲染效果就是红色的心💓

从这儿不难看出前面提到的要给动态类名数组元素设置有规律可循的值的意义所在。

✅ 接着，当用户取消某个元素的标记时，点击该元素，触发了点击函数，通过判断，发现它的原类名是Specilized，那就改回**"un"和这个索引值index拼接的字符串。**

【重点补充】：

这里一定要注意，修改动态类名之后，一定在修改后的下一行加上这行代码，否则你的修改无法实施反馈：

this.$forceUpdate()

---

4️⃣对已经标记的元素在加载时的处理：

上面三个步骤把第一个难点解决了，下面用简单的介绍解决第二个难点：

加载时，我们可以告知后端，让他们给我们在返回时用一个返回参数来区分一个元素是否已经被用户标记，例如这样的参数：

if(this.upperList[i].has_special_concerned == “TRUE”){

this.currentFontIconColorClass[i] = “Specilized”;

this.$forceUpdate()

}

如果这个参数是TRUE，那么我们就知道这个元素已经被标记，这时候我们只需要对它的类名进行修改，**统一改为“Specilized”**即可。

接下来，重复循环上一个操作，直到对获取的所有元素全部遍历一遍之后，方可结束。

---

5️⃣局限性：
首先声明，实现这项显示效果的方法肯定不止这一种，有很多比这个方法好的方法，同时，这个方法也存在着局限性：
💟 代码复杂性。很明显，上面的步骤可以看出代码会有些冗长，这是其一也。

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法