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 = '正在测试'
【相关推荐：vuejs视频教程、web前端开发】
以上就是vue运用了哪些模式的详细内容，更多请关注北冥有鱼其它相关文章！
本文转载自【PHP中文网】，希望能给您带来帮助，苟日新、日日新、又日新，生命不息，学习不止。
