花总的学习笔记 2022.05.07

codeDreamer_花芽
233 阅读10分钟

💡 每周一篇前端同学可能会用到的综合知识，积跬步，行千里，祝大家有所收货，能拿到满意 offer 🌱🌱🌱

⛺️ 项目

一般来说，好的面试都是围绕着自己做过的项目来展开。回答采用 STAR 原则

项目名称：XXX IM SaaS 产品

项目概述：在XXXX团队, 主要是做 IM SaaS 产品更新和维护, 帮助长尾商家入住，搭建起商家和

客户的沟通桥梁。

项目难点：该项目是一个 4 年的项目，技术栈比较老，业务模块强耦合，编译打包速度较慢。

技术选型：React + AntD + 乾坤微应用。

主要职责：负责应用框架模块的拆分，以及里面的知识库、机器人自助等前端模块。

项目成果：把项目的各个模块拆分成独立的微该用，进行技术栈的迭代升级和各个模块的独立开发

维护，最终模 块的体积只有以前的 1/6 ，编译和打包速度都有显著提升(50s - 5s)，

秒开率从 60% 提升 80% 左右，浏览体验全面升级。

📝 手写代码

JS 手写题，平时慢慢积累

**手写 const
**实现 const 的关键在于 Object.defineProperty() 这个 API，这个 API 用于在一个对象上增加或修改属性。

通过配置属性描述符，可以精确地控制属性行为。

Object.defineProperty() 接收三个参数 Object.defineProperty(obj, prop, desc)。

在 desc 里设置 writable: false

function _const(key, value) {    
    const desc = {        
        value,        
        writable: false    
    }    
    Object.defineProperty(window, key, desc)
}
    
_const('obj', {a: 1})   //定义obj
obj.b = 2               //可以正常给obj的属性赋值
obj = {}                //无法赋值新对象

\

💡 TypeScript

类型体操练起来

ts 中的访问修饰符有哪些？

  • public 任何地方
  • private 只能在类的内部访问
  • protected 能在类的内部访问和子类中访问
  • readonly 属性设置为只读

\

🔃 React

有一个自己深入理解的开发框架，源码也需要懂

react.createElement 的用法 ?

React.createElement( type, [props], [...children]) 参数：

  • 第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。
  • 第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。
  • 其他参数：依次为 children，根据顺序排列。

老版本的 React 中，为什么写 jsx 的文件要默认引入 React?

答：因为 jsx 在被 babel 编译后，写的 jsx 会变成上述 React.createElement 形式，所以需要引入 React，防止找不到 React 引起报错。

\

🎢 算法

算法与数据结构，多练，找题感

leetcode 206. 反转链表

题目描述： 给你单链表的头节点 head ，请你反转链表，并返回反转后的链表

示例：

输入： head = [1,2,3,4,5]

输出： [5,4,3,2,1]

题目解析：反转链表属于链表的常规操作

示例代码：

/**
 * @param {ListNode} head
 * @return {ListNode}
 */
var reverseList = function(head) {
    let p1=head;
    let p2=null;
    while(p1) {
        const temp = p1.next;
        p1.next=p2;
        p2=p1;
        p1=temp;
    }
    return p2;
}

\

🎓 设计模式

设计模式的实战应用

几个常用的设计模式：

设计模式描述例子
单例模式一个类只能构造出唯一实例Redux/Vuex的store
工厂模式对创建对象逻辑的封装jQuery的$(selector)
装饰器模式对类的包装，动态地拓展类的功能React高阶组件、ES7 装饰器、Redux
适配器模式兼容新、旧接口，对类的包装封装旧API、axios
代理模式控制对象的访问事件代理、ES6的Proxy、
策略模式对象映射的方式针对多个 if-else 的场景的封装、抽离
状态模式状态-行为映射为主体类对应实例的一个属性咖啡机 - 各个口味的咖啡
观察者模式当一个对象被修改时，会自动通知它的依赖对象Redux的subscribe、Vue的双向绑定
发布订阅模式发布者 - 调度中心 - 订阅者
迭代器模式遍历 Iterator

\

📈 性能优化

优化开发过程中的每一个细节

🎯 工程化

编译、打包、部署

webpack 常见的 Loader ?

  • file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
  • url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体)
  • source-map-loader：加载额外的 Source Map 文件，以方便断点调试
  • svg-inline-loader：将压缩后的 SVG 内容注入代码中
  • image-loader：加载并且压缩图片文件
  • json-loader 加载 JSON 文件（默认包含）
  • handlebars-loader: 将 Handlebars 模版编译成函数并返回
  • babel-loader：把 ES6 转换成 ES5
  • ts-loader: 将 TypeScript 转换成 JavaScript
  • awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
  • sass-loader：将SCSS/SASS代码转换成CSS
  • css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
  • style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
  • postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
  • eslint-loader：通过 ESLint 检查 JavaScript 代码
  • tslint-loader：通过 TSLint检查 TypeScript 代码
  • mocha-loader：加载 Mocha 测试用例的代码
  • coverjs-loader：计算测试的覆盖率
  • i18n-loader: 国际化
  • cache-loader: 可以在一些性能开销较大的 Loader 之前添加，目的是将结果缓存到磁盘里

\

🔍 浏览器

所有与用户交互的界面，都值得好好研究

介绍一下前端缓存？

前端缓存也可以直接看作是 HTTP 缓存 和 浏览器缓存 的结合，两者是相辅相成的关系。
HTTP 缓存是产生于客户端与服务器之间通信的一种缓存，利用这一缓存可以提升服务器资源的重复利用率，在有效的时间内不必每次都向服务器请求相同的资源，大大减少服务器的压力；而浏览器缓存则是浏览器提供的一种缓存机制，可以将服务器资源和网页访问产生的临时数据缓存到内存或本地，提升客户端的加载速度。

✨ 网络

网络链接的建立与传输

介绍一下 网络 OSI 七层模型？

\

📖 产品思维

写好代码的同时，也学学产品逻辑

如何冷启动一个新产品？

知识点： 考察你对新产品的设计经验，评估你从0-1搭建产品的能力。

分析： 首先要谈下自己对新产品冷启动的理解，之后再结合自己的工作经历，谈下自己对新产品冷启动核心流程的理解。

参考答案：

首先，我认为，冷启动是指一个没有用户的新产品到有用户的过程。

其次，冷启动一个产品设计我觉得最重要的工作，主要有 “产品调研”、“需求收集”、“MVP模型设计”、“运营迭代” 。

关于产品调研：

我觉得主要是从产品角度，针对新产品的业务场景、用户痛点、产品价值等方面进行可行性分析，这个阶段要论证产品的可行性，输出产品立项报告。

关于需求收集：

是针对已经论证通过的产品设计，通过一些产品方法，将高层级的需求进行详细收集与细化的过程，比如，竞品分析、现场调研等方法，这个阶段一般会输出需求收集分析报告。

关于“MVP模型设计”：

第三个核心工作点，我认为其实就是“产品功能设计”，但是因为是冷启动的新产品设计，我们一般会采用“MVP模型”进行最小化的产品设计， 以便进行市场试错。这也是我在进行多个从0-1产品设计时的重要经验，因为产品方向把控有偏差，后面会产生很大的沉默成本。

关于“运营迭代”：

第四个工作就是运营迭代，根据市场反馈，快速完善丰富产品功能，修复已知问题，以及提升用户体验性设计。

\

😀 演讲

费曼：脑子里的知识讲出来才是自己的

准备演讲前必须先判断演讲任务的场景和目标，是去为公司秀肌肉提升技术影响力、给产品做广告、还是吸引人才？

\

👨 HR 面

入职的最后一道关口。需要从职位匹配度、入职意愿、谈钱、口才等多个维度准备

你未来的职业规划是什么？

面试官问这个问题的目的：

看你这个人定位清不清晰，能否在公司长久的干下去。所以你千万不要说学点本事，出去创业神马的。

想知道你这个人做事是否有规划，有自己的处事原则。

看你和公司的规划是否一致，如果一致，会有可能把你列为候选人才培养。

正确回答：我在三年内会一直留在这里（就算你不留，你也要瞎掰），发展成为高级产品经理，在锻炼自己的同时，也为公司创造价值，带来收益。

🤼 劳动法

懂点劳动法关键时候保护自己

Tips：最近裁员的消息很多，在尽可能的前提下保护自己的合法权益。在绩效、人事、主管沟通过程中记得录音，上班的记录等。

换个视角:

还得看自己做的事情到底有没有价值。如果对自己做的事情心里是有谱的，安全系数就会高很多。另外如果真的大批裁员，说明整个社会的经济已经差到一定程度了，现在还远不至于那么糟。

有些裁员我觉得是喊的响，可能真正裁的并没有喊的那么多，可能把一些自然流失，也都当成了裁员。

大家肯定会有担心，但不要过分焦虑，还是要看团队和自己做的事情是不是有价值，自己在团队中的贡献，要相信没有一家公司会把有价值的人裁掉。同时也需要更加进一步提升自己的技能。祝好。

🌠 工具推荐

好的开发工具，提升工作效率

偷偷刷题，在 vscode 里使用 LeetCode 插件，摸鱼刷题爽歪歪。

刷高频题：codetop.cc/login

💰 投资理财

你不理财，财不理你。打工是不可能一辈子打工的

20220505

美联储5月议息会议 - 加息0.5% 6月开始缩表

4月PMI数据：

制造业 -> 47.4% （-2.1%）
非制造业 -> 41.9% (-6.5%)

两个主要结论：

1：各项指标全面走差，核心变量仍然是疫情

2：价格回落，二次滞涨的风险有机会通过经济衰退的方式解决

需求侧：需求不振，出口逐级回落

新订单： 48.8% -> 42.6%

新出口订单：47.2% -> 41.6%

供给侧：所有指标大幅下行

生产： 49.5% -> 44.4%

从业人员：48.6% -> 47.2%

采购量：48.7% -> 43.5%

进口：46.9% -> 42.9%

库存：48.9% -> 50.3% 企业被动补库存

结合需求、供给以及库存数据来看， 4月份仍然维持3月份供需两弱、库存积累的趋势，而且更加严重。

主要原材料购进价格指数 66.1% -> 64.2%

出厂价格指数：56.7% -> 54.4%

证明当下需求疲弱，已经开始影响到上游价格，正在寻顶过程中。

必选消费品则在寻底过程中，后续可看好。

从企业规模来看，大中小型企业 PMI 均出现回落。

总结一下：由于疫情扩散影响，4月份的PMI 延续3月份的PMI 趋势，继续大幅下行。

指数级别的机会仍要等疫情缓和。

看多大盘价值股：上证50、上证300

看空小盘制造业：中证500、中证1000、国政2000

\

🧘‍♀️ 杂谈

可能是鸡汤

程序员最大的有点就是能思考、学习。最大的缺点就是很难把一个事情讲明白。

解决办法：

费曼学习法 -> 学习感兴趣的事情，多想、多总结（笔记+记忆），然后写出来，讲出来（进行大量的练习）

avatar
文章
阅读
粉丝