前端设计怎么做，设计模式和面试题详解？

用户投稿 • 2022年5月11日 pm11:53 • 网络资讯 • 阅读 1213

设计模式

前端设计怎么做，设计模式和面试题详解？

设计模式有许多种，这里挑出几个常用的：

设计模式	描述	例子
单例模式	一个类只能构造出唯一实例	Redux/Vuex的store
工厂模式	对创建对象逻辑的封装	jQuery的$(selector)
观察者模式	当一个对象被修改时，会自动通知它的依赖对象	Redux的subscribe、Vue的双向绑定
装饰器模式	对类的包装，动态地拓展类的功能	React高阶组件、ES7 装饰器
适配器模式	兼容新旧接口，对类的包装	封装旧API
代理模式	控制对象的访问	事件代理、ES6的Proxy

说一下设计原则

单一职责原则：一个类只负责一个功能领域中的相应职责，或者可以定义为：就一个类而言，应该只有一个引起它变化的原因。

开放封闭原则：核心的思想是软件实体（类、模块、函数等）是可扩展的、但不可修改的。也就是说,对扩展是开放的,而对修改是封闭的。

单例模式

单例模式即一个类只能构造出唯一实例，单例模式的意义在于共享、唯一，Redux/Vuex中的store、jQuery的$或者业务场景中的购物车、登录框都是单例模式的应用

class SingletonLogin {
constructor(name,password){
this.name = name
this.password = password
}
 static getInstance(name,password){
 //判断对象是否已经被创建,若创建则返回旧对象
if(!this.instance)this.instance = new SingletonLogin(name,password)
return this.instance
}
}
let obj1 = SingletonLogin.getInstance('CXK','123')
let obj2 = SingletonLogin.getInstance('CXK','321')
console.log(obj1===obj2) // true
console.log(obj1) // {name:CXK,password:123}
console.log(obj2) // 输出的依然是{name:CXK,password:123}

工厂模式

工厂模式即对创建对象逻辑的封装，或者可以简单理解为对new的封装，这种封装就像创建对象的工厂，故名工厂模式。工厂模式常见于大型项目，比如JQ的$对象，我们创建选择器对象时之所以没有new selector就是因为$()已经是一个工厂方法，其他例子例如React.createElement()、Vue.component()都是工厂模式的实现。工厂模式有多种：简单工厂模式、工厂方法模式、抽象工厂模式，这里只以简单工厂模式为例：

class User {
constructor(name, auth) {
this.name = name
this.auth = auth
}
}
class UserFactory {
 static createUser(name, auth) {
 //工厂内部封装了创建对象的逻辑:
 //权限为admin时,auth=1, 权限为user时, auth为2
 //使用者在外部创建对象时,不需要知道各个权限对应哪个字段, 不需要知道赋权的逻辑，只需要知道创建了一个管理员和用户
if(auth === 'admin') new User(name, 1)
if(auth === 'user') new User(name, 2)
}
}
const admin = UserFactory.createUser('cxk', 'admin');
const user = UserFactory.createUser('cxk', 'user');

观察者模式

观察者模式算是前端最常用的设计模式了，观察者模式概念很简单：观察者监听被观察者的变化，被观察者发生改变时，通知所有的观察者。

//观察者
class Observer {
constructor (fn) {
this.update = fn
}
}
//被观察者
class Subject {
constructor() {
this.observers = [] //观察者队列
}
addObserver(observer) {
this.observers.push(observer)//往观察者队列添加观察者
}
notify() { //通知所有观察者,实际上是把观察者的update()都执行了一遍
this.observers.forEach(observer => {
 observer.update()//依次取出观察者,并执行观察者的update方法
})
}
}
var subject = new Subject() //被观察者
const update = () => {console.log('被观察者发出通知')} //收到广播时要执行的方法
var ob1 = new Observer(update) //观察者1
var ob2 = new Observer(update) //观察者2
subject.addObserver(ob1) //观察者1订阅subject的通知
subject.addObserver(ob2) //观察者2订阅subject的通知
subject.notify() //发出广播,执行所有观察者的update方法

有些文章也把观察者模式称为发布订阅模式，其实二者是有所区别的，发布订阅相较于观察者模式多一个调度中心。

装饰器模式

装饰器模式，可以理解为对类的一个包装，动态地拓展类的功能，ES7的装饰器语法以及React中的高阶组件（HoC）都是这一模式的实现。react-redux的connect()也运用了装饰器模式，这里以ES7的装饰器为例：

function info(target) {
 target.prototype.name = '张三'
 target.prototype.age = 10
}
@info
class Man {}
let man = new Man()
man.name // 张三

适配器模式

适配器模式，将一个接口转换成客户希望的另一个接口，使接口不兼容的那些类可以一起工作。我们在生活中就常常有使用适配器的场景，例如出境旅游插头插座不匹配，这时我们就需要使用转换插头，也就是适配器来帮我们解决问题。

class Adaptee {
test() {
return '旧接口'
}
}
class Target {
constructor() {
this.adaptee = new Adaptee()
}
test() {
 let info = this.adaptee.test()
return `适配${info}`
}
}
 let target = new Target()console.log(target.test())

代理模式

代理模式，为一个对象找一个替代对象，以便对原对象进行访问。即在访问者与目标对象之间加一层代理，通过代理做授权和控制。

最常见的例子是经纪人代理明星业务，假设你作为一个投资者，想联系明星打广告，那么你就需要先经过代理经纪人，经纪人对你的资质进行考察，并通知你明星排期，替明星本人过滤不必要的信息。

事件代理、jQuery的$.proxy、ES6的proxy都是这一模式的实现，下面以ES6的proxy为例：

const idol = {
 name: '蔡x抻',
 phone: 10086,
 price: 1000000 //报价
}
const agent = new Proxy(idol, {
 get: function(target) {
 //拦截明星电话的请求,只提供经纪人电话
return '经纪人电话:10010'
},
 set: function(target, key, value) {
if(key === 'price' ) {
 //经纪人过滤资质
if(value < target.price) throw new Error('报价过低')
 target.price = value
}
}
})
agent.phone //经纪人电话:10010
agent.price = 100 //Uncaught Error: 报价过低

好了，这篇文章的内容营销圈就和大家分享到这里，如果大家对网络推广引流和网络创业项目感兴趣，可以添加微信：Sum8338 备注：营销圈引流学习，我拉你进直播课程学习群，每周135晚上都是有实战的推广引流技术和网络创业项目课程分享，当然是免费学！

前端设计怎么做，设计模式和面试题详解？

设计模式

说一下设计原则

单例模式

工厂模式

观察者模式

装饰器模式

适配器模式

代理模式

相关推荐