头条一面

　　大厂就是不一样，面一次打击一次，感觉可以买票回家过年了……

　　目前情况是过了两轮，还剩最后一轮技术面，总结一下面试题和自己的解答。

　　一面记不太清了，只记得几个。

　　首先是懒加载原理，写伪代码。

　　这里贴一个自己练习时候写的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;
}

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

猜你喜欢