发布订阅模式

最新推荐文章于 2023-11-29 20:16:55 发布

dongsdh

最新推荐文章于 2023-11-29 20:16:55 发布

阅读量115

点赞数

分类专栏： javascript 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/dongsdh/article/details/103601279

版权

javascript 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

前言：
应用场景：项目做久了以后会越来越大，当很多人去做同一个人项目的时候，里面的逻辑耦合度当然是越低越好，有这么一个场景

需求：3个人同时开发一个项目的时候，分别开发登录模块login()，商品模块showshoplist()，书籍模块showbooklist()。

当用户登录成功的时候，需要用户信息去刷新商品模块，书籍模块。

方法1：开发登录模块的人，当用户登录成功后，去执行刷新商品模块showshoplist()，刷新书籍模块showbooklist()，这个时候，他就必须去了解商品模块，书籍模块各种重置方法，这个时候，来了一个需求模块，登录成功后还有执行一个刷新联系人showpeople() 如果这个时候，他正在休假，那这简直是个噩梦，他要赶回来写上showpeople()
方法2：登录成功后，抛出一个方法，让所有开发模块的同事，都来监听这个方法，当在度假的时候，来新的需求模块需要用户信息时，监听一下就好了

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>监听登录状态</title>
	<style>
		.loginbox{
			border: 1px solid red;;
		}
		.shoplist{
			border: 1px solid red;
		}
		.booklist{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<!--登录模块-->
	<div class="loginbox">
		姓名：<input type="text" class="inp1"/><br />
		年龄：<input type="text" class="inp2"/><br />
		<button class="login">登录</button>
	</div><br />
	
	<!--商品列表-->
	<div class="shoplist"></div><br />
	
	<!--书籍列表-->
	<div class="booklist"></div>
	
	
	
	
	<script src="jquery.min.js"></script>
	<script>
		
//		登录模块
		$('button').click(function(){
			login();
		})
		function login(){
			var  data={
				name:'',
				age:'',
			}
			data.name = $('.inp1').val();
			data.age = $('.inp2').val();
			if(data.name=='' || data.age==''){
				alert('姓名或年龄为空,请重新输入')
				return false;
			}
			$('.login').trigger('logingood',data);
		}
		
		
		
		
//		显示商品模块
		showshoplist()
		function showshoplist(data) {
			console.log('获取商品列表');
			let shtml='<p>商品列表</p>'
			if(data!=undefined){
				shtml='<p>'+data.name+'的收藏商品列表，用户年龄是'+data.age+'</p>'
			}
		    for(var i=0,len=4;i<len;i++){
		        shtml+='<p>商品'+(i+1)+'</p>'
		    }  
		    $('.shoplist').html(shtml);
		}
		$('.login').on('logingood',function(event,data){
    		showshoplist(data)
    	})
		
		
//		显示书籍模块
		showbooklist()
		function showbooklist(data) {
			console.log('获取书籍列表');
			let shtml='<p>书籍列表</p>'
			if(data!=undefined){
				shtml='<p>'+data.name+'的收藏书籍列表，用户年龄是'+data.age+'</p>'
			}
		    for(var i=0,len=5;i<len;i++){
		        shtml+='<p>商品'+(i+1)+'</p>'
		    }  
		    $('.booklist').html(shtml);
		}
		$('.login').on('logingood',function(event,data){
    		showbooklist(data)
    	})
		
		
//		如果以后有新的模块的时候
		function fun(){
			//to do
		}
		$('.login').on('logingood',function(event,data){
    		fun()
    	})
	</script>
</body>
</html>

效果：

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
发布订阅模式

前言：应用场景：项目做久了以后会越来越大，当很多人去做同一个人项目的时候，里面的逻辑耦合度当然是越低越好，有这么一个场景需求：3个人同时开发一个项目的时候，分别开发登录模块login()，商品模块showshoplist()，书籍模块showbooklist()。当用户登录成功的时候，需要用户信息去刷新商品模块，书籍模块。方法1：开发登录模块的人，当用户登录成功后，去执行刷新商品模...
复制链接

扫一扫

专栏目录