其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
view标签部分
<template>
<view>
<map id="map1"
:longitude="longitude"
:latitude="latitude"
:markers="markers"
:scale="scale"
:polyline="polyline"
:style="{height: height,width:width}"
></map>
</view>
</template>
js部分
<script>
export default {
props: {
height: {
type: String,
default: '100vh'
},
width: {
type: String,
default: '100%'
},
points: {
type: Array,
default() {
return []
}
},
},
data() {
return {
maxSpeed: null, // 最快速度的点
scale: 3, // 地图缩放比例
markers: [], // 标记点集合
polyline: [{
points: [],
},], // 坐标点集合
latitude: 39.806466,
longitude: 98.226473,
centerPoint: {
latitude: 0,
longitude: 0
}, // 中间点
}
},
watch: {
points(e) {
let that = this;
if (that.points.length > 0) {
that.setDateByPoints(that.points);
}
},
},
created: function () {
let that = this;
if (that.points.length > 0) {
that.setDateByPoints(that.points);
}
},
methods: {
// 根据速度计算路线颜色
computePointsSpeed(points) {
let lineColor = '#ffd500'
let list = []
if (!points || !points.length) {
return list
}
let lastArr = []
let lastSpeed = 0
for (let i = 0; i < points.length; i++) {
let speed = this.covertSpeed(points[i].speed)
if (!this.maxSpeed) {
this.maxSpeed = points[i]
} else {
if (points[i].speed > this.maxSpeed.speed) {
this.maxSpeed = points[i]
}
}
if (i === points.length - 1 || !speed) {
// 还剩最后一个不计入
continue
}
let nextPoint = points[i + 1]
let nextSpeed = this.covertSpeed(points[i + 1].speed)
if (!nextSpeed) {
continue
}
lastSpeed = speed
if (!lastArr.length) {
lastArr.push(points[i], nextPoint)
} else {
lastArr.push(nextPoint)
}
if (speed <= 20) {
lineColor = '#ffd500'
if (nextSpeed > 20) {
// 清空
list.push({
points: lastArr,
color: lineColor,
arrowLine: true, //带箭头的线
width: 8,
})
lastArr = []
}
}
if (speed > 20 && speed <= 40) {
lineColor = '#ff8800'
if (nextSpeed <= 20 || nextSpeed > 40) {
// 清空
list.push({
points: lastArr,
color: lineColor,
arrowLine: true, //带箭头的线
width: 8,
})
lastArr = []
}
}
if (speed > 40 && speed <= 60) {
lineColor = '#ff5d00'
if (nextSpeed <= 40 || nextSpeed > 60) {
// 清空
list.push({
points: lastArr,
color: lineColor,
arrowLine: true, //带箭头的线
width: 8,
})
lastArr = []
}
}
if (speed > 60 && speed <= 80) {
lineColor = '#ff4d00'
if (nextSpeed <= 60 || nextSpeed > 80) {
// 清空
list.push({
points: lastArr,
color: lineColor,
arrowLine: true, //带箭头的线
width: 8,
})
lastArr = []
}
}
if (speed > 80 && speed <= 100) {
lineColor = '#ff3d00'
if (nextSpeed <= 80 || nextSpeed > 100) {
// 清空
list.push({
points: lastArr,
color: lineColor,
arrowLine: true, //带箭头的线
width: 8,
})
lastArr = []
}
}
if (speed > 100 && speed <= 120) {
lineColor = '#ff2d00'
if (nextSpeed <= 100 || nextSpeed > 120) {
// 清空
list.push({
points: lastArr,
color: lineColor,
arrowLine: true, //带箭头的线
width: 8,
})
lastArr = []
}
}
if (speed > 120) {
lineColor = '#ff1d00'
if (nextSpeed <= 120) {
// 清空
list.push({
points: lastArr,
color: lineColor,
arrowLine: true, //带箭头的线
width: 8,
})
lastArr = []
}
}
}
this.centerPoint = points[Math.round(points.length / 2)]
console.log("centerPoint", this.centerPoint)
if (!list.length && lastArr.length) {
list.push({
points: lastArr,
color: lineColor,
arrowLine: true, //带箭头的线
width: 8,
})
}
return list
},
// 设置路线和点
setDateByPoints(points) {
let that = this;
let color = "#ffd500"
// 标记点集合
that.polyline = this.computePointsSpeed(points)
if (!that.polyline.length) {
that.polyline = [{
points: points,
color: color,
arrowLine: true, //带箭头的线
width: 8,
}]
}
if (that.maxSpeed) {
that.maxSpeed.iconPath = '../../static/icon/map/flash.png'
that.maxSpeed.width = 24
that.maxSpeed.height = 24
that.maxSpeed.id = 2
that.maxSpeed.callout = {
color: '#5d5d5d',
fontSize: 14,
borderRadius: 6,
padding: 8,
bgColor: '#fff',
content: `极速 ${this.covertSpeed(this.maxSpeed.speed)} km/h`
}
that.markers.push(this.maxSpeed)
}
let start = points[0]
let end = points[points.length - 1]
start.id = 1
start.width = 35
start.height = 35
start.iconPath = '../../static/icon/map/start.png'
end.id = 3
end.width = 35
end.height = 35
end.iconPath = '../../static/icon/map/end.png'
that.markers.push(start, end);
this.setCenterPoint(start, end)
},
// 地图中心点 （计算3个点的中心点）
setCenterPoint(start, end) {
this.longitude = (start.longitude + this.centerPoint.longitude + end.longitude) / 3
this.latitude = (start.latitude + this.centerPoint.latitude + end.latitude) / 3
let distance1 = this.getDistance(start.latitude, start.longitude, this.centerPoint.latitude, this.centerPoint.longitude)
let distance2 = this.getDistance(this.centerPoint.latitude, this.centerPoint.longitude, end.latitude, end.longitude)
const distance = Number(distance1) + Number(distance2)
console.log('计算两点之间的距离', distance1, distance2, distance)
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。
也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
### 面试准备
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。
