手机文章网站源码,怎么找货源开网店,邢台建设局网站上中标公示查询,frontpage做的社交网站vue中使用了哪些设计模式
1. 观察者模式#xff08;Observer Pattern#xff09; 应用场景#xff1a;Vue 的响应式系统核心就是观察者模式。 实现方式#xff1a;通过 Object.defineProperty 或 Proxy 监听数据变化#xff0c;当数据发生变化时#xff0c;通知依赖的视…vue中使用了哪些设计模式
1. 观察者模式Observer Pattern 应用场景Vue 的响应式系统核心就是观察者模式。 实现方式通过 Object.defineProperty 或 Proxy 监听数据变化当数据发生变化时通知依赖的视图更新。 示例 const data { message: Hello };
const vm new Vue({data: data
});
// 修改 data.message 会触发视图更新
data.message World; 2. 发布-订阅模式Publish-Subscribe Pattern 应用场景Vue 的事件系统$on, $emit和全局事件总线Event Bus就是发布-订阅模式的实现。 实现方式组件通过 $on 订阅事件通过 $emit 发布事件。 示例 // 组件 A
this.$emit(event-name, data);
// 组件 B
this.$on(event-name, (data) {console.log(data);
}); 3. 单例模式Singleton Pattern 应用场景Vuex 的状态管理库和 Vue Router 的路由实例通常采用单例模式。 实现方式确保全局只有一个实例避免重复创建。 示例 // Vuex Store
const store new Vuex.Store({ /* 配置 */ });
// Vue Router
const router new VueRouter({ /* 配置 */ }); 4. 工厂模式Factory Pattern 应用场景Vue 的组件系统可以看作是一种工厂模式。 实现方式通过 Vue.component 或单文件组件.vue 文件创建可复用的组件。 示例 Vue.component(my-component, {template: divMy Component/div
}); 5. 插件模式
核心思想 扩展性通过插件机制允许第三方或开发者为框架添加新功能。 解耦插件与框架核心代码分离避免直接修改框架源码。 一致性提供统一的插件安装和使用方式简化开发流程。 插件模式-Vue.use 的实现原理
Vue.use 是 Vue.js 提供的一个全局方法用于安装插件。其核心逻辑如下 检查插件是否已安装避免重复安装。 调用插件的 install 方法如果插件是一个对象必须提供 install 方法如果插件是一个函数则直接调用。 传递 Vue 构造函数将 Vue 构造函数作为参数传递给插件的 install 方法以便插件可以扩展 Vue 的功能。
源码示例简化
Vue.use function (plugin) {const installedPlugins this._installedPlugins || (this._installedPlugins []);if (installedPlugins.indexOf(plugin) -1) {return this;}const args Array.from(arguments).slice(1);args.unshift(this);if (typeof plugin.install function) {plugin.install.apply(plugin, args);} else if (typeof plugin function) {plugin.apply(null, args);}installedPlugins.push(plugin);return this;
}; ElementUI 的插件实现
ElementUI 是一个基于 Vue.js 的 UI 组件库它通过插件模式将自己注册到 Vue 中。以下是 ElementUI 插件的基本实现
ElementUI 的 install 方法
ElementUI 提供了一个 install 方法用于全局注册组件、指令和混入等。
示例简化
const ElementUI {install(Vue) {// 注册全局组件Vue.component(ElButton, Button);Vue.component(ElInput, Input);// 注册全局指令Vue.directive(focus, FocusDirective);// 添加全局混入Vue.mixin({created() {console.log(ElementUI plugin installed);}});}
}; 使用 Vue.use 安装 ElementUI
通过 Vue.use(ElementUI)ElementUI 的 install 方法会被调用从而将组件、指令等注册到 Vue 中。
示例
import Vue from vue;
import ElementUI from element-ui;Vue.use(ElementUI); 插件模式的优势 模块化将功能封装为插件便于管理和复用。 灵活性开发者可以根据需求选择安装不同的插件。 扩展性框架的功能可以通过插件无限扩展而无需修改核心代码。 一致性提供统一的插件安装方式降低学习成本。 5. 依赖注入模式Dependency Injection Pattern 应用场景Vue 的 provide 和 inject 机制就是依赖注入模式的实现。 实现方式父组件通过 provide 提供依赖子组件通过 inject 注入依赖。 示例 // 父组件
new Vue({provide: {message: Hello from parent}
});
// 子组件
new Vue({inject: [message],created() {console.log(this.message); // 输出: Hello from parent}
});
手写发布订阅模式和观察者模式
分别用代码实现观察者模式与发布订阅模式
// 创建发布-订阅中心
const eventBus {events: {},subscribe(event, callback) {if (!this.events[event]) {this.events[event] [];}this.events[event].push(callback);},publish(event, data) {if (this.events[event]) {this.events[event].forEach(callback {callback(data);});}}
};
// 订阅者1
const subscriber1 data {console.log(Subscriber 1 received data:, data);
};
// 订阅者2
const subscriber2 data {console.log(Subscriber 2 received data:, data);
};
// 在发布-订阅中心订阅事件
eventBus.subscribe(event1, subscriber1);
eventBus.subscribe(event1, subscriber2);
// 在发布-订阅中心发布事件
eventBus.publish(event1, Hello, this is event data!);
// 输出
// Subscriber 1 received data: Hello, this is event data!
// Subscriber 2 received data: Hello, this is event data!
// 定义被观察者
class Subject {constructor() {this.observers [];}
addObserver(observer) {this.observers.push(observer);}
notifyObservers(data) {this.observers.forEach(observer {observer.update(data);});}
}
// 定义观察者
class Observer {update(data) {console.log(Observer received data:, data);}
}
// 定义观察者
class Observer2 {update(data) {console.log(Observer received data 2:, data);}
}
// 创建被观察者和观察者对象
const subject new Subject();
const observer1 new Observer();
const observer2 new Observer2();
// 将观察者添加到被观察者的观察者列表中
subject.addObserver(observer1);
subject.addObserver(observer2);
// 被观察者通知观察者更新
subject.notifyObservers(Hello, this is update data!);
1. 应用场景
1观察者模式 适用于对象之间关系紧密的场景例如 GUI 事件处理如按钮点击事件。 数据模型和视图之间的同步如 MVC 模式。
2发布-订阅模式 适用于对象之间关系松散或需要解耦的场景例如 消息队列系统。 跨组件通信如 Vue 的全局事件总线。 微服务架构中的事件驱动通信。 2. 优缺点对比
1观察者模式 优点 实现简单适合一对多的依赖关系。 被观察者和观察者之间的通信是实时的。 缺点 被观察者和观察者之间是强耦合的修改被观察者可能会影响观察者。 如果观察者过多通知所有观察者可能会影响性能。
2发布-订阅模式 优点 发布者和订阅者之间是松耦合的易于扩展和维护。 支持多对多的通信关系。 缺点 实现相对复杂需要引入消息中心。 消息中心可能会成为系统的性能瓶颈。
3.核心区别
1设计思想 观察者模式强调 直接绑定 和 明确的关系。被观察者知道观察者的存在并直接调用观察者的方法。 发布-订阅模式强调 解耦 和 间接通信。发布者和订阅者不知道彼此的存在它们通过消息中心进行通信。
2耦合度 观察者模式被观察者和观察者之间是 强耦合 的。被观察者需要直接持有观察者的引用。 发布-订阅模式发布者和订阅者之间是 松耦合 的。它们通过消息中心通信彼此不直接依赖。
3适用场景 观察者模式适合 直接绑定 的场景例如数据模型和视图之间的同步。 发布-订阅模式适合 解耦复杂系统 的场景例如跨组件通信或事件驱动架构。
