首頁  >  文章  >  web前端  >  vue運用了哪些模式

vue運用了哪些模式

青灯夜游
青灯夜游原創
2022-12-19 17:11:586638瀏覽

vue運用的設計模式:1、單例模式,確保一個類別只有一個實例對象,並提供一個全域存取點供其存取。 2.工廠模式,是用來創建物件的一種模式,不必暴露建構函數的具體邏輯,而是將邏輯封裝在一個個函數之中。 3、裝飾器模式,允許在現有的函數中添加新的功能,同時不改變其結構。 4.策略模式,就是定義一系列的演算法,把他們一個個封裝起來,並且使他們可以互相替換。 5.發布訂閱者模式。

vue運用了哪些模式

本教學操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn