软技能

🙋 反问

问业务面试官

[我为公司提供的价值]

1. **业务？**技术栈是什么?团队规模
2. 对这个岗位的预期是什么？ 如果我来做，希望我在短期或长期内完成什么目标？
3. 公司对于一个合格的人才是什么要求
4. 对于公司/部门/小组（确定面试官的职位）来说，现在什么是最重要的优先级？如果我入职了，有什么工作是需要我立马去做的？
5. 您认为优秀员工的标准是什么？(问题太泛)
6. 如果我被录取了，请问贵公司更看重我哪方面的优势呢？这样可以让面试官回想一下你的优点

[问leader]

判断leader是否具有领导力

1. 对日报 周报 的看法？
2. 部门构成，年龄构成是什么样的？
3. 组织架构，我向上级直接汇报的领导的层级是什么？
4. 这个工作和哪个部门配合比较多，我们之间工作的交集集中在哪里？

[部门主管]

1. 如果我可以入职这个岗位，您对我3到5年的建议是什么呢？

问HR

之前我确实有很多问题想问，但是在刚才经过和您的一番沟通之后，您已经完全解答了我所有的疑惑，非常感谢，我也期待我能够入职

1. 年终奖的构成，部门普遍能拿到多少

2. 职级情况、晋升机制

3. 所在部门校招hc整体情况

4. 三方后提前实习的工资情况

5. 工资是否有可谈空间

6. 一个典型的一天或者一周的工作是怎样安排的？

7. 工作内容？男女比例？岗位分配？

8. 您觉得公司氛围如何

9. 公司对人才的培养和晋升制度是怎样的

10. 公司绩效考核是怎样的？绩效影响哪些事情？多少人能拿到合格绩效？

论我今天在面试中是这么反问的，笑死^^ (opens new window)

1. 可以分享一些您对我们校招生的建议吗？
2. 方便的话，可以透露下 您工作已经多久了吗？
3. 可以的话，可以分享一些 从学生到工作转变这段期间，一两点给您印象最深刻的吗？
4. 如果您对现在工作打分的话，您会怎么权衡呢？
5. 您平常是早几晚几呢？
6. 站在您的位置，可以分享您对您未来3-5年 在互联网行业的职业规划吗？

🔥 被问

最有挑战的事

问题-角色-过程-结果-复盘

可以是突破了一个固有的自己的行为表现

比如 某个第一次，可以说对自己的影响和改变，从中得到的认识

面试官希望的 我通过一个具体的事例，描述遇到的有难度且自己解决了的事

职业规划

🌰 这个问题我也有去思考过，对我自己而言，我和您分享一下现下我对几个阶段的规划吧

第一阶段，一年之内我要求自己通过快速高效的学习，努力踏实做好本职工作，不断提高自己的专业和技能水平。同时我也会在1-2年内建立起对本行业、对竞品较为全面而深刻的了解

在第二阶段，自己入职的两年内，我希望自己的能力可以继续稳定提升，继续学到更多与工作相关的知识。希望自己在工作中能够独当一面，去为某个具体的事情、具体的项目负责，能够为公司解决具体的问题

在第三阶段，差不多入职2-3年，我希望能在工作中能有更多的创新与发展，有能力参与公司的重要项目，并不断推进发展，锻炼自己的领导能力和沟通协作能力，扩大团队影响力，为公司的业务发展贡献力量，为公司带来更大的价值

总之，行业上有所发展+岗位上深耕

优缺点

考验 分析能力和自我意识

• 🍅缺点

是缺点，同时附上解决办法，不能伤害到工作的缺点，不能和公司提出的要求相悖

联系所学专业的发展趋势(知识结构不甚合理、专业知识不足以应对新的挑战)

对运维那块部署相关不熟悉，经验不足，对某块边缘知识不够了解

🌰 我对自我认知的确定就是现在还年轻，对于行业知识，业务的理解不够深**，缺乏实践经验，社会阅历较浅**，这块需要自己多去参与历练，同时做好总结和复盘工作

然后在项目过程中我也发现自己有时候会过于局限技术细节而忽视产品业务的重要性，导致开发过程受阻，比如以前会因为一个技术点的流程不同卡顿 ，现在会积极参与产品业务的早起阶段，加强对业务的理解

• 🍅优点

能力+实例+对工作业绩的作用

具体化，比如管理一个项目，用了哪些手段，使项目进度加快，质量得到提升

和钻研精神、沟通能力和深度思考

做事有计划、做事全力以赴，或者说是一个比较拼命的人。一旦确定了目标，会尽自己全部的力量，直到成功

比较有条理，个人物品和工作文件都很有规律

善于发现问题，解决问题，求知欲望强，有好奇心

有较强的信息检索能力，擅长通过国外论坛/文档解决技术问题

热爱互联网，对互联网产品和技术有浓厚的兴趣，热衷于追求技术极致与创新

优秀的分析问题和解决问题的能力，能够快速学习，主动性和责任心强

学习能力：学习方法/速度

身体素质：啥病没有，基本没有感冒过，能加班，吃苦耐劳

对技术的追求：空闲时间都研究XX技术，有新的技术，自己就去尝试，做一个小demo （这块可以放心吹，HR也不懂）

团队合作：适应团队协作，在校的时候 就 组织XXX活动，沟通能力好，在团队是 润滑剂 ，能让不同性格的人都愉快合作在一起

工作态度：工作认真，学校老师安排的任务，都是超前交付，责任心强，如果项目因为我的失误出问题 会特别自责

🌰 因为我经常进行总结和复盘，包括学习工作和生活，工作上，我有良好的沟通能力和团队合作精神，有较强的适应能力，环境改变时，首先要积极学习，所谓自助者天助，其次，更为重要的是要学会寻求帮助，和团队共同推进项目的开展

另一方面，我觉得自己主观能动性也比较强， 会对任务进行合理规划并严格执行， 做事认真不拖沓 ，会给自己预留出足够的容错和复盘时间，不至于耽误团队进度，影响整体安排

生活上，我自己本身也有写日记的习惯，我是一个做事有计划的人，我习惯于提前将生活和工作安排得井井有条，不会遗漏重要的事情，做事情有计划并全力以赴

以上就是我对自己优缺点的一个认知

为啥不考研？

🌰 看个人选择和规划，更想去实际的环境中锻炼自己的能力，同时能参与到团队中和大家一起完成共同的目标对我来说成就感更多，收获也会更多，也能为公司做出自己的贡献

为什么选择我们公司？

夸！使劲夸！夸公司、夸行业、夸价值观……

行业好+公司好+岗位符合自己的期待

从技术氛围，职业发展，公司潜力等方面说为什么选择这家公司。

表现自己如何如何看好这家公司，想要和这家公司一起成长

贵公司非常符合我的职业规划

你很优秀我也很优秀，我们很般配

第一，公司目前所处的行业是我十分看好的，因为XXX（公司业务所在的大行业）是未来的发展趋势，同时XXX（用一句话总结这个行业是在上升期），我觉得有很大的机遇。

第二，公司的业务也是我非常看好的，因为XXX（公司的具体业务）虽然已经发展了一段时间，但是对比一线城市/领头企业/国外仍然是有差距的。

第三，XXX岗位（你应聘的岗位）是我希望能够深入发展的方向。

结合以上，我非常希望能够跟公司的业务、产品，一起成长、一起发展。所以，非常希望能够有机会加入公司

🌰 首先，我个人非常喜欢贵公司的企业文化和技术氛围，很尊重公司以人为本的理念，包括对社会的反馈相关的共享都是值得赞美的

同时，贵公司非常注重员工的个人提升这一点我也觉得是非常棒的，因为员工的进步可以反哺公司的发展，有利于公司团队走得持久走得长远

公司目前所处的行业是我十分看好的，因为XXX（公司业务所在的大行业）是未来的发展趋势，同时XXX（用一句话总结这个行业是在上升期），我觉得有很大的机遇，这一方面刚好也是我比较感兴趣的一块

最后，XXX岗位（你应聘的岗位）也是我自己希望能够进行深入发展的方向。

综合以上，我觉得贵公司很符合我的职业规划，同时也非常希望能加入贵公司和贵公司的产品业务一起成长、一起发展

对我们公司了解多少？

（面试前一定要提前查询该公司主营业务）

🌰 我了解到我们公司主要是做...业务的，主要面向...国家/群体等，提供...服务的，近期公司的品牌在...发展等等（根据公司的实际情况来回答）

擅长啥？

总结，学习，阅读文档，提炼重点，复盘

🌰 经过对自己的复盘和自省，我觉得自己主要擅长总结和复盘以及对周围环境的适应

因为我一直有写日记的习惯，每次对于课程的学习或是参与项目的一个阶段，我都会有复盘的习惯，这种不断自省和总结的习惯也为我带来了很多帮助，同时以输出的方式倒逼自己的输入，对于核心竞争力的提升也是一个不错的渠道

期望薪资

个人情况+公司情况+对比报价

要听他没说什么，而不是说了什么

比自己预期的高一些，比如20k说成22k，但是不能把话说太死

但是，由于公司的薪资结构有差异，所以要根据咱们公司的薪资结构，薪资预算范围再看

比如：公司在郊区，租房便宜，我就说，公司在郊区，比较偏啊；如果公司在市中心，我就说租房贵啊

就我的面试表现，咱们公司最高可以给到多少？

弱化对方提出的福利，抓住对方福利的劣势，作为我的要求，以此为条涨薪

预算是15-20，你的期望是17，报18~20。坐等HR还价，再配合深度的思考、评估，做一个艰难的决定。一边表达期待一边说，如果能给到17也可以

当然如果手上有其他的offer也可以小心透露一下聊聊，比如给到多少肯定是优先考虑，非常喜欢贵公司

如何看待加班

愿意牺牲自我时间帮助团队和企业，强调责任心，无意义的加班的话就好好学习

1. 紧急/⻓期加班
2. 紧急加班，这是公司都会遇到的情况，愿意牺牲时间帮助公司和团队
3. ⻓期加班，会磨练技能，提⾼效率，团队⻓期加班，会帮助团队找到问题，利⽤⾃动化⼯具或者更⾼效的协作流程来提⾼效率

🌰 肯定是ok的

首先，我是以应届生的身份进入公司，我需要更多的时间来进行学习和完成社会上角色的转换，我觉得公司里也有很多技术需要我去学习。

在之后我觉得工作时间是和我的职责和项目进度来保证的，我会尽最大的努力在规定时间内完成工作任务，如果是未完成，或者是紧急工作，我也会适应公司的节奏和加班的强度。

有其它offer吗

不交实底，也不过分吹牛

没有offer的话

🌰 我才开始面试，时间不长，目前有一两个机会 在复试 跟 终试的这个阶段

有offer

🌰 有收到两三个offer，不过呢，我关注咱们公司已经很长时间了，非常看好咱们公司的发展方向和目前的经营理念。这个岗位呢 也是我很喜欢的，所以非常珍惜这次机会，也特别期待能得到咱们公司的认可

希望与什么样的上级共事

回避对上级具体的希望，转移到对自己的要求上

🌰 因为我们是以应届生的身份加入公司的，这是一个从学校到职场身份的切换，对于公司业务 相关的东西都是需要多熟悉的，可以的话，我希望上级能够对我多加指导

对于工作中相关的东西多加提点，以让我们更加快速灵活地适应团队日常工作的开展和项目的开发

不喜欢和什么人打交道

分析不好相处的原因，强调对良好人际关系的重视，处理好同事/上级的真诚合作态度

🌰 我是属于那种有耐心，性子不急躁，情绪稳定的人，一般来说，和什么人都合得来，但若遇到没有团队协作精神的人，或对工作态度不积极的人，我会比较难融入，因为这样导致的结果不仅仅是我们个人之间了，我们都知道沟通协作对一个团队工作开展的重要性，我会根据不同的特点采取不同人际协调、合作方式，避免耽误项目进度，影响团队间的关系

希望加入什么样的公司？

潜台词就是我就想要加入贵司这样环境的公司

公平竞争，共同进步，互相团结

从公司规模（平台）、企业文化、地域、薪资、人才培养机制（晋升/个人发展）、公司产品、公司底蕴等方面进行阐述。比如一个公司的平台好，可以重点突出这个点

🌰 首先，我觉得是工作氛围和企业文化吧，在一个公平和睦的环境中工作对我们效率的提升也是有帮助的，可以更加心无旁骛的投入工作本身，不至于考虑太多其他无关紧要的因素

其次就是公司的地域、规模相关(结合具体情况具体分析！！)

公司的产品业务线是我非常感兴趣的，对于个人进步提升相关也需要关注下，因为成长是双向的，当员工能够更上一层楼时，也能以更快的速度为公司提升更多的价值，反哺公司

差不多就是这些

入职如何开展工作

对岗位的了解+表忠心+工作方法+工作态度

🌰 我有了解到我的大概工作内容是XXX

入职前，我会通过前辈详细去了解我入职部门相关信息，包括部门负责业务 生产线 及我入职后汇报工作成果的窒息领导等

和我的mentor及时沟通请教，查看有关文档，如何能够快速地上手项目

保持一个不断学习的状态和自己的执行力

可以来实习吗

这个是坑！先问清楚是签了三方来实习，还是实习转正的机会！！！

🌰 如果是签了三方再去实习，是可以的

我也很希望可以提前进入公司提前适应节奏和学习新知识

最能概括你的三个词？

耐心 负责 坚持

自省 专注 主动 坚持 信心 责任 乐观

🌰 学习 心态 执行力

学习包括两个方面，有随时学习的意识和良好的学习方法。遇到不懂的东西就马上去学习，上网查资料，向同行的高手学习，这都是我经常用的学习方法。

心态好，遇到困难不会被困难吓住，不会退缩，我会尽自己最大的努力来解决。执行力：执行力强，我每天坚持学习，写总结反思自己

这是一个不断更迭的领域，需要我们有终身学习的能力

做事情认真负责，专注做好自己的工作，遇到困难不轻言放弃，而是想方设法解决

其次就是执行力，光说不做谁都会，我们要看一个人做了什么，要做行动上的巨人

不断地对过去的自己表示不满足，同时总结复盘，这是一个不断学习不断进步的过程

失败的经历

之后也有复盘整改和提升，会很快振奋起来的那种经历

🌰 那就是考六级吧，第一次考的时候离及格差了2分，其实我的英语成绩从初中开始都是属于不错的类型的，当时考六级时有点不在状态，加上对六级题目难度的判断不是特别地全面，得知没有过的时候，也是蛮伤心的，后面调整过来 就开始寻找一个正确的学习方法，想着下次如何提升自己的成绩

找到一套学习方法后，还需要每天固定的时间练习，包括听力 阅读 写作，第二次考试的时候，就涨了将近100分

这一点我学到的东西也是蛮多的，首先，不能焦躁，其次，要有自己发展进步的轨道和时区，多去专注于自己技术能力的发展，其次就是要稳住，多从过去的教训中汲取经验

实习收获

实习都做了什么。

实习中遇到了哪些问题（技术上，开发流程上，部门沟通上）。

你是如何解决这些问题的。

实习中收获了什么 技术上成长 （学习了哪些技术组件，自己有没有去深挖）

代码风格上 （如何写出易于维护的代码）

开发流程上 （单元检测，打日志，Git团队合作）

对业务理解能力上 （如果把业务场景转为系统设计转为工程代码，都考虑了哪些问题）

看了啥书

《图解HTTP》

《JavaScript高级程序设计》

阮一峰老师写的《ECMAScript 6 入门》

《JavaScript 权威指南》犀牛书

《高性能JavaScript》

《深入理解ES6》

《你不知道的JavaScript》

注意

不抢答

“水深则缓流，人贵则语迟”

不管问题多简单，回答之前停顿思考，哪怕一秒。因为每一次提问，都是面试官在我身上找价值的过程，而不是找不足

有好奇心

面试官：我就很好奇，你真的不关心我们的**作息时间，薪资待遇，审批流程**吗？你对我们很了解吗？你对我不感兴趣吗？

不用面试题反问面试官

面试官：你要知道不管你是有意无意，是不是真的虚心求教。我们都有一种被人“戏弄”的“错觉”。面试仅仅是一个双向选择的过程，不是一个你提升自我的过程

测评

前后一定要一致

必要时记录关键词提醒自己

offer有关

谈offer要注意哪些事项（避坑指南） (opens new window)

还有应届生不关注五险一金？来看看五险一金的影响 (opens new window)

🌈 star法则

star法则超好用

1. situation 项目背景和环境
2. task 任务职责
3. action 基于任务采取的措施和应对方法
4. result 收获和总结

项目如何描述 (opens new window)

简历

个人信息明确

项目描述丰富点

个人贡献详细一点

总结

【项目经验】分 「项目描述」「个人工作」「个人收获」写

• 代码风格，编程风格对项目开发的帮助，亲身体会对技术的追求

• 开发日志和上线日志 单元检测

• git上的使用

• 对业务理解，业务场景转换为系统设计，系统设计转换为工程代码

• 状态机 状态归一化

项目深度

1. 你的项目的技术难点是什么？
2. 你是如何克服这个技术难点的？
3. 你做这个项目的收获是什么？
4. 为什么使用这个技术/组件？

组件封装

先说 为啥出现 组件封装的需求

其次说为啥需要组件化开发

• 减少代码量
• 支持共享组件库
• 减少开发成本
• 代码易维护

啥时候需要封装组件

设计原则

• 层次结构和类图

具体细节的实现，例如数据类型，方法实现，所需状态属性

• 纯粹的state变化
• 统一/集中的状态管理

Redux或Vuex

• 低耦合高内聚

呈现更好复用性 而不 受限于特定上下文环境

• 模块化

命名污染，保持作用域、变量的独立性

可使用命名空间

• 样式隔离

• 数据配置外部处理，外部传入

对props做数据校验

• 数据传递不依赖全局

数据泄露

内存占用过大

• 使用文档(配套的md文档)

标注组件名、入参、事件

构建工具

前端工程化那些事 (opens new window)

构建工具：rollup、Parcel、grunt、gulp

Webpack

webpack 面试题整理 (opens new window)

loader、plugin

【loader处理某一类文件而plugin可以做「任何」事】

loader webpack本身只能打包JS和JSON文件，但实际中我们还有CSS 、SCSS、png和TS等其他文件，此时我们就需要使用loader让他们正确打包

loader 处理编译JS和JSON以外的文件时用——翻译官

Loader——加载器，本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果

Loader 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是 Object，内部包含了 test(类型文件)、loader(使用)、options等属性啥加载

plugin可以在webpack运行到某个阶段时，帮助我们做一些事情，类似于React/Vue的生命周期

Plugin——插件，扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 监听这些事件，在合适的时机通过 提供的 API 改变输出结果。是扩展器，在打包过程中，基于事件驱动的机制，监听webpack打包过程中的某些节点，执行广泛的任务

proxy原理？

为啥 配置webpack的proxy 可解决跨域？

proxy是webpack提供的代理服务，基本行为——接收客户端发送的请求 转发给其他服务器，便于在开发模式下解决跨域问题

实现代理需要中间服务器，webpack-dev-server 是webpack推出的一款开发工具，将自动编译和自动刷新浏览器等系列对开发优化的功能集成

只适用于 开发阶段

proxy—— 利用http-proxy-middleware http代理中间件，实现请求转发给其他服务器

npm

早期npm

npm v2 设计很简单，安装依赖时将依赖放到node_modules；若某个直接依赖A依赖于其他依赖包B，依赖B会作为间接依赖，安装到依赖A的文件夹，可能多个包出现同样依赖递归，若项目过大 必然形成巨大的依赖树，出现重复，形成嵌套地狱

"嵌套地狱"

• 依赖树层级过于深不利于排查和调试
• 依赖分支中可能出现同样版本相互依赖的问题

重复问题带来什么后果？

• 安装的结果占据空间资源
• 依赖重复造成安装依赖时间过长
• 目录层级过深，文件路径过长，出现删除不掉node_modules的情况

yarn

新的JavaScript包管理器。 解决历史 npm 不足(npm对于依赖的完整性和一致性的保证，安装速度很慢)

2016年， npm还没有package-lock.json文件，安装速度慢，稳定 很差，yarn解决了：

• 确定性: yarn.lock等机制， 不同安装顺序，相同依赖关系在任何 环境容器 都 以相同方式安装
• 采用模块扁平化的安装模式: 不同版本依赖包，按照 策略，归结 单个版本;避免创建多个版本造成冗余(目前版本的npm也有优化)
• 网络性能更好: yarn采用请求排队 理念，类似 并发池连接， 利用网络资源; 引入安装失败的重试机制
• 采用缓存机制，实现 离线模式 (目前的npm也有类似的实现)

npm参数

devDependencies：用于开发环境

dependencies：用于线上环境，生产环境

8.x版本中的容错设计

nonuplets 九胞胎！

1.不填参数：

npm install

\1. 仅安装模块到项目node_modules目录下。

\2. 不会将模块依赖写入devDependencies或dependencies 节点。

\3. 运行 npm install 初始化项目时不会下载模块依赖。

2.使用--save：

npm install --save

\1. 安装模块到项目node_modules目录下。

\2. 会将模块依赖写入dependencies 节点。

\3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。

\4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

3.使用--save-dev：

npm install --save-dev

\1. 安装模块到项目node_modules目录下。

\2. 会将模块依赖写入devDependencies 节点。

\3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。

\4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

4.使用 -g：

npm install -g

1. 安装模块到全局，不会在项目node_modules目录中保存模块包。

\2. 不会将模块依赖写入devDependencies或dependencies 节点。

\3. 运行 npm install 初始化项目时不会下载模块。

运行npm run xxx发生了啥？

去package.json中招scripts对应的xxx，执行xxx的命令，npm run serve实际执行 vue-cli-service serve

为什么不直接执行vue-cli-service serve

直接执行报错，因为OS中不存在vue-cli-service 指令

为啥npm run serve不报错

安装依赖时，通过npm i xxx执行，在node-modules目录中创建好可执行文件，.bin 是一个软链接，可知道其实一个脚本，使用npm run serve执行vue-cli-service serve时，没有安装这个全局命令，但是npm会到node-modules中找到对应文件 执行 脚本

.bin目录下的软链接何处而来？它如何知道执行什么

package.json

~ ^ *

1.2.3

主要版本：更改代表一个破坏兼容的大变化，若用户不适应主要版本更改，内容将无法正常工作

次要版本：更改不会破坏任何内容的新功能

补丁：更改不会破坏任何内容的错误修复

（1）指定版本："axios": "0.21.0"，表示安装0.21.0的版本

（2）~指定版本： "core-js": "~3.6.5"， 表示安装3.6.x的最新版本（不低于3.6.5），但是不安装3.7.x，安装时不改变大版本号和次要版本号

（3）^指定版本："antd": "^3.1.4"， 表示安装3.1.4及以上版本，但是不安装4.0.0，安装时***不改变大版本号***

（4）* 安装最新版本的依赖包，*1.2.3 会匹配 x.x.x

^ 版本更新可能比较大，会造成项目代码错误，建议使用 ~ 标记版本号，酱紫可以保证项目不出现大的问题，也能保证包中的小bug 得到修复

* 意味着安装最新版本的依赖包，缺点同上，可能造成版本不兼容，慎用！！

package-lock.json

为了解决不同人电脑安装的所有依赖版本都是一致的，确保项目代码在安装所执行的运行结果一样

npm(^5.x.x.x) 后才有

package-lock.json 会在 npm 更改node_modules 目录树或 package.json 时自动生成，准确描述当前项目npm 包的依赖树，在随后的安装中 根据 package-lock.json 安装，保证是同一依赖树，不考虑这个过程中是否有某个依赖有小版本更新

目的——对整个 依赖树 进行版本固定的（锁死）

当我们下次再npm install时候，npm 发现如果项目中有 package-lock.json 文件，会根据 package-lock.json 里的内容来处理和安装依赖而不再根据 package.json

使用cnpm install时候，不会生成 package-lock.json ，也不会根据 package-lock.json 安装依赖包，还是使用 package.json 安装

pnpm

速度快、节省磁盘空间的软件包管理器

快速

是同类工具速度的将近 2 倍

高效

node_modules 中的所有文件均链接自单一存储位置

支持单体仓库

内置了对单个源码仓库中包含多个软件包的支持

权限严格

创建的 node_modules 默认 非扁平结构，因此代码无法对任意软件包进行访问

Nginx

作为一名前端，该如何理解Nginx？ (opens new window)

前端工程师不可不知的Nginx知识 (opens new window)

🍅Taro

为啥选taro

通用性问题

转换为H5页面

这是学生团队，需要高手 低手，一个易用性

锻炼大家解决问题的能力，而不是有问题就找导师，然后就成了 排坑 工具，这样得不到收获，没有锻炼

确实有很多坑！

一个页面不像是原生中4个文件

原生的v-for和react的list遍历问题

踩坑记录

Taro主打react技术栈

项目体积过大，无法预览，要进行分包处理

Taro.showToast添加image属性时，图片不显示bug

原因：Taro.showToast中引用了图片，但图片无法被打包到微信小程序中

解决：config/index.js处理

copy: {
    patterns: [
        { from: 'src/imgs/', to: 'dist/imgs' } // 指定需要copy的文件
    ]
}
// 使用时image路径
Taro.showToast({
  title: '上传成功',
  image: '/imgs/success.png',
  duration: 2000
})

🌈 DvaJS

Vuex、Flux、Redux、Redux-saga、Dva、MobX (opens new window)

为啥使用dva react

dva 一个基于redux和redux-saga的数据流方案，为了简化开发体验，dva额外内置了react-router和fetch， 轻量级的应用框架。

dva = React-Router + Redux + Redux-saga

将redux的store进一步封装，很好地解决了异步数据流和数据源不一致的问题

Dva官网 (opens new window)

🙋 Redux

Redux官网 (opens new window)

Redux 是Reducer+Flux，——视图层框架，帮助处理共享状态管理

redux 是JS应用程序的可预测！！！状态容器，通用的context提供者，可以应用在任何一个应用中——Provider 组件！

Provider只是把渲染工作完全交给子组件，提供Context包住最顶层组件

Context提供全局可访问的对象，但是全局对象应该避免，只要有一个地方做了修改，其他地方会受影响

context 只有对个别组件适用，不要滥用！

Redux的store封装得好，没有提供直接修改状态功能，克服了全局对象的缺点。**且一个应用只有一个Store，**store是context唯一需要，不算是滥用

redux对比flux

1. Redux没有Dispatcher
2. Redux只有一个Store而Flux有很多Store
3. Action对象由Store直接接收处理

基本

它认为：

• web应用是一个状态机，视图和状态一一对应
• 所有的状态，保存在一个对象中

应用程序的全局状态存储在单个store内的对象树中。更改状态树的唯一方法是创建action(返回action对象)，要指定状态如何更新以响应操作，纯reducer函数根据旧状态和操作更新

好处是 可很好扩展到大型复杂 的应用程序，使更改具有预测性和可追溯性

原则

1. 单一数据源
2. state可读
3. 纯函数修改

啥情况使用

• 需要使用大量application状态
• application状态频繁更新
• 更新状态的逻辑可能很复杂
• application具有中/大型代码库，可能由许多人开发

工作原理

单向数据流

当多个组件需共享/使用相同状态时，简单性可能被打破

可通过"状态 提升"父组件 解决，但并不总是有帮助

解决的一种方法——组件中提取共享状态，将其放在组件树之外的集中位置，酱紫，组件树变成 "大 视图"，任何组件都可访问状态/触发 动作，无论在树中啥位置

为代码提供更多结构和维护性

用户交互流程

1. 用户(View)发出 action，使用dispatch
2. store 自动调用 reducer，传参：state 和收到的action，reducer返回新的state
3. state变化，store调用监听更新 View

为啥使用redux

前端复杂性的根本原因——大量无规律的交互(交互上存在父子、子父、兄弟组件间通信，数据也存在跨层、反向数据流)和异步操作

我们很容易对这些状态何时发生、为啥发生及如何发生 失去控制，怎样才能让这些状态变化被我们预先掌握、可以复制追踪呢？

Redux试图让每个state变化都是可预测的，将应用中所有动作与状态统一起来，让一切有迹可循

架构层面上，我们希望UI跟数据和逻辑分离，UI只负责渲染，业务和逻辑交由其它部分处理，从数据流向方面来说, 单向数据流确保了整个流程清晰

Redux做到：

• 每个State变化可预测
• 动作与状态统一管理
• 调试简单
• 易测试
• 状态持久化
• SSR

异步请求处理

借助 redux 的中间件 异步处理

主要有 redux-thunk，redux-saga(常用)

此处主要介绍 redux-saga

优点：

• 异步解耦，不会掺杂在 action 或 component 中，代码简洁度提高
• 异常处理，可使用 try/catch 捕获异常
• 功能强大，无需封装或简单封装 即可使用
• 灵活，可将saga 串行 起来，形成异步 flow
• 易测性

缺陷：

• 学习成本高
• 体积略大
• 功能过剩
• yield无法返回 TS 类型

@connect

连接React和Redux

1. connect通过context获取Provider中的state，通过store.getState()获取store tree上所有state
2. 将state和action通过 props 的方式传入组件内部，wrapWithConnect 返回一个Component对象connect，connect重新render 外部传入的元组件 wrapWithConnect ，将connect中传入的mapStateToProps ，mapDispatchToProps 与组件上原有的props 合并，通过属性的方式传给 WrappedComponent
3. 监听 state tree 变化。connect缓存了store tree中state的状态，根据state当前和变更前状态比较，确定是否setState触发connect及re-render

connect的工作

1. 把store上的状态转化为内层傻瓜组件的prop
2. 把内层傻瓜组件的用户动作 转化为派送给store的动作

context

context“上下文环境”，让一个树状组件上所有的组件都能访问一个共同的对象，context 由其父节点链上所有组件通过 getChildContext() 返回context对象组合而成，通过context 可以访问其父组件链上context

createContext创建context对象，有_currentValue保存值，引用了Provider和Consumer两个对象，Provider和Consumer里有 _context属性引用了context

jsx渲染时会把Provider和Consumer对象保存在VDOM 上，后面reconcile时会转移到fiber的type属性上，处理fiber节点时会根据类型做不同处理

如果是Provider，会根据传入的value修改context的值，也就是 _currentValue属性

如果是 Consumer，会读取 context的值，触发子组件render

函数组件使用useContext的hook，最终也是读取同一个context的_currenValue值

Redux、Vuex

区别

• vuex改进了redux中的action和reducer，以mutations 变化函数取代 reducer，无需 switch，只需在mutations中修改对应state即可
• vuex无需订阅re-render，只需要生成新的state
• vuex数据流，view调用store，commit提交对应请求到store中对应mutations，store修改，vue检测state修改自动渲染

vuex弱化dispatch和reducer，更简易

共同点

• 单一数据流
• 可预测变化

都是对MVVM思想服务

中间件如何拿到store和action

redux 中间件本质是一个函数柯里化

涉及 源码

React-Redux

如果不用 react-redux，手动处理 Redux 和 UI 的绑定，需要写很多重复的代码，容易出错，且有很多 UI 渲染逻辑的优化不一定能处理好

为了让redux更好适用react的一个库

管理状态、组织代码

connect连接组件和store

connect接受两个参数：mapStateToProps和mapDispatchToProps。定义 UI 组件的业务逻辑。前者负责输入逻辑，将state映射到 UI 组件的参数（props），后者输出逻辑，将用户对 UI 组件的操作映射成 Action

import { connect } from 'react-redux';

const Component = connect(
  mapStateToProps,
  mapDispatchToProps
)(Con);

Redux-Saga

React中间件，更好解决异步操作，一个直观的 Redux 副作用管理器

易于管理、易于测试和高效执行

相当于在redux原有数据流中多了一层，对Action进行监听，捕获到监听的action可以派生一个新的任务维护state

通过Generator创建，同步的方式写异步代码，不会被细节困扰

💜 React-Router

原理

客户端路由 实现原理

• 基于hash 路由，监听hashchange 事件，location.hash=xxxx 改变路由
• 基于H5的 history，通过history，pushState 和 replaceState 修改URL，能应用 history.go() 等 API，允许通过 自定义事件 触发实现

react-router实现：

• 基于 history 库实现，history知道如何监听浏览器地址变化，解析URL转换为location
• router使用location匹配路由，渲染 Component

路由切换

• Route标签组件 ，通过 比较 <Route>的path属性和当前地址的 pathname 实现，匹配成功则 render，否则渲染null

// when location = { pathname: '/about' }
<Route path='/about' component={About}/> // renders <About/>
<Route path='/contact' component={Contact}/> // renders null
<Route component={Always}/> // renders <Always/>

• <Switch> +<Route>，<Swicth>对<route>进行分组，遍历所有的子<route>，渲染匹配的第一个元素

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
</Switch>

• <Link> <NavLink> <Redirect>，<Link> 组件创建链接，会在HTML处 渲染锚(<a>)

<Link to="/">Home</Link>   
// <a href='/'>Home</a>

当 <NavLink>的 to 属性与当前地址匹配时，可将其定义为活跃的

// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="hurray">
    React
</NavLink>
// <a href='/react' className='hurray'>React</a>

渲染<Redirect>强制导航

重定向

<Redirect>实现路由重定向

<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id'/>
  <Route path='/users/profile/:id' component={Profile}/>
</Switch>

请求 /users/:id 被重定向去 '/users/profile/:id'：

• 属性 from: string：匹配的将要被重定向路径
• 属性 to: string：重定向的 URL 字符串
• 属性 to: object：重定向的 location 对象
• 属性 push: bool：若为真，重定向将会把新地址加入到访问历史记录里，且无法回退到前面的页面

Link、a

都是链接，都是标签

<Link>是 react-router 中实现路由跳转的链接，一般配合 <Route>使用，跳转 只会触发相匹配的 <Route> 对应页面内容更新，不会刷新all page

<Link>行为

1. 有onClick 就 onClick
2. click 时阻止a 默认事件
3. 根据to属性，使用histor 或 hash 跳转，跳转只是链接变了，没有all page 刷新，<a>是普通的超链接

<a> 禁用后咋实现跳转？

手动赋值给<a>标签 location 属性

let domArr = document.getElementsByTagName('a')
[...domArr].forEach(item=>{
    item.addEventListener('click',function () {
        location.href = this.href
    })
})

获取URL参数

• get 方法

this.props.location.search 获取 URL 得到字符串，解析参数，或者自己封装方法获取参数

• 动态路由传值

如 path='/admin/:id'，this.props.match.params.id 获取 URL中动态部分路由 id值，或者使用hooks的 API获取

• query 或 state传值

<Link>组件 的 to属性可以传递对象 {pathname:'/admin',query:'111',state:'111'}，this.props.location.state或 this.props.location.query 获取，一旦刷新页面 数据丢失

获取历史对象

• React>=16.8 ，使用 React Router的Hooks

import { useHistory } from "react-router-dom";
let history = useHistory();

• this.props.history

路由模式

• BrowserRouter

H5的history API控制路由跳转

• HashRouter

URl的hash 属性控制路由挑转

各端

微信小程序

不需下载安装即可使用，不用担心是否安装太多应用

原理

wxml、wxss、JS开发，本质是单页应用，所有页面渲染和事件处理都在一个页面进行，可通过微信客户端调用原生各种接口

架构时MVVM模式，视图UI和数据分离，所有更新通过数据变更实现

分为Webview 和APPService，Webview展现页面，APPService处理业务逻辑、数据及接口调用，通过系统层JSBridge实现通信，实现UI渲染和事件处理

小程序框架包含View视图层和APPService逻辑层，View层渲染页面，APPService用来 逻辑处理、数据请求、接口调用，他们在2个进程运行，具体实现在2个WebView运行

微信将所有视图加载到WebView(View层)；所有逻辑处理的JS全部加载到另一个WebView(APPService层)，每个小程序只有一个且整个生命周期常驻内存，JSBridge封装消息通信及通过App访问OS能力的实现，消息通信在不同平台调用相应方法通信，开发环境为window.postMessage

使用View层和APPService逻辑层实现双线程 的小程序运行方案，可将代码放入沙箱执行，对代码执行安全和管控

一个APP运行多个小程序，采用多线程方案执行，为了性能 也防止小程序间相互影响

和web端区别？

运行环境

• 微信小程序只能通过微信打开

• web项目可以通过多个终端的浏览器打开

项目规模

• 微信小程序一般是小应用级别的，大小限制为2M，否则上传不了审核
• Web项目可以支持大项目或者复杂的项目

开发语言

• 微信小程序是HTML＋CSS＋JS
• Web项目可以支持多种语言

开发工具

• 微信小程序有专门的微信开发者工具

H5

H5理解为一个网页，依赖外壳为浏览器

可在微信 微博 qq 及所有浏览器使用，没有平台限制

修改内容后可直接发布，不需审核

开发容易

开发高 (分配一种开发人员即可)

跨平台分享（所有浏览器、及微信等嵌有浏览器功能产品），快速迭代

App

三条主线：iOS Android H5跨平台混合开发

前两者成为Native开发，后者为Hybrid开发

开发语言分别 Object-C java HTML5

others

当你有了技术深度，很可能也同时有了技术广度 (opens new window)

babel

ESLint

识别ECMAScript，按照规则给出报告的代码检测工具，避免低级错误和统一代码的风格。有效控制项目代码的质量

ESLint 提供了根据 AST 节点拿到它的 token 信息的 api，比如块语句可以拿到 { 的 token 信息，也就是所在的行列号等

区别

Babel 插件和 ESLint 插件至少两处不同：

• ESLint 通过 api 拿到 AST 关联的 token 信息，检查出格式问题， Babel 插件不行
• ESLint 自动 fix 修改代码通过字符串替换实现，Babel 通过递归打印修改后的 AST 为字符串

puppeteer

基于 CDP 实现，就是调试模式跑了一个 Chromium，连上 CDP 远程控制

• 生成页面 PDF
• 抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））
• 自动提交表单，进行 UI 测试，键盘输入等
• 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试
• 捕获网站的 timeline trace (opens new window)，用来帮助分析性能问题
• 测试浏览器扩展

TS

是JS的强类型版本，编译时去掉类型和特有语法，生成纯粹的JS代码，最终运行的还是JS，TS不依赖浏览器支持，也没有兼容性问题

支持所有的JS语法，在此之上对JS做了扩展，提升可阅读性

更易阅读和理解代码

UmiJs

主要解决了什么问题？

webpack打包问题

因为简化了很多webpack打包问题

路由跳转问题

微前端

微前端的前世今生 (opens new window)

微服务

早期软件所有功能都写在一起，称为 单体架构，整个软件是单一的整体(类似 一体化的机器)，软件功能越多，单体架构越复杂，缺点暴露

• 功能耦合，互相影响
• 修改一行代码，软件需要重新构建和部署，成本高
• 软件做成了整体，不可能每个功能单独开发和测试，只能整体开发和测试，导致必须 采用瀑布式开发模型

面向服务架构(SOA) 将一个大型的单体程序，拆分成一个个独立服务，每个服务都是一个独立的功能单元，承担不同功能，服务之间通过通信协议连接

优点

1. 服务功能单一，类似一个小型软件，便于开发和测试
2. 服务独立运行，简化架构，提高可靠性
3. 鼓励 支持代码复用
4. 单独开发和部署，便于升级
5. 扩展性好
6. 不容易出现单点故障

微服务——采用容器技术的面向服务架构

微服务轻量级实现，不需要新增服务器，只需要新建 容器(一个进程)，所以叫做 "微服务"

因为 微服务 更加轻量级，所以 功能解耦和服务化 可以更彻底

低代码

减少编码时间，把更多时间经历用在网站体验，设计中

零代码基础也可轻松构建web页面

• 上手快，开发效率高
• 无需考虑学习成本带来的负担
• 页面可视化的加持，布局、设计、UI尽在掌握

拖拽的方式 在最短时间内实现最初想法/设计

实现

• 快速完成静态页面布局
• 确定能够被拖拽的组件有哪些，以及它们的存在方式是什么
• 选择一种适用于各组件间进行通信的方式
• 实现拖拽
• 渲染被拖拽组件
• 确保组件属性更改后可以实时映射至画布区域

所见即所得

技术服务于业务

WebGL

Web图形库 是一个JS API，可渲染高性能的交互式 3D 和2D图形，无需插件

WebGL引入一个与 OpenGL ES 2.0非常一致的 API 做到这一点，该 API 可在HTML5 <canvas>元素中使用，一致性使 API 可以利用用户设备提供的硬件图形加速

光栅Raster

图形系统基于光栅 绘制图形，光栅 指构成图像的像素矩阵

像素Pixel

一个像素对应图像上一个点，通常保存图像上某个具体位置的颜色

帧缓存Frame buffer

绘图过程，像素信息被存放在帧缓存中，帧缓存是一块内存地址

GPU由大量的小运算单元构成，每个运算单元只负责处理 很简单的运算，每个运算单元 彼此 独立，因此 所有计算 可并行处理

Web2.0

web2.0——用户主动获取并产生内容

web1.0——由系统向用户展示内容

web3.0——个性化内容的获取

比如新浪就是1.0，你上它的网站，它放了很多新闻给你看

比如google是2.0，你跟它说我要搜索最近新上映电影的信息

微博是2.0，因为它是是由用户编写的内容

豆瓣是3.0，它根据你一贯听歌的口味向你推荐你可能喜欢的歌曲

再举个通俗的例子

你去饭店，服务员把菜单放在你面前说：我们今天提供番茄炒蛋，你吃不吃？这是web1.0

你去饭店跟服务员说：我要番茄炒蛋，不要番茄只要蛋，少放盐，这是web2.0

你去饭店，服务员说：这位爷，您经常来咱们饭店，根据您以往的点菜习惯，我们向您推荐我们的最新菜肴番茄鸡蛋炒牛肉。这是web3.0

CI/CD

持续集成、持续交付、持续部署

作用——开发阶段引入自动化频繁向用户交付应用

让持续自动化和持续监控贯穿于应用的整个声明周期(集成到测试，交付和部署)

没必要纠结语义，就是一个路程，实现应用开发的高度持续自动化和监控

树莓派

信用卡大小的微型电脑，基于LInux

别看外表“娇小”，内“心”却很强大，视频、音频等功能皆有，麻雀虽小，五脏俱全

树莓派就是一台主机，可外接显示器，键盘鼠标，u盘等外设，它体积小，有很多串口和外接的口，可直接调用很多底层硬件

React Native、Flutter

个人玩玩就RN，轻量级产品化Flutter，深度产品化原生

• RN

RN是Facebook 的 跨平台 移动应用 开发框架——React 在原生移动应用平台的衍生产物，支持 iOS 和安卓。 RN使用JSX、CSS开发移动应用

• 开发体验好，统一代码规范，无需关注移动端差异

• 开发成本低，开发一次，支持Android和iOS

• 学习成本低，掌握JS和React即可

• 不成熟，项目版本更新维护频繁

• 试错成本高，问题解决方案少

• 性能不如原生

• 兼容性，涉及底层需要针对Android和iOS单独开发

• Flutter

有Dart基础

• uniapp

有vue基础

Linux

• 常用指令

rimraf 删除文件/文件夹（没想起还有这个指令）

ls 查看文件夹包含文件

pwd查看当前工作目录路径

rm删除文件

which查找某个文件的位置

ps查看运行进程状态

kill结束进程

chromd 控制用户对文件权限的控制

cat 显示文件信息

apt-get 安装软件包

洋葱模型

koa和redux

WebRTC

实时通讯技术，允许网络应用/站点，在不借助中间媒介的情况下，建立浏览器之间点对点的连接，实现视频流/音频流/其他任意数据的传输

WebRTC包含的标准使用户在无需安装任何插件/第三方软件的情况下，创建点对点的数据分享和电话会议成为可能

应用场景

• 直播
• 游戏
• 视频会议/在线教育
• 屏幕共享/远程控制

网速和硬件越来越好的趋势下，WebRTC'有无限可能

元宇宙

我们在虚拟世界中与一个全新的身份一一对应，并且不会间断地“生活下去”