前端设计模式是在前端开发中常用的一些设计思想或者编程范式，它们旨在解决特定的问题，并提供了一种可复用的解决方案。设计模式可以使代码更加可维护、可扩展，并促使开发者编写更清晰、更高效的代码。
// 外观模式的简单示例
class SubsystemA {
operationA() {
console.log('Subsystem A: Operation A');
}
}
class SubsystemB {
operationB() {
console.log('Subsystem B: Operation B');
}
}
class SubsystemC {
operationC() {
console.log('Subsystem C: Operation C');
}
}
class Facade {
constructor() {
this.subsystemA = new SubsystemA();
this.subsystemB = new SubsystemB();
this.subsystemC = new SubsystemC();
}
operate() {
this.subsystemA.operationA();
this.subsystemB.operationB();
this.subsystemC.operationC();
}
}
// 使用外观模式
const facade = new Facade();
facade.operate();
// Element UI 的事件监听
this.$refs.myComponent.$on('customEvent', () => {
// 处理事件的逻辑
});
// 访问者模式的简单示例
class Element {
accept(visitor) {
visitor.visit(this);
}
}
class ConcreteElementA extends Element {}
class ConcreteElementB extends Element {}
class Visitor {
visit(element) {
// 执行访问操作
}
}
class ConcreteVisitor extends Visitor {
visit(element) {
// 具体访问操作
}
}
// 使用访问者模式
const elementA = new ConcreteElementA();
const elementB = new ConcreteElementB();
const visitor = new ConcreteVisitor();
elementA.accept(visitor);
elementB.accept(visitor);
// 中介者模式的简单示例
class Mediator {
constructor() {
this.colleagueA = new ColleagueA(this);
this.colleagueB = new ColleagueB(this);
}
notify(sender, message) {
if (sender === this.colleagueA) {
this.colleagueB.receive(message);
} else if (sender === this.colleagueB) {
this.colleagueA.receive(message);
}
}
}
class ColleagueA {
constructor(mediator) {
this.mediator = mediator;
}
send(message) {
this.mediator.notify(this, message);
}
receive(message) {
// 处理收到的消息
}
}
class ColleagueB {
constructor(mediator) {
this.mediator = mediator;
}
send(message) {
this.mediator.notify(this, message);
}
receive(message) {
// 处理收到的消息
}
}
prefix-icon 和 suffix-icon 属性就可以理解为装饰者模式的应用。它们允许你在输入框的前后添加额外的图标。<!-- Element UI Input 组件的装饰者模式 -->
<el-input
v-model="inputValue"
placeholder="请输入内容"
prefix-icon="el-icon-search"
suffix-icon="el-icon-edit"
></el-input>
// Vue.js 中的工厂模式
Vue.component('my-component', {
// 组件定义
});
this.$alert、this.$confirm 等方法来获取并使用。// Element UI 中的 MessageBox 单例模式
this.$alert('Hello, World!', '提示', {
confirmButtonText: '确定',
callback: action => {
// 处理用户点击确认的逻辑
}
});
// Element UI 表单验证规则（策略模式）
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
// 其他验证规则...
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
// 其他验证规则...
],
}
// 迭代器模式的简单示例
class Iterator {
constructor(collection) {
this.collection = collection;
this.index = 0;
}
hasNext() {
return this.index < this.collection.length;
}
next() {
return this.collection[this.index++];
}
}
// 使用迭代器遍历数组
const array = [1, 2, 3, 4, 5];
const iterator = new Iterator(array);
while (iterator.hasNext()) {
console.log(iterator.next());
}
// 适配器模式的简单示例
class OldDataSource {
getData() {
// 获取数据的逻辑
}
}
class NewDataSourceAdapter {
constructor(newDataSource) {
this.newDataSource = newDataSource;
}
getData() {
// 适配逻辑，将新数据源的接口适配成旧数据源的接口
return this.newDataSource.fetchData();
}
}
$on 和 $emit 方法进行事件的订阅和发布。// 订阅-发布模式的简单示例（使用 Vue.js 事件总线）
// 创建事件总线
const eventBus = new Vue();
// 组件A 订阅事件
eventBus.$on('customEvent', (data) => {
// 处理事件的逻辑
});
// 组件B 发布事件
eventBus.$emit('customEvent', eventData);
充当了代理的角色，负责控制对真实图片对象RealImage` 的访问。如果图片尚未加载，代理会负责加载图片；如果图片已加载，代理直接显示已加载的图片，而无需再次加载。代理模式通过这种方式提供了更灵活、可控的访问方式。// 代理模式的简单示例 - 图片加载
class RealImage {
constructor(filename) {
this.filename = filename;
this.loadImage();
}
loadImage() {
console.log(`Loading image: ${this.filename}`);
}
display() {
console.log(`Displaying image: ${this.filename}`);
}
}
class ImageProxy {
constructor(filename) {
this.filename = filename;
this.image = null;
}
display() {
if (!this.image) {
this.image = new RealImage(this.filename);
}
this.image.display();
}
}
// 使用代理模式加载图片
const proxyImage = new ImageProxy('example.jpg');
proxyImage.display(); // 图片被加载并显示
proxyImage.display(); // 图片已加载，直接显示
`