頭條一面

　　大廠就是不一樣，面一次打擊一次，感覺可以買票回家過年了……

　　目前情況是過了兩輪，還剩最后一輪技術面，總結一下面試題和自己的解答。

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

 

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

　　這里貼一個自己練習時候寫的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就行了。

　　這里主要的點如下：

1、根據綁定dom的高度注冊事件

2、監聽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、跨域、垂直居中等等，距離比較久，也記不很清。