vue运用的模式有哪些

这篇文章主要介绍“Vue运用的模式有哪些”，在日常操作中，相信很多人在vue运用的模式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue运用的模式有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

什么是设计模式：

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

下面来总结一下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 = '正在测试'

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