手写事件列队

事件列队遵循先进先出的原则 这种方法只能说是模拟。

function Ld(){
				let index = arguments.length; //获取参数列表长度
				const arr = []; //接收参数
				for(var i = 0 ;i<arguments.length;i++){
					if( typeof arguments[i] === 'function'){
						arr.push(arguments[i]);
					}
				}
				this.err =function(fn){
					if(typeof fn ==='function'){
					   	fn();
				   }else{
					   console.log('程序执行错误');
				   }
				   
				}	
				//在循环中执行回调函数
				try{
					while(arr.length>0){
						let fun = arr.shift();
						fun()
						// return fun; //返回会直接终结循环的运行
					}
					this.then = function(fn){
						if(typeof fn ==='function'){
						  	 fn()
						}
						return this;
					}
					return this;
				}catch{
				    this.err();
					return this;
				}finally{
					this.fina = function(fn){
						if(typeof fn ==='function'){
							fn();
						}
						return this;
					}
					return this;
				}
				
			}
			Ld(()=>console.log('输出1'),()=>console.log('输出2'))
			    .then(()=>console.log('执行成功'))
				.then(()=>console.log('链式调用'))
			    .fina(()=>console.log('最后都会执行'));

效果
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue的事件总线是一种在组件之间进行通信的机制,它允许一个组件触发事件并让其他组件监听和响应这些事件。如果你想手写一个简单的Vue事件总线,可以按照以下步骤进行: 1. 创建一个新的Vue实例作为事件总线: ```javascript // eventBus.js import Vue from 'vue'; const eventBus = new Vue(); export default eventBus; ``` 2. 在需要通信的组件中,导入事件总线并使用它: ```javascript // ComponentA.vue import eventBus from './eventBus'; export default { methods: { handleClick() { // 触发自定义事件,并传递数据 eventBus.$emit('customEvent', data); } } } ``` 3. 在需要监听事件的组件中,导入事件总线并使用它: ```javascript // ComponentB.vue import eventBus from './eventBus'; export default { created() { // 监听自定义事件 eventBus.$on('customEvent', this.handleCustomEvent); }, destroyed() { // 在组件销毁时取消事件监听 eventBus.$off('customEvent', this.handleCustomEvent); }, methods: { handleCustomEvent(data) { // 处理接收到的数据 } } } ``` 通过以上步骤,你就可以手写一个简单的Vue事件总线。在需要通信的组件中,使用`eventBus.$emit`来触发自定义事件,并可以传递数据;在需要监听事件的组件中,使用`eventBus.$on`来监听自定义事件,并在事件触发时执行相应的处理函数。记得在组件销毁时使用`eventBus.$off`来取消事件监听,以避免内存泄漏。 请注意,手写的Vue事件总线是一个简单的实现,它没有考虑到一些高级功能,如命名空间、多个事件总线实例等。如果需要更复杂的功能,可以考虑使用第三方插件或使用Vuex进行状态管理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值