vue运用的模式有哪些

vue运用的设计模式：1、单例模式，确保一个类只有一个实例对象，并提供一个全局访问点供其访问。2、工厂模式，是用来创建对象的一种模式，不必暴露构造函数的具体逻辑，而是将逻辑封装在一个个函数之中。3、装饰器模式，允许向现有的函数添加新的功能，同时不改变其结构。4、策略模式，就是定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。5、发布订阅者模式。

什么是设计模式：

设计模式的原则是找出程序中的变化，并将变化封装起来，实现高效的可复用性。核心在于意图，而不在结构。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性。我们使用设计模式的最终目的是为了实现代码的高类聚和低耦合。你是否思考过这样的一个问题，如何让代码写的更有健壮性，其实核心在于把握变与不变。确保变的部分更加灵活，不变的地方更加稳定，而使用设计模式可以让我们达到这样的目的。

下面来总结一下vue项目中或者说工作中常用的设计模式。

单例模式

单例模式：确保一个类只有一个实例对象，并提供一个全局访问点供其访问。

优点：适用于单一对象，只生成一个对象实例，避免频繁创建和销毁实例，减少内存占用。

缺点：不适用动态扩展对象。

场景：登录浮窗、Vue中的axios实例（我们对axios进行请求拦截和响应拦截，多次调用封装好的axios但是仅设置一次，封装好的axios导出就是一个单例）、全局态管理 store、线程池、全局缓存

functionPerson(name,age){this.name=namethis.age=agethis.info=function(){console.log(`我的名字叫${this.name},我今年${this.age}了`)}}Person.getInstance=function(name,age){if(!this.instance){this.instance=newPerson(name,age)}console.log(this.instance)returnthis.instance}letb1=Person.getInstance('单例1',18)letb2=Person.getInstance('单例2',18)b1.info()b2.info()

工厂模式

工厂模式：工厂模式是用来创建对象最常见的一种设计模式。不必暴露构造函数的具体逻辑，而是将逻辑封装在一个个函数之中，那么这个构造函数就可以被看做工厂。

场景： 有构造函数的地方，写了大量的构造函数代码，调用了大量的new操作符。

优点：通过工厂模式，我们可以快速创建大量相似对象，没有重复代码。

缺点：工厂模式创建的对象属于Object，无法区分对象类型，这也是工厂模式没有广泛使用的原因。

functionFactory(name,age){this.name=name;this.age=age;//或者//letobj={}//obj.name=name//obj.age=age//returnobj}Factory.prototype.say=function(){console.log(`我的名字叫${this.name},我今年${this.age}了`)}letzs=newFactory('张三',18);letls=newFactory('李四',20);zs.say()ls.say()

装饰器模式

装饰器模式（切面编程AOP）： 在不改变对象自身的基础上，在程序运行期间给对象动态的添加职责；若直接修改函数体，则违背了’开放封闭原则’，也违背了我们的’单一职责原则’；简单的说就是允许向现有的函数添加新的功能，同时不改变其结构。

场景： vue中的表单验证与表单提交就运用了这种模式，遵循封闭开放原则。

functionbefore(fn,callback){let_this=this;returnfunction(){callback.apply(this,arguments)returnfn.bind(this,arguments)}}functionafter(fn,callback){let_this=thisreturnfunction(){letres=fn.apply(this,arguments)callback.apply(this,arguments)returnres}}//before和after是两个高阶函数，让我们一起回忆一下什么是高阶函数？//还知道call，apply,bind的区别吗letgetName=functiongetName(){//加入这是你同事写的烂代码，看不下去的那种，那么别动他的代码console.log('这是getName函数')}before(getName,function(){//这个就是你要写的新逻辑console.log('切入前代码')})()after(getName,function(){//这个也是你要写的新逻辑console.log('切入后代码')})()

策略模式

策略模式： 就是定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。

letstrategy={'A':function(bonus){returnbonus*4},'B':function(bonus){returnbonus*3}}functionfn(level,bonus){returnstrategy[level](bonus)}letresult=fn('A',4000)console.log(result,'result')//策略模式提供了开放-封闭原则，将算法或者方法封装在一个类中，使它们易于切换，易于替换。functionfunc(a,b){letf=functionf(){returna+b}returnf}

在vue表单验证时也可以运用

//这里可以将所有的表单验证正则函数写在这里exportconstloginUsername=(str)=>{return/^[a-zA-Z0-9_]{3,20}$/.test(str);};

import*asvalidateFormfrom'./validate';exportconstgene=(key,msg)=>{return(r,v,c)=>{if(validateForm[key](v)){c();}else{c(newError(msg));}};};

//这样看着是不是很清晰明了import{gene}from'@/utils/formValidateGene';rules:{account:[{required:true,validator:gene('loginUsername','请输入合适的账号'),trigger:['blur','change']}]}

发布订阅者模式

发布订阅者模式又叫观察者模式，发布订阅者模式一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得将得到通知；观察者模式则是一种一对一的依赖关系。

• 手写观察者模式

classObserver{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)})}}letobserver=newObserver()observer.listen('华为',(model,brand)=>{console.log(model,brand)})observer.listen('苹果',function(model,brand){console.log(model,brand)})observer.publish('华为','P50')observer.publish('苹果','14')

• 手写响应式

classEventEmitter{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))}}letevent=newEventEmitter()event.on('hello',function(res){console.log('hello',res)})letdata={name:'测试'}Object.defineProperty(data,'name',{get(val){//console.log(val)},set(newVal){console.log(newVal)event.trigger('hello',newVal)}})data.name='正在测试'

到此，关于“vue运用的模式有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注主机评测网网站，小编会继续努力为大家带来更多实用的文章！

上一篇：vue项目是不是只有一个vue实例

下一篇：PHP应用程序中如何正确调用系统命令