前端，通过面试去学习，理论知识（面向对象、设计模式、模块化、组件化、算法、开关、灰度开关、前端埋点、前端异常处理、安全问题）

最新推荐文章于 2024-06-13 16:18:04 发布

IronKee

最新推荐文章于 2024-06-13 16:18:04 发布

阅读量520

点赞数 1

文章标签：前端面试算法

本文链接：https://blog.csdn.net/IronKee/article/details/122236053

版权

理论知识

最近的面试中，面向对象和设计模式都有被问到，包括算法的话，这一部分可以说在大家平时开发业务的过程中不怎么涉及，针对开关、灰度开关如何处理、埋点、前端异常处理等也有被问到，大家或多或少都有接触，但可能只是用，面试不知道该如何去讲，试着整理一下

面向对象

这个就很难回答，我面试的时候，因为没有准备面向对象，被问到了只能现想现说，回忆当初培训java背的面向对象OOP三大特性，封装、继承、多态…

面向过程编程 vs 面向对象编程

可以结合面向过程编程，和面向对象编程对比，去理解面向对象编程
举个不怎么恰当的栗子，做饭吃饭刷碗
面向过程编程是，执行做饭方法，执行吃饭方法，执行刷碗方法
面向对象编程是，先创建对象人、刷碗机，执行人.做饭，人.吃饭，刷碗机.刷碗
面向过程编程是把解决问题的过程拆成一个个方法（是没有对象去调用的），通过一个个方法的执行来解决问题
面向对象编程是先抽象出对象，然后用对象执行方法的方式解决问题

现实服务端开发中，比如优惠券有基础属性券面额、券规则、券可用日期等，优惠券又有很多种，满减券、打折券、无敌券等等，那么可以先创建一个优惠券基础类，再创建满减券类、打折券类分别继承优惠券基础类，这样得到了优惠券基础类的属性，再各自实现自己的满减金额、打折折扣数等特有属性，这就是继承和多态吧，封装的话借助private关键字

前端开发，比如领券中心，前端通过接口拿到优惠券List数据后，渲染到页面是循环遍历取coupon.属性展示，优惠券的一些功能，比如领券、去使用、查看可用商品等，更多的都是功能，调接口或者跳转，去实现这些功能和用户需求，我觉得这部分依然是面向过程开发，并没有面向对象的思想
如果是用typescript开发，那确实需要用到面向对象，调取接口拿到优惠券列表，就需要指定优惠券的属性，需要用interface或者class定义好数据结构再去开发
另外就是前端要实现封装不容易，继承的话可以借助原型继承，构造函数继承等前端中的面向对象编程（二篇）：面向对象的相关实现

写不下去了…参考 2分钟让你明白什么是面向对象编程

设计模式

面试时候尽可能讲讲单例模式，工厂模式，发布订阅模式吧
前端领域中的设计模式（一）
前端领域中的设计模式（二）
发布订阅模式与观察者模式

算法

算法渣…
十大经典排序算法总结（JavaScript描述）
前端算法渣的救赎之路

模块化、组件化

扯一扯我对模块化和组件化的理解，两者不是一个东西，但也容易混淆

模块化
我理解就是一个功能，这个功能很多地方用到，可以复用，比如电商商城，首页下面的推荐商品有加车icon，商品详情页有加车按钮，订单列表和详情有再次购买，每个地方都需要加车，但样式又不一样，有的是icon图标，有的是文字按钮，但是都用到了加车方法，那么加车方法我们就可以提取成一个公共的addCart.js，需要用到的地方引入addCart.js，调用addCart.js中提供的方法即可。

组件化，这个比较好理解，毕竟现在都是组件化开发，比如购物车当成一个容器，顶部是地址组件，中间是店铺+商品组件，底部是结算组件，每个组件独立开发，最后组合到一起。当然组件也可以复用，比如商品详情页也有用到地址组件，很多页面都有用到领券组件，去结算、提交订单、领券都会用到风控组件，这种整个项目级别的组件在前期开发的过程中就要做好规划，做成公共组件。

模块化相比组件可能颗粒化更小，模块化侧重功能的封装，主要是针对js代码，隔离、组织复用的代码，将它封装成一个个具有特定功能的的模块。
组件化更多关注的UI部分，页面的每个部件，比如头部，内容区，弹出框甚至确认按钮都可以成为一个组件，每个组件有独立的HTML、css、js代码，是个功能完整的页面中的一个模块（此模块非上面的模块化…）

开关、灰度开关

如果是服务端开发提问，可能会问这个问题

为什么需要开关，一般新功能、重要功能会加开关，比如影响到主流程的结算、新增支付方式等

目前我们这边开关是做在一个配置文件（具体我不清楚），服务端查开关配置文件，一般是随页面主接口再返回给前端，这样可以做到，如果新功能上线出问题，只需要修改配置文件，服务端也不用发版即可降级
灰度开关，应该是针对部分用户放开新功能，比如要测试一个新功能是否稳定，一开始放开10%的用户使用，逐步增加到30%、50%，一般我们是根据用户会员编码尾号，比如放开10%，那针对用户编码尾号为6的放开，大概是10%

前端埋点、前端异常处理

埋点问题也有被问到两次，也都是服务端开发问的，简单整理一下

我接触过的埋点有曝光埋点，点击埋点，接口异常埋点
曝光埋点，比如页面商品曝光，当商品进入可视化区域进行发送埋点，有专门的埋点js处理这个逻辑，我们只需要在dom的class中加上autoexpo
点击埋点，则是用户点击操作，行为发生，我们调用埋点js提供的方法，传参，发送埋点
接口异常埋点，一般是接口报错，或者接口没有给到相应数据，或者接口返回报错文案，前端同样是调用埋点js提供的方法，汇整errorDetail，进行发送接口异常埋点

美团点评前端无痕埋点实践

前端异常处理

try-catch 只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到
window.onerror
window.addEventListener
Promise Catch

如何优雅处理前端异常？(史上最全前端异常处理方案)
浅谈前端中的错误处理
 前端异常监控window.onerror unhandledrejection

安全问题

安全问题暂时没有问到，XSS攻击，CSRF攻击需要知道
另外就是了解一些加密方法，还有JWT，json web token

XSS 和 CSRF
XSS及CSRF攻击防御
 XSS 和 CSRF简述及预防措施

常用的加密方式有MD5 Base64 AES RSA等
之前项目有用到AES和RSA，应该是去年有个政策，不允许明文传输用户的手机号，才接入的
– RSA加密，前端结合JSEncrypt

import { JSEncrypt } from 'jsencrypt'
 
// 加密公钥
const key = `----`
 
// 加密
export function setEncrypt (msg) {
  const jsencrypt = new JSEncrypt()
  jsencrypt.setPublicKey(key)
  return jsencrypt.encrypt(msg)
}
 
// 解密私钥
const privateKey = `---`
 
// 解密
export function decrypt (msg) {
  let decrypt = new JSEncrypt()
  decrypt.setPrivateKey(privateKey)
  var decryptMsg = decrypt.decrypt(msg)
  return decryptMsg
}