【每日前端面经】2024-03-04
欢迎订阅我的前端面经专栏: 每日前端面经
本期题目来源: 牛客
有哪些设计模式,如何使用
- 创建型模式
-
工厂方法模式
-
简单工厂模式: 定义了一个创建对象的类,由这个类来封装实例化对象
public class SimplePizzaFactory { public Pizza CreatePizza(String ordertype) { Pizza pizza = null; if (ordertype.equals("cheese")) { pizza = new CheesePizza(); } else if (ordertype.equals("greek")) { pizza = new GreekPizza(); } else if (ordertype.equals("pepper")) { pizza = new PepperPizza(); } return pizza; } }
-
工厂方法模式: 定义了一个创建对象的抽象方法,由子类决定要实例化的类。工厂方法模式将对象的实例化延迟到子类
public class OrderPizza { abstract Pizza createPizza(); } public class LDOrderPizza extends OrderPizza { Pizza createPizza(String ordertype) { Pizza pizza = null; if (ordertype.equals("cheese")) { pizza = new LDChessPizza(); } else if (ordertype.equals("pepper")) { pizza = new LDPepperPizza(); } return pizza; } } public class NYOrderPizza extends OrderPizza { Pizza createPizza(String ordertype) { Pizza pizza = null; if (ordertype.equals("cheese")) { pizza = new NYChessPizza(); } else if (ordertype.equals("pepper")) { pizza = new NYPepperPizza(); } return pizza; } } public class PizzaStore { public static void main(String[] args) { OrderPizza orderPizza = new NYOrderPizza(); } }
-
-
抽象工厂模式: 定义了一个接口用于创建相关或有依赖关系的对象族而无需明确指定具体类
public interface AbsFactory { Pizza CreatePizza(String ordertype); } public class LDFactory implements AbsFactory { @Override public Pizza CreatePizza(String ordertype) { Pizza pizza = null; if ("cheese".equals(ordertype)) { pizza = new LDChessPizza(); } else if ("pepper".equals(ordertype)) { pizza = new LDPepperPizza(); } return pizza; } }
-
单例模式
-
饿汉单例
public class PreloadSingleton { public static PreloadSingleton instance = new PreloadSingleton(); private PreloadSingleton() {}; public static PreloadSingleton getInstance() { return instance; } }
-
懒汉单例
public class LazySingleton { public static LazySingleton instance = null; private LazySingleton() {}; public static LazySingleton getInstance() { return instance; } }
-
-
建造者模式
-
原型模式
-
- 结构型模式
- 适配器模式
- 装饰器模式
- 代理模式
- 外观模式
- 桥接模式
- 组合模式
- 享元模式
- 行为型模式
- 策略模式
- 模板方法模式
- 观察者模式
- 迭代子模式
- 责任链模式
- 命令模式
- 备忘录模式
- 状态模式
- 访问者模式
- 中介者模式
- 解释器模式
隐藏元素的方式
- display: none
- visibility: hidden
- opacity: 0
- position: absolute
- cli-path: polygon
CSS实现居中
-
水平居中
-
行内元素水平居中
.center-text { text-align: center; }
-
块级元素水平居中
.center-block { margin: 0 auto; }
-
多块级元素水平居中
.flex-center { display: flex; justify-content: center; }
-
-
垂直居中
-
单行行内元素
.box { height: 100px; line-height: 100px; }
-
多行行内元素
.box { vertical-align: middle; }
-
多行块级元素
.flex-center { display: flex; align-items: center; }
-
已知高度块级元素
.child { position: absolute; top: 50%; height: 100px; margin-top: 50px; }
-
未知高度块级元素
.child { position: absolute; top: 50%; transform: translateY(-50%); }
-
-
水平垂直居中
.f { display: flex; align-items: middle; justify-content: middle; }
Websocket和Http有什么区别
-
Http: Http是单向的,客户端发送请求,服务器发送响应。举例来说,当客户端向服务器发送请求时,该请求以HTTP或HTTPS的形式发送,在接收到请求后,服务器会将响应发送给客户端。每个请求都与一个对应的响应相关联,在发送响应后客户端与服务器的连接会被关闭。每个HTTP或HTTPS请求每次都会新建与服务器的连接,并且在获得响应后,连接将自行终止。 HTTP是在TCP之上运行的无状态协议,TCP是一种面向连接的协议,它使用三向握手方法保证数据包传输的传递并重新传输丢失的数据包
-
Websocket: WebSocket是双向的,在客户端-服务器通信的场景中使用的全双工协议,与HTTP不同,它以ws://或wss://开头。它是一个有状态协议,这意味着客户端和服务器之间的连接将保持活动状态,直到被任何一方(客户端或服务器)终止。在通过客户端和服务器中的任何一方关闭连接之后,连接将从两端终止
组件通信
- props/$eimt
- $emit/$on
- $attrs/$listeners
- $provide/$inject
- $parent/$children/ref
- vuex
- storage
Vue和React的异同点
- 模板与JSX:Vue使用模板语言,语法简洁明了;而React则使用JSX语法,与JavaScript更为接近。这使得Vue在快速原型设计和简单项目上更具优势,而React在复杂组件和性能优化上更具优势
- 组件化开发:Vue和React都采用组件化开发方式,但Vue的组件系统更为灵活,支持局部注册和动态组件;而React则通过高阶组件和上下文提供类似功能
- 数据流:Vue采用集中式数据流管理,而React则采用更灵活的Flux架构或Redux进行状态管理。这使得Vue在小型项目上更简洁,而React在大规模应用上更具优势。
- 性能优化:Vue和React都提供了虚拟DOM和Diff算法来优化性能。但Vue的虚拟DOM更为
- 轻量级,而React的虚拟DOM更为强大。这使得Vue在某些场景下性能更优,而React在复杂组件渲染上更具优势
- 生态与社区:Vue和React都有庞大的生态系统和活跃的社区支持。但Vue的社区相对较小且更加集中,而React的社区更加庞大且分散。这使得Vue在某些特定领域或框架(如Nuxt.js)上更具优势,而React在广泛的应用领域上更具优势
- 单页面应用(SPA):Vue和React都适用于构建单页面应用。Vue的轻量级特性和灵活性使其在小型项目上更具优势;而React在大型企业级应用上更具优势,其强大的生态系统和丰富的库使其更具竞争力
- 动态网站:对于需要频繁更新的动态网站,Vue和React都适用。Vue的简洁性和灵活性使其在快速原型设计和简单项目上更具优势;而React则在大规模应用上更具优势,其强大的生态系统能够提供更多的工具和库支持
- 博客系统:Vue和React都可以用于创建各种博客系统,提供用户友好的界面和丰富的交互功能。但根据具体需求和使用场景的不同,Vue和React可能各有优势。
数据可视化:结合第三方库,Vue和React都可以用于创建各种数据可视化图表和交互式界面。但具体选择还需根据项目需求和技术栈来决定 - 移动端应用:通过跨平台解决方案(如Cordova/PhoneGap、Ionic等),Vue和React都可以用于构建跨平台的移动端应用。但根据具体的框架选择和技术要求,两者可能各有优势
ES6新特性
- symbol: 在ES6之前,我们知道JavaScript支持8种数据类型:Object,String,Boolean,Number,Null,Undefined、Array、Function。现在,ES6新增了一种原始数据类型:symbol,表示独一无二的值,即每个symbol类型的值都不相同
- let&const: 他们声明的变量仅在let和const关键字所在的代码块内起作用,即在使用let和const的那一对大括号{}内起作用,也称块级作用域
- 解构赋值: 解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值
- Map&Set: Map对象用于保存键值对,任何值JavaScript支持的值都可以作为一个键或者一个值。Set对象和Map对象类似,但它是用来存储一组唯一值的,而不是键值对。类似数组,但它的每个元素都是唯一的
- 对象新方法:
- 创建对象的字面量方式可以更加简洁。直接使用变量名作为属性,函数体作为方法,最终变量值变成属性值,函数名变成方法名
- 对象的拓展运算符(…)三点。用于拷贝目标对象所有可遍历的属性到当前对象
- ES6对象新增了两个方法,assign和is
- 字符串新方法: includes、startsWith、endsWith、repeat、padStart、padEnd
- 数组新方法: of、from、find、findIndex、fill、copyWithin
- 参数默认值
- 箭头函数
- class类
- 模块化
Vue生命周期,Created阶段具体做了什么
- beforeCreate,created
- beforeMount(render),mounted
- beforeUpdate,updated
- beforeDestroy,destroyed
created主要在实例创建完成后被立即同步调用。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el property 目前尚不可用
对闭包的理解
一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来
23 种设计模式详解(全23种)
css隐藏元素的六种方法
最全总结,CSS实现居中的方式全部方式
什么是WebSocket,它与HTTP有何不同?
Vue与React:核心异同点解析 ES6 有哪些新特性 ? 全网最详细
Vue 组件间通信六种方式(完整版)
如何简单理解闭包(Closure)
Vue生命周期总结(四个阶段,八个钩子函数)
新人发文,礼貌求关❤️