首页
题库
公司真题
专项练习
面试题库
在线编程
面试
面试经验
AI 模拟面试
简历
求职
学习
基础学习课
实战项目课
求职辅导课
专栏&文章
竞赛
我要招人
发布职位
发布职位、邀约牛人
更多企业解决方案
AI面试、笔试、校招、雇品
HR免费试用AI面试
最新面试提效必备
登录
/
注册
adldlr
中南大学 前端工程师
发布于北京
关注
已关注
取消关注
@阿珊和她的猫:
前端面试必备 | 设计模式篇(P1-10)
1. 什么是设计模式,为什么需要它们? 设计模式是针对特定问题的经过反复验证的解决方案,在软件开发领域被广泛应用。 它是对软件结构、行为或交互等方面的一种通用思路和最佳实践总结,是对编程过程中反复出现的问题所提取出来的公共解决方案。 需要设计模式的原因在于 首先,它能够提高代码重用性,能够快速构建出相似功能的代码。 其次,设计模式能够将代码进行模块化分解,更加易于维护和扩展。 此外,设计模式能够提高程序的可读性和可靠性,让程序员能够更好地理解和应对各种场景下的问题。 总结起来,设计模式不仅能够提高软件开发的效率和质量,还能够降低开发成本并减少出错机会,因此被广泛应用于软件开发过程中。 2. 可以列举几个常用的前端设计模式吗? MVC模式 - 将应用程序分为三个组件:模型(数据处理)、视图(UI)和控制器(逻辑层)。 MVVM模式 - 将MVC中的控制器分为绑定器和视图模型两部分,使视图与数据绑定更简单。 观察者模式 - 当被观察对象状态改变时通知所有观察者。 工厂模式 - 通过工厂类创建对象,避免使用new关键字直接创建对象。 单例模式 - 确保只有一个实例存在的设计模式。 装饰器模式 - 动态地向对象添加新的行为,同时保持与原始类的接口兼容性。 适配器模式 - 允许不兼容的接口之间进行通信。 3. 简述MVC、MVVM和MVP模式各自的特点和用途。 MVC、MVVM和MVP都是常见的软件架构模式,用于组织和管理应用程序的代码。 它们在不同的上下文中有着各自的特点和用途。 MVC(Model-View-Controller)模式是最早提出的一种软件架构模式。它将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。模型负责数据的存储和处理,视图负责展示数据给用户,控制器协调模型和视图之间的交互。MVC模式的优点是清晰的分离关注点,提高了代码的可维护性和可测试性。 MVVM(Model-View-ViewModel)模式是基于MVC模式演变而来的,最早由微软的WPF框架推广。它引入了一个视图模型(ViewModel)层,负责处理视图和模型之间的通信。视图模型通过双向数据绑定将视图和模型关联起来,当模型数据发生变化时,视图会自动更新。MVVM的优点是提高了代码的可维护性和可测试性,减少了视图和模型之间的耦合。 MVP(Model-View-Presenter)模式也是基于MVC模式演变而来的,常用于Android应用程序开发。它将视图和模型分离,并引入了一个中间层Presenter。Presenter负责处理视图和模型之间的交互,将视图的用户操作转发给模型进行处理,并将模型返回的数据更新到视图上。MVP模式的优点是解耦了视图和模型之间的关系,提高了代码的可测试性和可维护性。 总的来说,MVC、MVVM和MVP都是常见的软件架构模式,用于组织和管理应用程序的代码。选择哪种模式需要根据具体的应用场景和需求来考虑,以最适合项目的方式进行开发。 4. 在实际项目中常用的设计模式?请列举一下应用场景。 在实际项目中常用的设计模式有如下几种: 单例模式(Singleton):应用于需要保证全局只有一个实例的情况,例如数据库连接池、线程池。 工厂模式(Factory):应用于创建对象实例的场景,隐藏实际创建逻辑,提供一个统一的接口。 观察者模式(Observer):应用于一对多的依赖关系,当一个对象状态发生改变时,其依赖的对象会自动进行更新。 适配器模式(Adapter):应用于将一个类的接口转换成客户端所期望的另一种接口,常用于旧代码的升级与兼容。 策略模式(Strategy):应用于根据不同的策略做出不同的处理,例如支付方式的选择、排序算法的选择等。 装饰器模式(Decorator):应用于为对象动态添加额外的功能,而不需要修改其原始代码。 模板方法模式(Template Method):应用于定义算法的骨架,将一些步骤的具体实现延迟到子类中。 命令模式(Command):应用于将请求封装成具体的对象,使得可以用不同的请求对客户进行参数化。 迭代器模式(Iterator):应用于提供一种方法来访问一个容器对象中的各个元素,而无需暴露其内部结构。 组合模式(Composite):应用于将对象组合成树形结构以表示部分-整体的层次结构,使得用户对单个对象和组合对象的使用具有一致性。 5. 解释一下单例模式的原理及在前端开发中的应用。 单例模式是一种常见的设计模式,用于限制一个类只能创建一个实例,并提供全局访问该实例的方法。 它的核心思想是通过对类的实例化进行控制,确保只能创建一个实例。 这样可以避免多次实例化相同类造成资源浪费的问题,并且能够方便地在不同的代码模块间共享该实例。 在前端开发中,单例模式有以下应用场景: 全局状态管理:单例模式可以用于创建全局的状态管理对象,比如Vuex在Vue.js框架中就采用了单例模式。通过单例模式,我们可以在整个应用中共享和管理全局的状态,方便不同组件之间的数据通信和状态同步。 缓存管理:单例模式也可以用于实现缓存管理的功能。比如,通过一个单例对象来缓存已经请求过的数据,可以在再次需要时直接从缓存中获取,避免重复请求网络资源。 数据共享:在多个页面或组件之间需要共享数据的情况下,可以使用单例模式将数据存储在一个共享的对象中,实现数据的跨页面或跨组件共享。 工具类的创建:有些特殊的工具类只需要一个实例即可,可以使用单例模式保证在整个应用中只有一个实例存在,避免重复创建。 总的来说,单例模式的原理是通过限制一个类只能创建一个实例,来实现全局共享的效果。在前端开发中,单例模式常用于全局状态管理、缓存管理、数据共享和工具类的创建等场景,以提高应用的性能和代码的维护性。 6. 如何在React中实现观察者模式? 在React中实现观察者模式可以借助React提供的Context API来实现。下面是一个简单的示例: 首先,创建一个Observer组件,它将负责存储观察者的列表,并提供注册和通知的方法: import React, { createContext, useContext, useState } from 'react';// 创建一个观察者上下文const ObserverContext = createContext();// 观察者组件const Observer = ({ children }) => { const [observers, setObservers] = useState([]); // 注册观察者 const registerObserver = (observer) => { setObservers((prevObservers) => [...prevObservers, observer]); }; // 通知观察者 const notifyObservers = (data) => { observers.forEach((observer) => observer(data)); }; return ( <ObserverContext.Provider value={{ registerObserver, notifyObservers }}> {children} </ObserverContext.Provider> );};// 使用观察者的自定义钩子const useObserver = () => useContext(ObserverContext);export { Observer, useObserver }; 然后,在需要使用观察者模式的组件中,可以通过useObserver钩子来注册观察者并接收通知: import Reac
点赞 4
评论 3
全部评论
推荐
最新
楼层
暂无评论,快来抢首评~
相关推荐
不愿透露姓名的神秘牛友
06-01 22:45
财富贫穷的真相是精神上的贫穷
不知道从何时起,和上一辈人的交流开始变的,愈发的困难了。负面的,质疑的,居高临下的,道德绑架的词汇,本质上是在不断汲取我的情绪价值。 任何新奇的交流,都会变成辩论大赛,为什么有用?不会是骗局吧?那可能这样。 我开始总结这些思维背后的东西。我想起来,从前接触的哪些人和事。我发现,一个人是不是富有,或者有所成就,其实并不依赖,是否聪明绝顶,是否是某二代等等。 精神上的富有,最终在大数定律的作用下,一定最终会走向财富上的富有,爱情上的富有,事业上的富有。 那么什么又是精神上的贫穷?本质上这类人都出生到死亡,都在拒绝任何可能。在拒绝可能的同时,也在拒绝成长和任何潜在的机会,在一次又一次的拒绝和自我认知...
牛客创作赏金赛
写给毕业5年后的自己
点赞
评论
收藏
分享
昨天 17:39
东南大学 Java
京东云事业部一面
面试官先问我数学建模竞赛做了什么,使用了什么方法,面了这么多第一次遇到问竞赛的然后就是一些常规八股,问了我项目中遇到的最大的困难还问我java和python的区别,各有什么优缺点,说是他们部门主要写python,也有java另外还是两个面试官面的,一共面了半个小时,面完后马上发二面了
查看3道真题和解析
实习进度记录
点赞
评论
收藏
分享
05-21 20:27
华南理工大学 Java
9本无面试
大部分投的是小厂,几个中厂,基本已读不会。有几个小厂沟通了,综合下来发了5份简历,然后就没有回复了。怎么办,是不是完蛋了。补充: 算法进度:刷完了代码随想录 八股进度:刚开始背3天
求面试求offer啊啊啊啊:
小厂知道你不会去,可能不理你
学历or实习经历,哪个更重要
找工作,你会甘心进小厂还是猛冲大厂
点赞
评论
收藏
分享
04-15 19:46
门头沟学院 Java
26届双非二本鼠鼠还有救没有
投累了 是不是简历有问题
点赞
评论
收藏
分享
05-30 15:27
门头沟学院 Java
广州小厂(实习)
几乎不拷打八股文,一直扣项目笔试面试笔试问题:笔试涵盖 springboot,mysql,vue,js,系统优化,线上问题排查面试问题:介绍项目实现哪些功能项目分为哪些用户端在功能上项目还有哪些优化点(一直想从技术的角度,从性能的角度去回答这个问题,但是面试官认为更想要听到的是功能方面的添加,优化)一个大屏存放图表,如何设计数据库(随之拓展到数据库的多对多设计,这里前面没有问好具体场景,导致逻辑错乱回答的不是很好,索性后面是根据面试官的提示全回答出来了。)分表的意义,为什么分表分表具体的实现思路 一个Excel 文档一个100个字段,一个 10 字段如何去实现分分表表格有1万个字段 你如何去拼...
查看10道真题和解析
点赞
评论
收藏
分享
评论
点赞成功,聊一聊 >
点赞
收藏
分享
评论
提到的真题
返回内容
全站热榜
更多
1
...
我被光速开除了……
1.2W
2
...
字节last day,知无不言!
4042
华为开奖进度👉
热聊中
3
...
找实习三个月,感觉已无心气
3959
4
...
字节暑期捡漏!附面经
3841
5
...
分享我的秋招之路(2025届版)
3541
6
...
作为面试官,比较喜欢听到「实习收获」回答是什么样的?
3284
7
...
🐧应届生选offer防踩坑指南:为什么"有鹅选鹅"是当前最佳策略?
3021
8
...
你的经历比较单薄, 但简历又弥补了这一点--双非仔个人简历分享
2410
9
...
只有收到offer那一刻是开心的
2230
10
...
中金所一面
2221
创作者周榜
更多
正在热议
更多
#
晒一晒你的工位
#
76233次浏览
250人参与
#
24届的你们现状如何了?
#
69168次浏览
399人参与
#
写给毕业5年后的自己
#
8004次浏览
138人参与
#
电网笔面经互助
#
33098次浏览
331人参与
#
职场捅娄子大赛
#
339909次浏览
3429人参与
#
实习中的菜狗时刻
#
357668次浏览
3268人参与
#
今年形式下双非本找得到工作吗
#
137301次浏览
1040人参与
#
我的第一份实习怎么找的
#
101867次浏览
1001人参与
#
工作压力大怎么缓解
#
77780次浏览
925人参与
#
想给25届机械人的秋招建议
#
26424次浏览
219人参与
#
机械人,你的秋招第一份简历被谁挂了
#
137724次浏览
1972人参与
#
入职第三天,晒晒你的工位
#
30438次浏览
144人参与
#
25届非技术实习投递记录
#
116287次浏览
969人参与
#
实习必须要去大厂吗?
#
95192次浏览
1337人参与
#
你最满意的offer薪资是哪家公司?
#
25269次浏览
129人参与
#
面试被问期望薪资时该如何回答
#
248410次浏览
1444人参与
#
腾讯求职进展汇总
#
831951次浏览
8828人参与
#
请用你的专业向妈妈表白
#
15840次浏览
111人参与
#
选完offer后,你后悔学机械吗?
#
28652次浏览
157人参与
#
你的秋招第一场笔试是哪家
#
129274次浏览
1404人参与
牛客网
牛客企业服务