web前端_腾讯校招一面

最新推荐文章于 2021-09-01 21:08:28 发布

隔壁的猫先生

最新推荐文章于 2021-09-01 21:08:28 发布

阅读量184

点赞数 1

分类专栏：面试文章标签：面试 javascript css 腾讯

本文链接：https://blog.csdn.net/qq_43808685/article/details/115254409

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自我介绍

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

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

和后端（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);
  }
};

隔壁的猫先生

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端_腾讯校招一面

自我介绍项目相关（根据简历提问）首页白屏卡屏过久，详细说一下你的解决方式和后端（Java）同学商量之后，决定分页加载数据路由懒加载数据冻结object.freeze详细说一下Axios封装的原因、封装方式及结果原因：在封装之前，网络请求分散在每个组件内部，耦合过高，开发的时候经常要进行重复操作（例如token获取），日后难以维护封装方式：新建一个Axios对象，设置请求基路径、最大请求时延，在请求前，统一获取token，请求后，对请求错误统一处理，将所有的网络请求都放在api文件夹下，
复制链接

扫一扫