web前端_腾讯校招一面

自我介绍

项目相关（根据简历提问）

首页白屏卡屏过久，详细说一下你的解决方式

和后端（Java）同学商量之后，决定分页加载数据
路由懒加载
数据冻结object.freeze

详细说一下`Axios`封装的原因、封装方式及结果

原因：在封装之前，网络请求分散在每个组件内部，耦合过高，开发的时候经常要进行重复操作（例如token获取），日后难以维护
封装方式：新建一个Axios对象，设置请求基路径、最大请求时延，在请求前，统一获取token，请求后，对请求错误统一处理，将所有的网络请求都放在api文件夹下，设置统一出口
结果：网络请求时不用再进行错误处理，大幅减少代码量，开发速度加快，日后维护也更加方便

CSS

三列布局（多种方式）

基础设置

<!-- DOM结构 -->
<body><div class="parent"><div class="one"></div><div class="two"></div><div class="three"></div></div>
</body><!-- 基础设置（颜色是为了看到效果） -->
<style>* {padding: 0;margin: 0;box-sizing: border-box;}.parent {width: 100vw;height: 100vh;}.one {background-color: tomato;}.three {background-color: yellowgreen;}.two {background-color: yellow;}.one,.two,.three {height: 100%;}
</style>

方式一：flex

<style>.parent {display: flex;}.one,.three {width: 100px;}.two {flex: 1;background-color: yellow;}
</style>

方式二：calc

<style>.parent {font-size: 0; /* 这里必须把父元素的font-size设为0，不然会解析换行，产生间隙 */}.one,.two,.three {display: inline-block;}.one,.three {width: 100px;}.two {width: calc(100% - 200px);}
</style>

方式三：绝对定位

<style>.parent {position: relative;}.one,.two,.three {position: absolute;}.one,.three {width: 100px;}.one {left: 0;}.three {right: 0;}.two {left: 100px;right: 100px;}
</style>

方式四：float

<style>/* 浮动布局有点特殊，需要将中间自适应块放到后面 */.parent {min-width: 300px;}.one,.two {width: 100px;}.one {float: left;}.two {float: right;}.three {background-color: turquoise;margin: 0 100px;}
</style>

等分布局，边列靠近两边

不定列数，解法类上

JS

原型链

- https://zhuanlan.zhihu.com/p/23090041?refer=study-fe
- https://blog.csdn.net/weixin_44887192/article/details/109115181

`typeof`与`instanceof`原理

typeof对于原始类型，除了null都可以显示正确的类型

typeof对于引用类型，除了函数都会显示object

instanceof可以判断一个引用是否属于某构造函数，还可以在继承关系中用来判断一个实例是否属于它的父类型

instanceof的判断逻辑是：从当前引用的proto一层一层顺着原型链往上找，能否找到对应的prototype，找到了就返回true

`JS`继承方式

《JavaScript高级程序设计第4版》8.3节

原型链
盗用构造函数
组合继承
原型式继承
寄生式继承
寄生式组合继承

排序算法有几种

我只说了这几种

冒泡排序
选择排序
插入排序
希尔排序
归并排序
快速排序
堆排序

手写`Array.sort()`（冒泡排序、快速排序）

数组长度小于10，用的排序方式好像有点争议，我这里用的冒泡

function bubbleSort(sortType) {let data = this;for (let i = 0, l = data.length; i < l; i++) {for (let j = i; j < l - 1; j++) {if (sortType(data[j], data[j + 1])) {let temp = data[j];data[j] = data[j + 1];data[j] = temp;}}}
}function quickSort(sortType, data = this) {if (data.length <= 1) return data;let flagIndex = Math.floor(data.length / 2);let flag = data.slice(flagIndex, 1);let left = [];let right = [];for (let i = 0, l = data.length; i < l; i += 1) {if (sortType(data[i], flag)) {if (data[i] < flag) left.push(data[i]);else right.push(data[i]);} else {if (data[i] < flag) right.push(data[i]);else left.push(data[i]);}}return [...quick(sortType, left), ...flag, ...quick(sortType, right)];
}Array.sort = function (sortType = (a, b) => a - b) {let data = this;if (data.length <= 10) {bubbleSort.call(this, sortType);} else {quickSort.call(this, sortType);}
};

web前端_腾讯校招一面相关推荐

开发web前端_移动前端开发和web前端开发的区别？
如果说非要有区别的话应该就是开发的软件和方式不同,因为他们本来就不属于一端的东西,具体来看看下面: web前端开发用最简单粗暴的方式来讲,就是用html + css + javascript来构建一 ...
从零学web前端_从零到前端英雄（第2部分）
从零学web前端 This article is part two of the "From Zero to Front-end Hero" series. In part one ...
从零学web前端_从零到前端英雄（第1部分）
从零学web前端 I remember when I first started learning front-end development. I encountered so many artic ...
Web前端_项目实践01_萌娃摄影网页（纯HTML+CSS静态页面）
众所周知,学前端只看不写等于"我没学过",但是我们初学者常常因为找不到合适的网页素材而苦恼.有的太复杂,很多知识没学过:有的太粗糙,没有做的兴趣.正巧,我这儿有份儿合适的,纯HTM ...
Web前端_邮箱的正则表达式
最正宗的邮箱正则表达式 ^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$ js中代码: <script typ ...
Web前端_项目实践02_ins北欧风多肉植本店主网页（纯HTML+CSS静态页面）
众所周知,学前端只看不写等于"我没学过",正巧,我这儿有份儿合适的练手素材,纯HTML+CSS实现,够简单,页面比某些书本上的陈旧素材好看,有兴趣的话,一起来尝试吧. 先上完整效果 ...
Web前端_配合swiper滑动插件实现同比例双指缩放图片
参考过的一篇文章:https://blog.csdn.net/gl0ry/article/details/56055414 html实例代码: 缩放的图片需要放在class 为list 的div里面 ...
Web前端_如何清除微信内置浏览器的缓存
Android 清除微信内置浏览器缓存: 先点击这个链接升级下浏览器的内核: debugmm.qq.com/?forcex5=true 在点击这个链接 : http://debugtbs.qq.co ...
前端传中文文件名_前端工程师需要掌握哪些知识，web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测字符串是否符合 &q ...

web前端_腾讯校招一面

自我介绍

项目相关（根据简历提问）

首页白屏卡屏过久，详细说一下你的解决方式

详细说一下`Axios`封装的原因、封装方式及结果

CSS

三列布局（多种方式）

等分布局，边列靠近两边

JS

原型链

`typeof`与`instanceof`原理

`JS`继承方式

排序算法有几种

手写`Array.sort()`（冒泡排序、快速排序）

web前端_腾讯校招一面相关推荐

最新文章

热门文章

web前端_腾讯校招一面

自我介绍

项目相关（根据简历提问）

首页白屏卡屏过久，详细说一下你的解决方式

详细说一下Axios封装的原因、封装方式及结果

CSS

三列布局（多种方式）

等分布局，边列靠近两边

JS

原型链

typeof与instanceof原理

JS继承方式

排序算法有几种

手写Array.sort()（冒泡排序、快速排序）

web前端_腾讯校招一面相关推荐

最新文章

热门文章

详细说一下`Axios`封装的原因、封装方式及结果

`typeof`与`instanceof`原理

`JS`继承方式

手写`Array.sort()`（冒泡排序、快速排序）