From d840efb8d50d4dbeb3a3a3bb9c62884a6c209ecc Mon Sep 17 00:00:00 2001 From: "hongbin.li" Date: Fri, 21 May 2021 15:39:49 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=98=BF=E5=BD=AC=E7=9A=84=E5=AD=97?= =?UTF-8?q?=E8=8A=82=E6=95=99=E8=82=B2=E4=B8=80=E9=9D=A2=E9=9D=A2=E7=BB=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\344\270\200\351\235\242.md" | 135 ++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 "hbli/bd-\346\225\231\350\202\262/\344\270\200\351\235\242.md" diff --git "a/hbli/bd-\346\225\231\350\202\262/\344\270\200\351\235\242.md" "b/hbli/bd-\346\225\231\350\202\262/\344\270\200\351\235\242.md" new file mode 100644 index 0000000..0e237b2 --- /dev/null +++ "b/hbli/bd-\346\225\231\350\202\262/\344\270\200\351\235\242.md" @@ -0,0 +1,135 @@ +# 前端开发（高级）工程师-教育业务 +## 一面 +- 自我介绍 +- 介绍一下最近做过的项目 + - 扯了扯预警框架, 被追问有没有技术上特别的难点 + - 没有 +- 怎么codereview +- HTML如何解析渲染成DOM节点, + - HTML解析过程中遇到link css会下载吗, 遇到js文件会下载吗, 如果js下载完了会执行吗 (扯了扯defer async执行时机) +- 文件加载完成后, onDomContentLoaded和onLoad有什么区别呢? + - GG不会 +- 讲一下浏览器的事件循环-eventloop +- 深拷贝有什么方式 + - JSON + - lodash _.cloneDeep DFS BFS地实现 + - 循环引用肿么办 (GG, 忘记看了) +- 实现动画的方式有哪几种方式 + - 答了 transition, animation + keyframes, 忘记说js的了, 比如在raf回调里什么的. + - 说完让写了个CSS: hover button上让尺寸变大用了transfrom scale() +- 什么是闭包, N种方式改写下面的让输出 0 1 2 3 4, 顺便考察了下对作用域链, this的考察. + ```javascript + // 原始的样子, 输出是什么? 改写成输出01234, let, 闭包, settimeout的第三个参数, + // 被问懵了一个问题: 为什么改成let就好了, 答了有块级作用域 + for (var i = 0; i < 5; i++) { + setTimeout(function(i) { + console.log(i); // this ? + }, 1000 * i); + } + + // 这样行不行, 主要考察作用域链 + for (var i = 0; i < 5; i++) { + setTimeout(function(i) { + console.log(i); // this ? + }, 1000 * i, i); + } + + // 以及这样行不行, 主要考察作用域链 + for (var i = 0; i < 5; i++) { + (function(i) { + setTimeout(function() { + console.log(i); // this ? + }, 1000 * i); + })(i) + } + + // 下面这样输出什么 + for (var i = 0; i < 5; i++) { + setTimeout((function(i) { + console.log(i); // this ? + })(i), 1000 * i); + } + ``` +- 场景应用 + - 实现一个失败重试 + ```javascript + function request(url, method) {} // 返回Promise, 成功的时候可以调用then获得数据, 失败的时候调用catch获得reason + request('http://api', 'get') + .then(data => { }) + .catch(err => { }) + + function requestRetry(url, method, num) { + //TODO + } + ``` + 我写了个答案(仅供参考, 未验证正确性): + ``` javascript + function requestRetry(url, method, num) { + return request(url, method).then((data)=>{ + return data; + }, (reason) =>{ + if(num > 0) { + return requestRetry(url, method, num - 1) + } else { + throw reason; + } + }) + } + // 这里留坑了, 被追问 then是否多余? 直接.catch.then行不行回答错误, 应该是会传递结果的, 其实这样就可以: + function requestRetry(url, method, num) { + return request(url, method).catch( (reason) =>{ + if(num > 0) { + return requestRetry(url, method, num - 1) + } else { + throw reason; // 这里一开始写了return, 这样不能被catch, 在提醒下改成了throw; + } + }) + } + ``` + +- 算法题 + ```javascript + // 判断A、B数组的包含关系（值和数量），A属于B返回1，B属于A返回2，两者相等返回0，其他返回-1 + function arrayInclude (arrA, arrB) { + + } + + var a1 = [4,2,3,1,4] + var a2 = [4,2,3,1,4,5] + console.log(arrayInclude(a1, a2)) // 1 + + var a3 = [4,2,3,1,4] + var a4 = [4,2,3,1] + console.log(arrayInclude(a3, a4)) // 2 + + var a5 = [4,2,3,1,4] + var a6 = [4,2,3,1,4] + console.log(arrayInclude(a5, a6)) // 0 + + var a7 = [4,2,3,1,4] + var a8 = [3,2,3,1,4] + console.log(arrayInclude(a7, a8)) // -1 + ``` + 我的答案: + > ps: 一开始写了三段, 长度相同/长度不同的情况, 最后在面试官连续优化需求下改成这样, 主要是删掉冗余逻辑, 建议搜搜leetcode最优解, 这么写也够用感觉. + ``` javascript + function arrayInclude (arrA, arrB) { + arrA.sort((a,b) => a-b); + arrB.sort((a,b) => a-b); + let i = 0; + const isSame = arrA.length === arrB.length; + let len = Math.min(arrA.length, arrB.length) + while(i < len) { + if(arrA[i] !== arrB[i]) { + return -1 + } + i++; + } + return isSame ? 0:len === arrA.length ? 1 : 2; + } + ``` +- 喜闻乐见的还有什么问题 + - 问了下前面那个Promise.catch的答案 - 确实会透传结果 + - 教育业务主要做什么 + - 平时怎么接触并学习webpack等其他前端细分领域 + > 业务驱动, 发现问题并解决问题, 借此机会深入学习一下 \ No newline at end of file From 75829050545706c82631bd0405dbb0817d9a70fa Mon Sep 17 00:00:00 2001 From: "hongbin.li" Date: Fri, 21 May 2021 23:11:37 +0800 Subject: [PATCH 2/2] fix --- .../\344\270\200\351\235\242.md" | 34 ++++++++++++++++--- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git "a/hbli/bd-\346\225\231\350\202\262/\344\270\200\351\235\242.md" "b/hbli/bd-\346\225\231\350\202\262/\344\270\200\351\235\242.md" index 0e237b2..51655ea 100644 --- "a/hbli/bd-\346\225\231\350\202\262/\344\270\200\351\235\242.md" +++ "b/hbli/bd-\346\225\231\350\202\262/\344\270\200\351\235\242.md" @@ -5,15 +5,20 @@ - 扯了扯预警框架, 被追问有没有技术上特别的难点 - 没有 - 怎么codereview -- HTML如何解析渲染成DOM节点, +- webpack打包流程 +- loader和plugin的区别 +- 平时的项目是怎么个开发部署上线的 +- HTML如何解析渲染成DOM节点 - HTML解析过程中遇到link css会下载吗, 遇到js文件会下载吗, 如果js下载完了会执行吗 (扯了扯defer async执行时机) -- 文件加载完成后, onDomContentLoaded和onLoad有什么区别呢? +- 文件加载完成后, onDomContentLoaded和onLoad有什么区别呢? 感觉这两道题在考察性能监控/埋点相关. - GG不会 + > [参考](https://juejin.cn/post/6844903623583891469) - 讲一下浏览器的事件循环-eventloop - 深拷贝有什么方式 - JSON - lodash _.cloneDeep DFS BFS地实现 - - 循环引用肿么办 (GG, 忘记看了) + - 循环引用肿么办 (GG, 忘记看了, 盲猜map记一下) + > 深拷贝详情参考: [Advanced-Frontend/Daily-Interview-Question#10](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/10) - 实现动画的方式有哪几种方式 - 答了 transition, animation + keyframes, 忘记说js的了, 比如在raf回调里什么的. - 说完让写了个CSS: hover button上让尺寸变大用了transfrom scale() @@ -75,16 +80,37 @@ } }) } - // 这里留坑了, 被追问 then是否多余? 直接.catch.then行不行回答错误, 应该是会传递结果的, 其实这样就可以: + // 这里留坑了, 被追问第一个.then是否多余? 直接.catch.then行不行回答错误, 应该是会传递结果的, 其实这样就可以: + // A+的实现中, 当typeof resolveCallback !== function时, 默认为v => v; + // 相似的, resolveCallback !== func 时, 默认为 reason => throw reason; + // 另外 .catch(cb) <===> .then(null, cb) function requestRetry(url, method, num) { return request(url, method).catch( (reason) =>{ if(num > 0) { + console.log("重试", Date.now()) // for test return requestRetry(url, method, num - 1) } else { throw reason; // 这里一开始写了return, 这样不能被catch, 在提醒下改成了throw; } }) } + + // test, request每调三次正常 + var request = (function() { + let count = 0; + return function () { + count++; + return new Promise((resolve, reject) =>{ + if(count <= 3) { + setTimeout(() => reject("error", count), 1000) + } else { + count = 0; + setTimeout(() => resolve("ok", count), 1000) + } + }) + } + })() + requestRetry("", "", 3).then(v => console.log(v)).catch(e => console.log(e)) ``` - 算法题