记一次阿里前端面试失败的经历

前段时间有幸参加了阿里的一个前端社招。最终挂在二面上，特此分享出来，借此来总结一下在三线城市生长的两年半的前端er心路历程。

这里简单做个背景介绍。题主是一个三线城市土生土长的前端er，整个前端的职业生涯也是在这个城市开始(也不知有没有机会在这个城市结束);前端技术栈现在主要固定在angular(Rxjs) ionic(flutter) nodejs ;

其实从发简历到接到第一个电面的电话的时候，心中还是有一些小窃喜和小期待和小紧张。话不多说，简单介绍下整个过程。

• 一面

一面是电话面，按照约定好的时间。整个过程大概是40分钟。前面客套的巴拉巴拉一堆介绍。

• 然后是第一个技术问题。介绍一下在工作中自己觉得比较有价值的地方。面对大佬，实在不敢班门弄斧，强行上了一波项目中用到的经历。就是之前有将某个开源ui库fork后做了一些定制化用在生产中，然后和面试官交流了下关于私有组件库版本迭代的一些细节。这个问题算是过去了。
• 然后是大佬第二个技术问题。如果现在有个新项目，让你来主导设计开发，说一下你的思路。这个我就按照实际工作中流程走了一遍，这题应该也算蒙混过去了。
• 来到第三个问题。现在有个复杂表单可能有多个模块组成，模块之间可能有一下相互关联，问如何设计。这道题是在摸不到大佬的点，硬扯了一些，思路就照着angular官网的动态表单来讲。首先设计formctronal对应抽象类 如何一步一步丰富巴拉巴拉。。。最后面试官问了几个Rxjs的问题一面就结束了。这里简直是伏笔。后面会讲到原因。

实话讲挂完电话还是长舒一口气，不算特别圆满也不算掉链子吧。到此感觉还是能够跟上大佬的节奏的。重点是挂掉的二面。

• 二面

二面可以说的就比较多了。因为一面是周一下午结束的，周五下午接到阿里的座机电话。约晚上7点二面，是机试。结果等到7点进邮箱的链接进系统貌似出了问题也进不去，抱着不想错失面试机会的心态回拨之前的座机号码。结果是总机，我也不知道之前联系我的部门的分机号只能被动单向联系了。等到9点收到消息说是有特殊情况耽误了，问我现在可以开始吗。碰巧这个时候要去机场接人，不好意思的和大佬沟通，说明了情况自己可能回到家得11点了，‘能不能换个时间’这几个字还没发出去的时候，对面直接回复，11点我给你打电话。好吧。看样子我一直是个假程序员。996那是福利才对。233~

二面很直接，机试，大佬直接丢个场景，写一个指令，对发生在一个debounceTime发生的连续点击事件做去防抖处理。不限制第三方库(这就是一个前面的伏笔，此时内心还有点小窃喜，Rxjs去抖属于猎杀范围，😔，但其实这是个坑)，不哆嗦，上代码。

// 这是我第一反应的写法
  @Directive({
    selector:'[debounce]'
  })
  export class Debounce {
    @Input() time :number;
    @Output() dclick:EventEmitter<Event> = new EventEmitter<Event>();
    @HostListener('click',['$event']) onclick(e){
      this.subject.next(e);
    } 
    subject:Subject<Event> = new Subject<Event>();
    click$:Observable<Event>;
    sub:Subscription;
    constructor(ele:ElementRef){
        // 判断是否是input
        if(ele.nativeElement.tagName !=="BUTTON"){// 抛出异常 。。。。 }
    }
    ngOnInit(){
      this.click$ = this.subject.asObservable().pipe(debounceTime(this.time||0));
      this.sub = this.click$.subscribe(e=>{
        this.dclick.emit(e);  
      })
    }
  }

因为确实自己感觉实现功能没问题，就提交了。
真*大佬一看，说如果外部的time如果变化了呢，如何实现。同样是十分钟。我想了想就开始写，现在看起来因为当时缺少的思考导致越走越远了。

  // 在之前的代码之上加一段逻辑
  export class Debounce {
    *
    *
    ngOnChanges(){
      this.click$ = this.subject.asObservable().pipe(debounceTime(this.time||0));
      this.sub = this.click$.subscribe(e=>{
        this.dclick.emit(e);  
      })
    }
  }

因为没有得到大佬的理想答案，加之因为整个写代码的过程是web的文本编辑器里，没有ide的环境，弱鸡的我英文单词错的有点多，想在想起来这种表现出来应该就是码感太差。就和打麻将一样没有达到‘人雀合一’的境界。大佬反馈这个代码太复杂了。后面也就没有再深入下去了(后面想如果大佬得到了期待的答案应该还会有针对这个场景继续深入下去的技术实现的把。流下了没有技术的眼泪。。。)。

后面是在忍不住私下找了下大佬，问了一下这个场景下大佬期待的答案，通过大佬的反馈，自己又尝试了下，最终将整个逻辑重写了，感觉应该比较接近大佬的答案，贴代码欢迎大佬拍砖 wechat:18507040603 或者有好的思路非常乐意一起探讨进步

  // 后期思考后的版本
  @Directive({
    selector:'button[debounce]' // 选择器直接过滤 不用像之前那样额外用代码做判断
  })
  export class Debounce {
    @Input() time :number;
    @Output() dclick:EventEmitter<Event> = new EventEmitter<Event>();
    @HostListener('click',['$event']) onclick(e){
      this.subject.next(e);
    } 
    subject:Subject<Event> = new Subject();
    constructor(){}
    ngOnInit(){
      this.click$ = this.subject.asObservable().pipe(switchMap(e => timer(this.time).pipe(mapTo(e)))).subscribe(e=>{
        this.dclick.emit(e);  
    })
  }

顺带做了一个脱离angular在线体验版本stackblitz

总结

• 缺乏思考
• 学习Rxjs的时候只是简单过了一遍，没有深入挖掘前端适合Rxjs的场景反哺理论
• 太菜
• 太菜
• 太菜~

如果学习不能使我快乐，那么一定是你对快乐有误解 :jsyang