文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue运用的模式有哪些

2023-07-04 19:55

关注

这篇文章主要介绍“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运用的模式有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯