阐述了利用JS设计模式的观察者模式实时改变页面中的金额的方法。分享给大家参考，如下：

观察者设计模式的概念；

有时称为发布/订阅模式，观察者模式定义了一对多的依赖关系，允许多个观察者(每个地方的主账户金额函数)同时监听某个主体对象(修改子账户金额后传递调用的对象发布者)。当这个主体对象的状态改变时(调用deliver方法)，它将通知所有的观察者对象，以便他们可以自动更新自己。

在会员管理系统中，主账户给子账户充值的功能。

场景：主账号1万元。子账户充值增加1000元的，应报主账户金额按1000元减少9000元；

页面上有很多位置需要实时更改。我该怎么办？

上图中显示了三个总余额；

如果通过子加减按钮调整账户余额，这三个地方的总余额也需要相对变化；

第一种方式：在一个函数中添加多个元素对象，可以是门面模式，简化重复代码的调用；

函数modifyPrice(price) { $('#a1 ')。html(价格)；$('#a2 ')。html(价格)；$('#a3 ')。html(价格)；$('#a4 ')。html(价格)；}第二种方式：使用观察者设计模式，如果状态改变，其相关依赖关系也会改变；

//订阅者函数a1(price){ console . log(price)；$('#a1 ')。html(价格)；}//订阅者函数a2(price){ console . log(price)；$('#a2 ')。html(价格)；}//订阅者函数a3(价格){console.log(价格)；$('#a3 ')。html(价格)；}//订阅者函数a4(价格){console.log(价格)；$('#a4 ')。html(价格)；}//publisher函数publisherprice () {this。订户=[]；这个。addsubscriber=function(subscriber){//some如果返回true，则表示这个. subscriber已经有了相同的订阅者。如果第一个比较值为真，它将返回真。如果不符合真，最后会返回假。var isExsit=this . subscribers . some(function(El){ return El==subscriber })；if(！isExsit){ this . subscribers . push(subscriber)；}退回这个；}这个。deliver=function (//foreach相当于这个。订户。foreach(功能(fn) {fn(价格)；});归还这个；}}客户端调用

var publisher price=new publisher price()；publisherprice . addsubscriber(a1)；publisherprice . addsubscriber(a2)；publisherprice . addsubscriber(a3)；publisherprice . addsubscriber(a4)；publisher price . deliver(200.00)；第二个有什么好处？

1.每个订阅者彼此独立，仅与发布者相关，并且与发布者具有一对多的关系，或者一对一的关系。2.每个用户可以根据自己的需要进行呼叫，而不会影响其他用户。3.与第一种方法相比，第二种方法的代码具有可读性和可维护性；

关于JavaScript的更多信息，请参考本网站的主题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。