Javascript乱弹设计模式系列 － 观察者模式(Observer)

核心提示： 6. 创建一个OrderSend.js，编写相关的JS代码了，Javascript乱弹设计模式系列 － 观察者模式(Observer)(6)，以下是核心代码：$("#btnSubmit").click(function(){varproductName=$("

6. 创建一个OrderSend.js，编写相关的JS代码了，以下是核心代码：

$("#btnSubmit").click(function(){
　　varproductName=$("#productName").html();
　　varproductPrice=parseFloat($("#productPrice").html());
　　varrecommend=parseInt($("#recommend").html());
　　varproductCount=parseInt($("#productCount").html());
　　varorderData=newOrderData();　　　　　　//实例化Publisher的实现类orderData
　　varmsgBox=newMsgBox(orderData);　　　　//orderData作为MsgBox构造函数的参数进行传递
　　varthisOrder=newThisOrder(orderData);　//orderData作为ThisOrder构造函数的参数进行传递
　　varorderList=newOrderList(orderData);　//orderData作为OrderList构造函数的参数进行传递
　　orderData.SubmitOrder(productName,productPrice,recommend,productCount);　　//提交相关商品信息
});

通过点击页面上的“提交”，将三个Subscriber实现类注册到OrderData(Publisher实现类)中去，这样只要OrderData对象提交新商品信息上去，也就是状态更新，那么三个Subscriber实现类就会被通知而更新自身相关的内容了。

页面实现效果如下：

点击“结算”按钮，如下：

这里只是简单的对于三个Subscriber进行更新，关于update方法中的实现，这里不在贴出来了，具体可以下载源代码查看看；在update方法中可以编写你想要的操作以及显示结果，如利用$.ajax进行数据操作和数据展示，这里就留着大家自己发挥吧:)

总结

该篇文章用Javascript来设计观察者模式的思路，通过触发变化通知的方式来请求状态更新，利用一个简单的购书网站来实践。

本篇到此为止，谢谢大家阅读！