WEB开发网      婵犻潧鍊婚弲顐︽偟椤栨稓闄勯柦妯侯槸閻庤霉濠婂骸浜剧紒杈ㄥ笚閹峰懘鎮╅崹顐ゆ殸婵炴垶鎸撮崑鎾趁归悩鐑橆棄闁搞劌瀛╃粋宥夘敃閿濆柊锕傛煙鐎涙ê鐏f繝濠冨灴閹啴宕熼鍡╀紘婵炲濮惧Λ鍕叏閳哄懎绀夋繛鎴濈-楠炪垽鎮归崶褍妲婚柛銊ュ缁傚秹鏁撻敓锟� ---闂佹寧娲╅幏锟�
开发学院网页设计JavaScript Javascript乱弹设计模式系列 - 观察者模式(Obser... 阅读

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

 2010-09-14 13:35:51 来源:WEB开发网 闂侀潧妫撮幏锟�闂佸憡鍨电换鎰版儍椤掑倵鍋撳☉娆嶄沪缂傚稄鎷�婵犫拃鍛粶闁靛洤娲ㄩ埀顒佺⊕閵囩偟绱為敓锟�闂侀潧妫撮幏锟�  闂佺ǹ绻楀▍鏇㈠极閻愬灚瀚梺鍨儏閳ь剙绉归弻銊р偓闈涙啞閻h京鈧敻鍋婇崰鏍х暦閿燂拷
核心提示: 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实现类就会被通知而更新自身相关的内容了。

页面实现效果如下:

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

点击“结算”按钮,如下:

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

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

总结

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

本篇到此为止,谢谢大家阅读Javascript乱弹设计模式系列(1) - 观察者模式(Observer)

上一页  1 2 3 4 5 6 

Tags:Javascript 乱弹 设计模式

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接