如何免费建立官方网站,wordpress 文章 自动生成标签,wordpress 图片 旋转,海东地区谷歌seo网络优化大家好#xff0c;我是若川。常有小伙伴问#xff0c;面试时项目经验怎么回答#xff0c;经常会分享这篇文章给TA。本文经授权转载。面试、学习源码系列、年度总结、JS基础系列前言本篇文章的作者是来自阿里淘系用户增长前端团队的“亦逊”#xff0c;18年作为双非本科生通… 大家好我是若川。常有小伙伴问面试时项目经验怎么回答经常会分享这篇文章给TA。本文经授权转载。面试、学习源码系列、年度总结、JS基础系列前言本篇文章的作者是来自阿里淘系用户增长前端团队的“亦逊”18年作为双非本科生通过层层面试校招进入阿里今天以过来人的身份给大家分享在面试官问起项目经验时该如何回答。说起面试说起校招面试大家总会感觉心慌慌。可能是不自信可能是感觉好多没准备好。没关系既然投递了简历又通过了筛选就不要胆怯。首先要知道面试官都是抱着想把你招进来的想法的只是想多了解你的具体情况。既然面试官愿意花时间和你聊那么证明自己还是有实力的有被看中的闪光点那么有什么好心虚的呢勇敢自信的面对就好了。STAR法则在写简历和面试过程中都需要描述工作经验或个人经历。优秀的面试者往往会用 STAR 法则来建立个人事件让面试官可以更好地通过你过去的经历来判断你的个人能力和潜质。重新回顾一下 STAR 法则四要素Situation事情是在什么情况下发生基于一个怎样的背景Task你是如何明确你的任务的Action针对这样的情况分析你采用了什么行动方式具体做了哪些工作内容Result结果怎样带来了什么价值在整个过程中你学到了什么有什么新的体会。往往大部分同学一上来就直接介绍做了什么以及实现的过程条理也比较清晰内容也颇具技术含量。但很多同学很容易忽略了 Situation 和 Result 的部分也就是背景和结果。或者是在面试官进一步了解追问细节的时候容易惊慌失措。这些原因往往都是由于面试前对自己的经历没有将来龙去脉讲清楚以及总结不够全面和深入。举个例子比如有的同学提到了在 XXX 项目过程中实现了一个 Webpack 插件 XXX这个插件的功能是 XXXX 并且在 Github 上开源了。整个实现过程和思路都比较清晰面试官听的也是饶有兴致甚至回想起年轻时某个夜晚加班研究 Webpack 插件的青涩时光。尽管这样面试官也同样希望了解当时项目的背景是什么原因导致你要想到通过做 Webpack 插件来解决而不是通过其他工具以及这个插件给项目带来了怎样的价值是构建性能还是其他。背景和结果是面试官非常看重的一部分必须拿出足够的理由和价值来说服面试官否则尽管你在这个项目投入了足够的精力但最终并没有为你的面试评价加分这是十分可惜的。这时候有的同学也会想我的项目只是个人/学校的练手项目对于项目结果我想不到非常有吸引眼球的价值。那么这个时候你不妨说一下你在项目中学到内容比如在这个 Webpack 插件例子中就可以说一下Compiler 和 Compilation 以及它们的区别Webpack 是通过什么方式实现了插件之间的关系以及保证它们的有序性开发插件时需要依据当前配置是否使用了某个其他的插件而做下一步决定如何判断 Webpack 当前使用了哪些插件开发插件过程中借鉴了其他插件的思路我对这个插件源码的理解等等等等。以上的在实际开发 Webpack 插件过程中大部分都会遇到这些问题如果你有记录和总结也能作为 Result。面试场景还原下面笔者场景还原一下项目经历面试的过程借助 STAR 法则来简单介绍一下自己之前在做浏览器API兼容性检查器的过程通过口述将一件事情清楚描述在面试中也是非常重要的以下均为口述方式所以没有图。面试官我看到你在简历中提到实现了一个检查浏览器 API 兼容性的工具可以介绍一下么我Situation好的当时的情况实际上是一次线上的用户的舆情反馈说页面白屏/打不开通过 JSError 日志的排查我发现最近出现大量类似 InterpObserver is not defined 的日志同时和我最近一次发布的模块曝光需求时间线是差不多吻合的所以很快定位到了是当时使用浏览器 InterpObserver API 做 DOM 曝光时没有考虑到兼容性的问题。面试官那问题解决了么我是的当时定位到问题后通过增加 polyfill 的方式很快解决了这个问题。Task后来我借着这个问题我自己也进行了思考其实随着操作系统和浏览器的更新越来越多的 JS/浏览器的新特性开始被支持。为前端开发带来便利的同时也会带来一些不可避免的兼容性问题。兼容代码polyfill的忽视很容易造成不可预估的问题。但如果只依赖开发人员人工检查兼容性问题并不是最优雅的解决方案毕竟人工的难免会有遗漏。所以我想是不是能够开发一个集成现有的兼容性检查规则的工具将这个过程自动化。面试官不错详细介绍一下具体过程吧。我Action恩这个想法诞生之后我就去了解了一下常用的前端兼容性检查网站Caniuse 和 MDN 这两个是我比较常用的。后来发现这两个网站的检查数据实际上在 Github 上都对应维护了一份静态的检查规则caniuse-db 和 mdn-browser-compat-data这些数据都是具有特定结构的 JSON 文件尽管这两者对浏览器支持程度描述的方式不太一样但已经能满足得到兼容性数据的基本要求。接下来就是对代码的分析检查将代码和这些规则进行比较。这个过程需要对代码进行语法逻辑分析所以我想到了用 Babel 将代码转化成 AST 语法树进行特定遍历。同时我整理常规的 API 的调用方式我发现不外乎几种比如NewExpression构造表达式 和 CallExpression调用表达式。当这些信息都掌握清楚后我觉得这件事情是具备技术可行性的。面试官恩这个实现过程有没有遇到哪些问题你是怎么解决的我Action恩有的刚刚提到 Caniuse 和 MDN 维护的静态 JSON 数据我在实现过程中将这两份数据进行了格式的统一目的是将两块数据进行互补同时方便后续进行检查比较。最终事实上得到了接近 9w 条数据如果直接拿来对比是很影响效率的所以当时利用 browserlist 可以配置指定目标检查的浏览器范围比如 iOS Safari 9 以上通过这一层去过滤在该范围内没有兼容性问题的数据从而减少对比提升效率也为开发者提供灵活的配置能力。第二个问题同样也是检查的性能优化是通过 isReferencedIdentifier 去检测标识符是否有被真正引用到。最后是这个工具与如何接入发布流程的管控由于公司的发布流程采用的是云构建的方式所以我在发布之前先经过这个工具的校验并且将检查的结果打通消息通知和邮件系统Result帮助其他人在发布前得到项目代码的浏览器 API 兼容性检查报告避免了这类问题的再次出现。这次的经验帮助我加深了对 Babel 和 AST 的理解。面试官那你了解 Babel parse AST 的过程么我在解析成 AST 过程中有两个阶段词法分析和语法分析。词法分析阶段字符串形式的代码转换为令牌tokens流令牌类似于AST中的节点语法分析阶段把一个令牌流转化为 AST 的形式同时把令牌中的信息转化为 AST 的表述结构。面试官你项目中说的 AST 遍历的过程能再详细说说么我Babel 在处理一个节点时是以访问者的形式获取节点信息并进行相关操作。这种方式是通过 Visitor 对象来完成的Visitor 对象中定义了对于各种节点的访问函数这样就可以针对不同的节点做出不同的处理。比如我在项目过程中主要针对 NewExpression 和 CallExpression 进行处理通过 path 参数对节点以及节点的父子节点以及进行判断筛选balabala。总结一下面试官的「套路」面试时所问的问题基本分为两种具象的问题和开放性的问题。具象的问题基本都会参考工作经验按照 STAR 法则来进行主要是了解基本的素养技术深度和潜力。开放性的问题基本是考察思维发散能力考察在某个领域的深度和广度基本上会结合技术问题来问或者是结合工作内容来问。比如实现某种技术的 n 种方法某种技术的实现原理和什么什么相比有哪些优缺点你对这项技术的思考是什么面试者的「应对」就实际情况做回答提前准备的时候多发散多思考多总结。这一块是可以自己准备的加分项。发散性问题主要是看自己平时积累。首先基础知识要牢固同时也要了解最新技术动态。面对这类问题切记也不能答非所问而跑题了。最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 拉你进群。一个愿景是帮助5年内前端人成长的公众号可加我个人微信 ruochuan12长期交流学习推荐阅读我在阿里招前端该怎么帮你可进面试群毕业年限不长的前端焦虑和突破方法前端抢饭碗系列之Vue项目如何做单元测试前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。点击上方卡片关注我、加个星标今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
