首页
题库
公司真题
专项练习
面试题库
在线编程
面试
面试经验
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
全部评论
推荐
最新
楼层
暂无评论,快来抢首评~
相关推荐
05-29 20:21
中南大学 C++
211硕士Offer抉择:一个延续传统存储一个高薪FreeRTOS怎么选?
今天给大家分享的是一位粉丝的提问,211硕士Offer抉择:一个延续传统存储一个高薪FreeRTOS怎么选?接下来把粉丝的具体提问和我的回复分享给大家,希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问: 老师您好,我是211的计算机硕士研究生,入职大厂不满一年后被优化了。在大厂主要是做安卓AOSP的存储业务。找了半个月的工作,目前有两个offer,一个是继续去大厂做Linux应用层存储相关的业务,另外一个是做freertos扫地机器人相关业务,后者工资更高,不知道应该怎么选择,是否能用两个大厂的背景外加自学分布式存储相关的知识跳槽到更高的平台。还是放弃存储,去选择薪资更高的offer。本...
投递字节跳动等公司9个岗位 >
计算机就业职业规划辅导
点赞
评论
收藏
分享
05-27 22:02
哔哩哔哩_游戏算法工程师(准入职员工)
哔哩哔哩内推bilibili内推
不知不觉已经在哔哩实习马上一年了,实话实说哔哩实习的体验感真的蛮好的,今年也成功在哔哩顺利转正,拿到正式的offer了。 首先是实习强度💢 ,这块哔哩确实挺好的,实习的时候组内的大佬都不内卷,每天各自完成自己的工作就能下班回家啦,每天晚上8点半可以拿免费的加班餐,9点半能免费打车回家(我住的近,根本用不到) 🫶️ 团队氛围这块真的没话说,团队内的大佬都很乐意帮助我快速成长,犯错的时候,及时找mentor沟通,mentor真的无所不能,而且还会给自己许多思考的空间 公司还有免费的健身房可以锻炼,我今天从五月份到9月份和同事一起去健身房锻炼已经减掉15斤了,而且最近一段时间又新换了一批设备 哔...
哔哩哔哩公司福利 596人发布
点赞
评论
收藏
分享
04-07 13:16
门头沟学院 前端工程师
0offer
不打算干前端了这几个月好好的玩一玩
0offer是寒冬太冷还是我太菜
点赞
评论
收藏
分享
05-29 23:52
已编辑
北海职业学院 贸易跟单
丁香园一面
简单介绍一下concurrentHashMap类 1.8版本之后,concurrenthashMap内部为什么会有保留segment类 redis你如果去设计怎么去设计可重入锁 怎么去设计续期 讲一下OOM怎么做的 你还有了解别的分析OOM的工具吗 索引失效实际遇见过吗,怎么处理的 讲一讲什么是覆盖索引 使用MySql索引的时候 有什么使用原则吗,有什么规范要遵守吗 mysql的深度分页问题,怎么解决? 什么是线程不安全? redis为什么适合做分布式锁
丁香园一面12人在聊
查看11道真题和解析
点赞
评论
收藏
分享
评论
点赞成功,聊一聊 >
点赞
收藏
分享
评论
提到的真题
返回内容
全站热榜
更多
1
...
上午拍毕业照,下午拍结婚照!牛友祝福我们吧!
8270
2
...
本科四年,我决定在即将毕业时转行
5624
3
...
以为走散了,命运却又把我们安排到一起
5389
4
...
28届学院本女生走java中~
4696
5
...
亲爱的公司,你好!
4686
6
...
没有人关心你在学校有多牛逼
2579
7
...
记录第二次面试 京控信息
2120
8
...
滴滴春招
2114
9
...
26届选手终于在五月底拿到offer啦!!!
2107
10
...
0实习
2037
创作者周榜
更多
正在热议
更多
#
写给毕业5年后的自己
#
5841次浏览
112人参与
#
机械制造秋招总结
#
50890次浏览
493人参与
#
华泰证券Fintech星战营
#
171115次浏览
202人参与
#
职场捅娄子大赛
#
327042次浏览
3311人参与
#
机械人春招想让哪家公司来捞你?
#
337514次浏览
3059人参与
#
一人一个landing小技巧
#
62690次浏览
983人参与
#
你的论文盲审过了没?
#
102839次浏览
1467人参与
#
硬件应届生薪资是否普遍偏低?
#
69857次浏览
505人参与
#
你的秋招第一场笔试是哪家
#
127594次浏览
1386人参与
#
毕业后不工作的日子里我在做什么
#
172907次浏览
1523人参与
#
如果再来一次,你还会学硬件吗
#
122919次浏览
1400人参与
#
考公VS就业,你怎么选?
#
58428次浏览
390人参与
#
国央企笔面经互助
#
130193次浏览
1082人参与
#
毕业季等于分手季吗
#
19977次浏览
253人参与
#
好好告别我的学生时代
#
52599次浏览
944人参与
#
海信求职进展汇总
#
65682次浏览
363人参与
#
美的求职进展汇总
#
275069次浏览
1955人参与
#
大学最后一个寒假,我想……
#
38924次浏览
501人参与
#
晒一下我的毕业照
#
36782次浏览
416人参与
#
HR问:你期望的薪资是多少?如何回答
#
40917次浏览
527人参与
#
记录实习开销
#
34094次浏览
215人参与
牛客网
牛客企业服务