2024-8-26 美团一面 流转

2024-8-26 美团一面 流转

隔了一天写的,可能有些忘了
流转到其他部门了

问题

  • 自我介绍
    • 提到了 iframe 和微前端,展开说说 iframe 的问题、微前端沙箱、如何解决卡顿
    • jsb 展开,怎么实现,如何处理版本降级
  • 进程和线程
  • tcp 三次握手
  • 了解哪些设计模式
  • vue 组件通信
  • 浏览器存储
  • 事件循环输出题目
setTimeout(function () {
console.log(1)
}, 1000)
new Promise(function executor(resolve) {
console.log(2)
for (var i = 0; i < 10000; i++) {
i == 9999 && resolve()
}
console.log(3)
}).then(function () {
console.log(4)
})
console.log(5)
  • 手写发布订阅模式
class PubSub {
constructor() {
this.sub={}
}
const on = (event, fn) => {
if(!this.sub?.[event])return
if(this.sub[event]){
this.sub[event].push(fn)
}else{
this.sub[event] = [fn]
}
}

const emit = (event, data) => {
if(!this.sub?.[event])return
for(let task of this.sub[event]){
task(data)
}
}
const unSub = (event, fn) => {
if(!this.sub?.[event])return
this.sub[event]=this.sub[event].filter(item => item!==fn)
}
}

const pubsub = new PubSub()

pubsub.on('event', (data) => {

console.log('event:' + JSON.stringify(data));

})

pubsub.emit('event', { a: 1 });

  • 手写 node 数组转 dom 字符串
type DocNode = {

type: 'link' | 'text' | 'image' | 'break' | 'division'

children: DocNode[] | string

properties: any

}

const map = {
link: 'a',
text: 'span',
image: 'img'
break: 'br',
division: 'div'
}

function renderToHTML(nodes: DocNode[]): string {
let res = ''

for(const node of nodes){
if(node.type === 'break'){
res+='<br />'
continue
}
let str = ''
str+= '<'
str+= map[node.type]
// object
if(node.properties){
let tempStr = Object.entries(node.properties).map(([key,val])=>` ${key}="${val}"`).join('')
str+= tempStr
}
str+= '>'
if(typeof node.children === 'string')str+=node.children
else str+=renderToHTML(node.children)
str+=`<${map[node.type]} />`
res += str
}

return res

// return ''

}

// <span>1234</span><div><img src="" /><br /><a href="">link</a></div>
  • 几道手写没有真跑,有思路就算过了

反问

  • 负责业务
    • it 赋能,面向商家,60 多个人,大前端,在成都
  • 工作强度
    • 正常 8 ~ 9 可以下班
  • 成都生活怎么样
    • 吃辣的话挺舒服,比北京舒服点