頭條一面

　　大廠就是不同，面一次打擊一次，感受能夠買票回家過年了……

　　目前狀況是過了兩輪，還剩最後一輪技術面，總結一下面試題和本身的解答。

　　一面記不太清了，只記得幾個。

 

　　首先是懶加載原理，寫僞代碼。

　　這裏貼一個本身練習時候寫的vue相似懶加載的指令：

const lazyLoad = (() => { const tro = (fn, delay = 300) => { let flag = false; setInterval(() => { flag = true; }, delay); let wrapper_fn = () => { if(flag) { flag = false; fn(); } } return wrapper_fn; }; const key = Symbol(); let pending = Symbol(); const config = { opacity: 'translate(0, 0)', left: 'translate(-100px, 0)', right: 'translate(100px, 0)', top: 'translate(0, -100px)', bottom: 'translate(0, 100px)', }; return { directives: { lazy: { inserted(el, binding){ let type = binding.arg || 'opacity'; el.style.opacity = 0; el.style.transition = 'all 1s'; el.style.transform = config[binding.arg]; let top = el.offsetTop - el.clientHeight * 1.5; this[key].push({top, el, type}); }, }, }, created() { window[key] = []; window[pending] = false; onscroll = tro(() => { let cur = window.scrollY; if(window[pending]) return; window[pending] = true; window[key].forEach((v, i) => { v.el.style.opacity = v.top > cur ? 0 : 1; v.el.style.transform = v.top > cur ? config[v.type] : config.opacity; }); window[pending] = false; }, 500); }, } })();

　　使用方法，在須要的組件直接用mixin混入，而後在dom上掛v-lazy就好了。

　　這裏主要的點以下：

一、根據綁定dom的高度註冊事件

二、監聽onscroll，而後判斷是否有dom須要處理

　　優化點就是節流函數了，當時傻傻的分不清防抖和節流，被鄙視了……

 

　　接下來問了promise的原理，而後出了一道題：

const log = (s) => { console.log(s); }; log(1); new Promise((resolve) => { resolve(2) }).then(v => { log(v); }); async function fn1() { log(3); } async function fn2() { log(4); await fn1(); log(5); } fn2();

　　能夠本身思考下，我反正頭都大了(14325)。

　　問了下promise原理，沒答出來。

 

　　問了下數組扁平化，這個很簡單，可是本身寫的很臭，反正答案應該是這樣：

let result = []; function fla(ar) { ar.forEach(v => { if(Array.isArray(v)) fla(v); else result.push(v); }); return result; }

　　最後問了一個node的eventEmitter實現原理，恰好看過源碼，直接給寫出來了。。。感受這是會心一擊，讓我挺進了二面。固然，實現並不完美，面試官問我觸發的事件裏面有解綁事件邏輯怎麼辦，我說加一個flag。錯掉了，面試官讓我回去再看看，我才發現每次觸發，都會將當前事件數組拷貝一份，就算解綁也不影響當前觸發的。

　　剩下的就是一些XSS、跨域、垂直居中等等，距離比較久，也記不很清。