2 年前端,如何跟抖音面试官 battle，前端者升职加薪的8项技能

最新推荐文章于 2024-07-08 12:24:36 发布

蓉城垡

最新推荐文章于 2024-07-08 12:24:36 发布

阅读量912

点赞数 12

分类专栏： 2024年程序员学习文章标签：前端

本文链接：https://blog.csdn.net/2301_77033340/article/details/137087806

版权

2024年程序员学习专栏收录该内容

296 篇文章 0 订阅

订阅专栏

https://juejin.cn/post/6961675763070271519

自我介绍

首先上来就是唠,介绍个人信息,亮点以及项目经历之后,面试的自我介绍阶段就结束了。

ps :这里通过自己的话术成功将面试官的注意力吸引到项目优化方向,经过2分钟的自我介绍,面试官也应该读完的简历了,算是达到自己目标的预期了。

简历相关

问：你印象最深的项目是哪个?难点是什么?是怎么解决的?

ps :这里答的中规中矩,因为自我介绍时,已经引导完面试官了,所以~ 嘿嘿嘿~小面试官,看我碰不碰你就完了,让你傲娇。

WebPack

问：Loader和Plugin的区别?

Loader直译为"加载器"。Webpack将⼀切⽂件视为模块，但是Webpack原⽣是只能解析JavaScript⽂件，如果想将其他⽂件也打包的话，就会⽤到Loader。所以Loader的作⽤是让Webpack拥有了加载和解析非JavaScript文件的能力;

Plugin直译为"插件"。Plugin可以扩展Webpack的功能,让Webpack具有灵活性。在Webpack运⾏的⽣命周期中会⼴播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。

ps :之后这里有跟随着这道题又结合项目说了大概有10分钟,面试开头还算不错的。

问 : WebPack中bundle,chunk,module的作用是什么?

bundle 是由Webpack打包出来的文件;

chunk 代码块,一个chunk由多个模块组合⽽成，⽤于代码的合并和分割;

module 是开发中的单个模块，在Webpack中⼀个模块对应⼀个⽂件，Webpack会从配置的entry中递归开始找出所有依赖的模块。

PS :没答上来,面试官三个单词一起说的,我没听懂,以为是自己不了解,怕说了再扣分,我的心态发生了一丝微妙的变化。面试结束后,我问了面试官,才知道这道题问的是这三个点。

问 : Less转换Css过程

答 :less模块通过Webpack中Less-Loader将LESS文件转义成Css文件

Less转换Css官方原理链接[1]

ps :我说完我脑子都空了,这道题我把命送没了,基本到这将近17分钟了。该下一阶段了。

Webpack总结: 这里Webpack相关还是有所准备的,只是非常不充分,因为Webpack相关说了大概17分钟左右,所以当时感觉还可以,文字描述反而显得单方面找虐了

手写题

实现 isInViewport(dom) 函数，用于判断 DOM 元素是否位于 viewport 内

function isInViewport(dom){

let viewPortHeight = window.innerHeight || document.documentElement.clientHeight

let viewPortWidth = window.innerWidth || document.documentElement.clientWidth

let {

top,left,right,bottom

} = dom.getBoundingClientRect()

return (

top >= 0 &&

left >= 0 &&

bottom <= viewPortHeight &&

right <= viewPortWidth

);

//这里还没写完面试官就让我停下了,哼~ 高手之间意念都是相同的。

}

ps :这里第一次写其实不是这个写法,第一次写没有考虑到宽度,经过面试官提醒我才优化成这样的。

getBoundingClientRect()的作用

用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

手写总结: 就这?嗯?就这? 简单的引导,就让面试官就问出我想让他问的东西了,不愧是我。

ES6模块和CommonJS

COMMONJS和ES6模块区别

CommonJS是对模块的浅拷⻉，ES6 Module是对模块的引⽤，即ES6 Module只存只读，不能改变其值，也就是指针指向不能变，类似const；

import的接⼝是read-only（只读状态），不能修改其变量值。即不能修改其变量的指针指向，但可以改变变量内部指针指向，可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错。

ps :这里我回答的支支吾吾的,因为我不会啊,当时美团面试考过这道题,又来了。

说一下会输出什么? 讲解题

// a.js

var a = 1;

setTimeout(() => {

a = 2;

}, 2)

module.exports.a = a;

// main.js

const a = require(‘./a’).a;

console.log(a);

setTimeout(() => {

const b = require(‘./a’).a;

console.log(b);

}, 100);

答:1,2 说了一大堆支支吾吾肯定错了,气势上就输了。真实答案如图所示

ps :图中是真实答案,原理说对了,但是自己根本没理解,根据曾经的弹坑理论[2],我TM完全没预习这道题???,坑爹啊!!

弹坑理论

算法题

有一个混杂的整数序列，现在任务是对它们重新排序，以使其符合上述序列并输出结果

背景:

假设我们取一个数字 x 并执行以下任一操作：
a:将 x 除以 3 (如果可以被 3 除)
b:将 x 乘以 2

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

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

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

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

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V：vip1024c 备注前端获取（资料价值较高，非无偿）

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

html5

ipt这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

html5