js中订阅者和观察者能否给一个实际开发中用例子？

Question

网上到处都是订阅者和观察者的代码实现，现在不知道什么场景，或者更简单实际的例子说明一下问题？

Answer 1

真实的例子——网站登录

假如我们正在开发一个商城网站，网站里有 header 头部、nav 导航、消息列表、购物车等模块。

如果它们和用户信息模块产生了强耦合，比如下面这样 的形式：

login.succ(function(data){

 header.setAvatar( data.avatar); // 设置 header 模块的头像

 nav.setAvatar( data.avatar ); // 设置导航模块的头像

 message.refresh(); // 刷新消息列表

 cart.refresh(); // 刷新购物车列表

}); 

等到有一天，项目中又新增了一个收货地址管理的模块，这个模块本来是另一个同事所写的,在最后部分加上这行代码：

 login.succ(function( data ){

 header.setAvatar( data.avatar);

 nav.setAvatar( data.avatar );

 message.refresh();

 cart.refresh();

 address.refresh(); // 增加这行代码

});

我们就会越来越疲于应付这些突如其来的业务要求，要么跳槽了事，要么必须来重构这些代码。

Answer 2

比如 Vue、React 等等框架中

视图层的输入能影响到模型层，反之亦然，即双向绑定

这里的 怎么影响，就是靠订阅者观察者，因为 js 没有 Java 之类语言有的反射能力，只能靠这个去做一些数据绑定的事情。