模拟事件监听触发移除 + 模块化 +数组扁平化_模块化一个事件触发函数-CSDN博客

本文链接：https://blog.csdn.net/qq_26239917/article/details/103333846

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		let Event = (function() {
			funcList = {},
				listen = function() {
					let key = Array.prototype.shift.call(arguments)
					let func_name = arguments[0]
					let obj = {}
					obj[func_name] = func_name
					if (!funcList[key] || funcList[key].length == 0) {
						funcList[key] = []
						funcList[key].push(obj)
					} else {
						funcList[key].push(obj)
					}
				}
			trigger = function() {
				let key = Array.prototype.shift.call(arguments);
				let operation_list = funcList[key]
				if (!operation_list || operation_list.length == 0) {
					console.log("监听对象不存在")
					return false
				}
				for (let operation_list_item of operation_list) {
					let func_name = Object.keys(operation_list_item)[0]
					if (func_name == arguments[0]) {
						let fun = eval(func_name)
						if (typeof fun == 'function') {
							fun()
							return;
						}
						console.log(fun)
					}
				}
			}

			remove = function() {
				// console.log('remove')
				let key = Array.prototype.shift.call(arguments);
				let func_name = arguments[0];
				let operation_list = funcList[key]
				//数组为空
				if (!operation_list || operation_list.length == 0) {
					console.log("事件不存在")
					return false
				}
				//数组里面没有这个
				for (let i = 0, len = operation_list.length; i < len; i++) {
					let operation_list_item = operation_list[i]
					let obj_name = Object.keys(operation_list_item)[0];
					let valLists = getArrObjAttrValue(operation_list, obj_name)
					console.log(valLists, func_name)
					console.log(valLists.includes(func_name))
					if (!valLists.includes(func_name)) {
						console.log("函数不存在")
						return;
					}
					if (obj_name == func_name) {
						console.log("operation_list", i, operation_list)
						operation_list.splice(i, 1);
						console.log("删除成功")
						return;
					}
				}
			}
			return {
				listen,
				trigger,
				remove
			}
		})()
		Event.listen('caculate', 'add')
		Event.listen('caculate', 'del')
		Event.listen('showMsg', 'show')
		Event.listen('showMsg', 'hide')
		Event.trigger('caculate', 'add')
		Event.trigger('showMsg', 'show')
		Event.trigger('caculate', 'del')
		Event.trigger('showMsg', 'hide')
		Event.remove('caculate', 'del')
		Event.remove('caculate', 'add')
		//返回value数组
		function add() {
			console.log('add');
		}

		function show() {
			console.log('show');
		}

		function del() {
			console.log('del');
		}

		function hide() {
			console.log('hide');
		}

		function getArrObjAttrValue(obj) {
			if (obj.constructor != Array) return;
			if (!obj || obj.length == 0) return;
			let valList = []
			obj.forEach(item => {
				valList.push(Object.keys(item))
			})
			valList = combine(valList)
			return valList
		}

		function combine(arr) {
			var newArr = [];
			arr.forEach((item, index) => {
				if (item.constructor == Array) {
					var temp = combine(item);
					newArr = newArr.concat(temp);
				} else {
					newArr.push(item)
				}
			})
			return newArr;
		}
		let a = [{
				a: 'xxx'
			},
			{
				b: 'xyyyxx'
			}
		]
		console.log(getArrObjAttrValue(a))
	</script>
</html>