设计模式
设计模式有许多种，这里挑出几个常用的：
设计模式
描述
例子
单例模式
一个类只能构造出唯一实例
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: 报价过低
还没有评论，来说两句吧...