vue運用的設計模式:1、單例模式,確保一個類別只有一個實例對象,並提供一個全域存取點供其存取。 2.工廠模式,是用來創建物件的一種模式,不必暴露建構函數的具體邏輯,而是將邏輯封裝在一個個函數之中。 3、裝飾器模式,允許在現有的函數中添加新的功能,同時不改變其結構。 4.策略模式,就是定義一系列的演算法,把他們一個個封裝起來,並且使他們可以互相替換。 5.發布訂閱者模式。
本教學操作環境: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 = '正在测试'#
以上是vue運用了哪些模式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

React是一個用於構建用戶界面的JavaScript庫,其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染,優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件,高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當,可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting,保持代碼可讀性和可維護性是最佳實踐。

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

React組件可以通過函數或類定義,封裝UI邏輯並通過props接受輸入數據。 1)定義組件:使用函數或類,返回React元素。 2)渲染組件:React調用render方法或執行函數組件。 3)復用組件:通過props傳遞數據,構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯,提升開發效率和代碼可維護性。

React嚴格模式是一種開發工具,可通過激活其他檢查和警告來突出反應應用中的潛在問題。它有助於識別遺產代碼,不安全的生命週期和副作用,鼓勵現代反應實踐。

本文討論了React的對帳過程,詳細介紹了它如何有效地更新DOM。關鍵步驟包括觸發對帳,創建虛擬DOM,使用擴散算法以及應用最小的DOM更新。它還覆蓋了經家

本文討論了軟件開發中元素與組件之間的區別,並突出了它們的角色,差異和對項目管理的影響。關鍵問題包括用戶InterFAC中的複雜性,可重複性和功能


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Linux新版
SublimeText3 Linux最新版

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3漢化版
中文版,非常好用

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。