3月11日阿里钉钉一面

3.8投的阿里钉钉，3.10约面，3.11一面

自我介绍

面试官您好！我叫张泰豪，目前南京大学软件学院软件工程专业的一名大三学生。我十分喜爱计算机相关技术，自学能力强，前后端开发、2D游戏开发等技术均有涉猎，目前主要的意向就业方向是web前端开发。我沟通能力强、组织能力强，有良好的学生工作经历，曾今是我们书院的团委副书记。我的开发经历也比较丰富，在前端岗位上的实习时间也比较长，对于开发的流程十分熟悉，也有一定的项目经验。我最主要的项目经历是我在南京南小宝信息科技有限公司实习时在推进的WeCrush应用，我在其中负责C端的前端开发的工作，目前主要做过的业务有广场抽卡、划卡业务、个人卡片、笔记卡片等。也编写了Slider、CheckBox、PopUp等基础组件。项目C端主要使用React + TypeScript、使用SWR和自封装的hooks管理请求数据流，我也使用过react-spring和@use-gesture编写了Slider和划卡页的交互。我在项目中还使用了Sass预处理器编写样式，并使用mockjs模拟数据，使用storybook进行组件的调试和建设组件库。
对我们的项目很感兴趣，先问是不是在外部的企业。然后得知是校内的创业团队。
介绍里面我有提到我们有一定的基础，然后面试官很好奇，问了我们的IP基础是怎么建立起来的。
问了我们的项目怎么商业化。

然后开始八股
- 先问我又没有接触过react之外的框架，我说没有，然后问了react框架的特点和优势
- 有一点虚拟dom没说出来，让解释一下虚拟dom的好处
- 浏览器的渲染方式
  - 怎么优化？答了用开发者工具看网络加载、控制台报错信息、性能等；然后埋点收集首屏加载时间、首屏可操作加载时间等数据，针对性的做静态资源加载或者代码逻辑的优化
  - 问埋点怎么实现？答了在用户端配置一个代理，然后条件请求数据，监控请求信息并上报
  - TCP三次握手（忘了)
  - OO的特点（说出来两个）
设计题
- 设计一个移动端的横向轮播图
  - 主要从组件编写、逻辑控制、样式三个角度来回答了
  - 图片资源的懒加载
  - 用一个state管理当前展示图片，使用useEffect定时自动更改，更改时注意数组索引要+1取余数组长度
  - 然后监听用户手势切换
  - 动画的使用css原生的transition，动态切换图片索引
代码题

/*
输入：
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
  name: '姓名',
  age: 18,
}
render(template, data);
输出：我是姓名，年龄18，性别undefined
*/

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
  name: '姓名',
  age: 18,
  sex: '男'
}

const render = (template, data) => {
  let res = '';
  let lastIndex = 0;
  for (let i = 0; i < template.length; ++i) {
    if (template.charAt(i - 1) === '{' && template.charAt(i) === '{') {
      const startIndex = i + 1;
      let endIndex = startIndex;
      for (let j = startIndex; j < template.length; ++j) {
        if (template.charAt(j - 1) === '}' && template.charAt(j) === '}') {
          endIndex = j;
          break;
        }
      }
      const valName = template.substring(startIndex, endIndex - 1)
      res = res + template.substring(lastIndex, startIndex - 2)

      let hasKey = false
      for (let dataKey in data) {
        if (dataKey === valName) {
          res = res + data[dataKey].toString();
          hasKey = true;
          break;
        }
      }
      if (!hasKey) {
        res = res + 'undefined';
      }
      i = endIndex;
      lastIndex = endIndex + 1;
    }
  }
  console.log(res);
}

render(template, data)

3月11日 阿里钉钉一面

3月11日阿里钉钉一面