搜尋
首頁web前端前端問答vue運用了哪些模式
vue運用了哪些模式Dec 19, 2022 pm 05:11 PM
vue設計模式vue3

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
分享两个可以绘制 Flowable 流程图的Vue前端库分享两个可以绘制 Flowable 流程图的Vue前端库Sep 07, 2022 pm 07:59 PM

前端有没有现成的库,可以直接用来绘制 Flowable 流程图的?下面本篇文章就跟小伙伴们介绍一下这两个可以绘制 Flowable 流程图的前端库。

vue是前端css框架吗vue是前端css框架吗Aug 26, 2022 pm 07:37 PM

vue不是前端css框架,而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架,是基于MVVM设计模式的前端框架,且专注于View层。Vue.js的优点:1、体积小;2、基于虚拟DOM,有更高的运行效率;3、双向数据绑定,让开发者不用再去操作DOM对象,把更多的精力投入到业务逻辑上;4、生态丰富、学习成本低。

聊聊Vue3+qrcodejs如何生成二维码并添加文字描述聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PM

Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

一文深入详解Vue路由:vue-router一文深入详解Vue路由:vue-routerSep 01, 2022 pm 07:43 PM

本篇文章带大家详解Vue全家桶中的Vue-Router,了解一下路由的相关知识,希望对大家有所帮助!

手把手带你使用Vue开发一个五子棋小游戏!手把手带你使用Vue开发一个五子棋小游戏!Jun 22, 2022 pm 03:44 PM

本篇文章带大家利用Vue基础语法来写一个五子棋小游戏,希望对大家有所帮助!

手把手带你了解VUE响应式原理手把手带你了解VUE响应式原理Aug 26, 2022 pm 08:41 PM

本篇文章我们来了解 Vue2.X 响应式原理,然后我们来实现一个 vue 响应式原理(写的内容简单)实现步骤和注释写的很清晰,大家有兴趣可以耐心观看,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境