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運用的模式有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！