站长资讯网
vue运用的设计模式：1、单例模式，确保一个类只有一个实例对象，并提供一个全局访问点供其访问。2、工厂模式，是用来创建对象的一种模式，不必暴露构造函数的具体逻辑，而是将逻辑封装在一个个函数之中。3、装饰器模式，允许向现有的函数添加新的功能，同时不改变其结构。4、策略模式，就是定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。5、发布订阅者模式。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
什么是设计模式：
设计模式的原则是找出程序中的变化，并将变化封装起来，实现高效的可复用性。核心在于意图，而不在结构。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性。我们使用设计模式的最终目的是为了实现代码的高类聚和低耦合。你是否思考过这样的一个问题，如何让代码写的更有健壮性，其实核心在于把握变与不变。确保变的部分更加灵活，不变的地方更加稳定，而使用设计模式可以让我们达到这样的目的。
下面来总结一下vue项目中或者说工作中常用的设计模式。
单例模式
单例模式：确保一个类只有一个实例对象，并提供一个全局访问点供其访问。
优点：适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用。
缺点：不适用动态扩展对象。
场景：登录浮窗、Vue中的axios实例（我们对axios进行请求拦截和响应拦截，多次调用封装好的axios但是仅设置一次，封装好的axios导出就是一个单例）、全局态管理 store、线程池、全局缓存
function Person (name, age) { this.name = name this.age = age this.info = function () { console.log(`我的名字叫${this.name}, 我今年${this.age}了`) } } Person.getInstance = function (name, age) { if (!this.instance) { this.instance = new Person(name, age) } console.log(this.instance) return this.instance } let b1 = Person.getInstance('单例1', 18) let b2 = Person.getInstance('单例2', 18) b1.info() b2.info()
工厂模式
工厂模式：工厂模式是用来创建对象最常见的一种设计模式。不必暴露构造函数的具体逻辑，而是将逻辑封装在一个个函数之中，那么这个构造函数就可以被看做工厂。
场景： 有构造函数的地方，写了大量的构造函数代码，调用了大量的new操作符。
优点：通过工厂模式，我们可以快速创建大量相似对象，没有重复代码。
缺点：工厂模式创建的对象属于Object，无法区分对象类型，这也是工厂模式没有广泛使用的原因。
function Factory (name, age) { this.name = name; this.age = age; // 或者 // let obj = {} // obj.name = name // obj.age = age // return obj } Factory.prototype.say = function () { console.log(`我的名字叫${this.name}, 我今年${this.age}了`) } let zs = new Factory('张三', 18); let ls = new Factory('李四', 20); zs.say() ls.say()
装饰器模式
装饰器模式（切面编程AOP）： 在不改变对象自身的基础上，在程序运行期间给对象动态的添加职责；若直接修改函数体，则违背了’开放封闭原则’，也违背了我们的’单一职责原则’；简单的说就是允许向现有的函数添加新的功能，同时不改变其结构。
场景： vue中的表单验证与表单提交就运用了这种模式，遵循封闭开放原则。
function before (fn, callback) { let _this = this; return function () { callback.apply(this, arguments) return fn.bind(this, arguments) } } function after (fn, callback) { let _this = this return function () { let res = fn.apply(this, arguments) callback.apply(this, arguments) return res } } // before和after是两个高阶函数，让我们一起回忆一下什么是高阶函数？ // 还知道call，apply,bind的区别吗 let getName = function getName () { // 加入这是你同事写的烂代码，看不下去的那种，那么别动他的代码 console.log('这是getName函数') } before(getName, function () { // 这个就是你要写的新逻辑 console.log('切入前代码') })() after(getName, function () { // 这个也是你要写的新逻辑 console.log('切入后代码') })()
策略模式
策略模式： 就是定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。
let strategy = { 'A': function (bonus) { return bonus * 4 }, 'B': function (bonus) { return bonus * 3 } } function fn (level, bonus) { return strategy[level](bonus) } let result = fn('A', 4000) console.log(result, 'result') // 策略模式提供了开放-封闭原则，将算法或者方法封装在一个类中，使它们易于切换，易于替换。 function func (a, b) { let f = function f() { return a + b } return f }
在vue表单验证时也可以运用
// 这里可以将所有的表单验证正则函数写在这里 export const loginUsername = (str) => { return /^[a-zA-Z0-9_]{3,20}$/.test(str); };
import * as validateForm from './validate'; export const gene = (key, msg) => { return (r, v, c) => { if (validateForm[key](v)) { c(); } else { c(new Error(msg)); } }; };
// 这样看着是不是很清晰明了 import {gene} from '@/utils/formValidateGene'; rules: { account: [{ required: true, validator: gene('loginUsername', '请输入合适的账号'), trigger: ['blur', 'change'] }] }
发布订阅者模式
发布订阅者模式又叫观察者模式，发布订阅者模式一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得将得到通知；观察者模式则是一种一对一的依赖关系。
- 手写观察者模式
class Observer { client = {} // 订阅 listen (key, fn) { if (!this.client[key]) { this.client[key] = [] } this.client[key].push(fn) } // 发布 publish (key) { this.client[key].forEach(fn => { fn.apply(this, arguments) }) } } let observer = new Observer() observer.listen('华为', (model, brand) => { console.log(model, brand) }) observer.listen('苹果', function (model, brand) { console.log(model, brand) }) observer.publish('华为', 'P50') observer.publish('苹果', '14')
- 手写响应式
class EventEmitter { constructor () { this.client = {} } on (key, fn) { if (!this.client[key]) { this.client[key] = [] } this.client[key].push(fn) } trigger (key, ...args) { this.client[key].forEach(cb => cb(...args)) } } let event = new EventEmitter() event.on('hello', function(res) { console.log('hello', res) }) let data = { name: '测试' } Object.defineProperty(data, 'name', { get (val) { // console.log(val) }, set (newVal) { console.log(newVal) event.trigger('hello', newVal) } }) data.name = '正在测试'
【
