如何成为别人嘴里的高级前端工程师？(1)

let arr1 = [ a, b, c ]

let arr2 = [ 1, 2, 3 ]

/* 把 arr1 和 arr2 拼接到一起 */

普通程序员：

// 写法1：

let arr = arr1.concat( arr2 )

// 写法2 – 使用遍历

let arr = arr1

arr2.forEach( item => {

arr.push( item )

})

大神的代码：

let arr = arr1.push( …arr2 )

场景2：吸顶效果 – 网页中的某个元素，滚动到网页顶部时，固定在顶部。

---

普通程序员代码：

//添加滚动事件

window.addEventListener( ‘scroll’, this.handleScroll )

//获取元素距离顶部的距离

handleScroll () {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

var offsetTop = document.querySelector(‘#searchBar’).offsetTop

console.log( scrollTop )

//判断到达顶部的距离，等于0时，给元素添加固定定位，设置top的值

if ( scrollTop > offsetTop ) {

document.querySelector(‘#searchBar’).style.position=“fixed”

document.querySelector(‘#searchBar’).style.top=“0”

}else{

//当距离大于0时，修改position属性值

document.querySelector(‘#searchBar’).style.position=“relative”

}

}

大神的代码：

#searchBar{

position:sticky;

top:0

}

值得注意的是，position:sticky;是新增属性，好多低版本浏览器不支持。所以不建议在PC端使用，可以在手机端使用。

场景3：高度设置

---

普通程序员代码：

.box{

position:fixed;

top:0;

bottom:0;

left:0;

right:0

}

大神的代码：

.box{

height:100vh;

}

// vh -> viewport height

场景4：计算高度设置

---

普通程序员代码：

// 方法1：使用绝对定位

// 方法2：使用 js 动态获取可视区高度，然后减去上边高度，动态设置content元素的高度

大神的代码：

.content{

height: calc( 100%-40px )

}

使用 calc() 函数动态计算高度。

场景5：给根组件添加事件

---

普通程序员代码：

// 父组件代码

<child @btnclick=“btnClick” />

//子组件代码

子组件内容

大神的代码：

// 父组件代码

<child @click.nactive=“btnClick” />

场景6：js的防抖

---

普通程序员代码：

<input @change=“search” v-model=“val” />

export default{

data(){

return{

val:‘’

}

},

methods:{

search(){

//网络请求查询相关数据

//只要input的值 val 改变，就会发送网络请求

}

}

}

大神的代码：

// 如果input输入框的值改变比较频繁的时候，就会不断的向服务器发送网络请求，

// 这样就会非常损耗性能，所以需要在一定时间内，多次频繁改变值的时候，只发一次网络请求

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。

零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

[外链图片转存中…(img-MG2IKQZE-1713766310919)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-6Oya0vie-1713766310919)]

最后

给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里免费领取，先到先得哦。

[外链图片转存中…(img-G1XxlhZG-1713766310919)]
[外链图片转存中…(img-MEQ3suSG-1713766310920)]