前端開發中運用多種設計模式可以提高代碼的可維護性、可擴展性和可復用性。以下是一些常見的前端設計模式：
創建型模式
1. 單例模式
- 定義：確保一個類只有一個實例，并提供一個全局訪問點。
- 應用場景：在前端中，像全局狀態管理對象、數據庫連接對象等通常使用單例模式。例如，在 React 項目中使用 Redux 管理全局狀態，Redux 的 store 就是一個單例，整個應用只有一個 store 實例。
- 示例代碼（JavaScript）：
class Singleton {constructor() {if (!Singleton.instance) {this.data = [];Singleton.instance = this;}return Singleton.instance;}addItem(item) {this.data.push(item);}getData() {return this.data;}
}
const singleton1 = new Singleton();
const singleton2 = new Singleton();
console.log(singleton1 === singleton2); // true
2. 工廠模式
- 定義：定義一個創建對象的接口，讓子類決定實例化哪個類。
- 應用場景：當創建對象的邏輯比較復雜時，使用工廠模式可以將對象的創建和使用分離。例如，在創建不同類型的彈窗組件時，可以使用工廠模式根據不同的參數創建不同樣式和功能的彈窗。
- 示例代碼（JavaScript）：
class Button {constructor(text) {this.text = text;}render() {return `<button>${this.text}</button>`;}
}class Link {constructor(text, url) {this.text = text;this.url = url;}render() {return `<a href="${this.url}">${this.text}</a>`;}
}class ElementFactory {createElement(type, ...args) {if (type === 'button') {return new Button(...args);} else if (type === 'link') {return new Link(...args);}return null;}
}const factory = new ElementFactory();
const button = factory.createElement('button', 'Click me');
const link = factory.createElement('link', 'Google', 'https://www.google.com');
console.log(button.render());
console.log(link.render());
結構型模式
1. 裝飾器模式
- 定義：動態地給一個對象添加一些額外的職責。
- 應用場景：在前端中，常用于給組件添加額外的功能，如添加樣式、事件處理等。例如，在 React 中可以使用高階組件（HOC）來實現裝飾器模式，給組件添加日志記錄、權限驗證等功能。
- 示例代碼（JavaScript）：
function logDecorator(component) {return class extends React.Component {componentDidMount() {console.log('Component mounted');}render() {return <component {...this.props} />;}};
}class MyComponent extends React.Component {render() {return <div>My Component</div>;}
}const DecoratedComponent = logDecorator(MyComponent);
2. 代理模式
- 定義：為其他對象提供一種代理以控制對這個對象的訪問。
- 應用場景：在前端中，常用于處理圖片懶加載、數據緩存等。例如，使用代理對象來控制對圖片資源的訪問，當圖片進入可視區域時再加載真實的圖片資源。
- 示例代碼（JavaScript）：
class Image {constructor(src) {this.src = src;this.loadImage();}loadImage() {console.log(`Loading image from ${this.src}`);}display() {console.log(`Displaying image from ${this.src}`);}
}class ProxyImage {constructor(src) {this.src = src;this.realImage = null;}display() {if (!this.realImage) {this.realImage = new Image(this.src);}this.realImage.display();}
}const proxy = new ProxyImage('https://example.com/image.jpg');
proxy.display();
行為型模式
1. 觀察者模式
- 定義：定義對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴它的對象都會得到通知并自動更新。
- 應用場景：在前端中，常用于實現事件系統、狀態管理等。例如，在 Vue.js 中，響應式原理就是基于觀察者模式實現的，當數據發生變化時，會自動更新與之綁定的 DOM 元素。
- 示例代碼（JavaScript）：
class EventEmitter {constructor() {this.events = {};}on(eventName, callback) {if (!this.events[eventName]) {this.events[eventName] = [];}this.events[eventName].push(callback);}emit(eventName, ...args) {if (this.events[eventName]) {this.events[eventName].forEach(callback => callback(...args));}}off(eventName, callback) {if (this.events[eventName]) {this.events[eventName] = this.events[eventName].filter(cb => cb!== callback);}}
}const emitter = new EventEmitter();
const callback = (message) => {console.log(`Received message: ${message}`);
};
emitter.on('message', callback);
emitter.emit('message', 'Hello, world!');
emitter.off('message', callback);
emitter.emit('message', 'This message won\'t be received.');
2. 狀態模式
- 定義：允許一個對象在其內部狀態改變時改變它的行為，對象看起來似乎修改了它的類。
- 應用場景：在前端中，常用于實現組件的不同狀態切換，如按鈕的不同狀態（正常、禁用、加載中）。
- 示例代碼（JavaScript）：
class ButtonState {constructor(button) {this.button = button;}click() {}render() {}
}class NormalState extends ButtonState {click() {console.log('Button clicked');}render() {return '<button>Normal</button>';}
}class DisabledState extends ButtonState {click() {console.log('Button is disabled');}render() {return '<button disabled>Disabled</button>';}
}class Button {constructor() {this.state = new NormalState(this);}setState(state) {this.state = state;}click() {this.state.click();}render() {return this.state.render();}
}const button = new Button();
button.click();
button.setState(new DisabledState(button));
button.click();
以上只是前端開發中常見的一些設計模式，實際應用中可以根據具體需求選擇合適的設計模式來優化代碼。
上)
