前言:
应用场景:项目做久了以后会越来越大,当很多人去做同一个人项目的时候,里面的逻辑耦合度当然是越低越好,有这么一个场景
需求: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>
效果: