js31---觀察者模式
阿新 • • 發佈：2017-05-21
htm tle char 如果 -- type org asc proto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type=text/javascript charset=utf-8> //發布者(被觀察者) var Publish = function(name){ this.name = name ; this.subscribers = [];//所有的訂閱者數組(每一個元素是函數類型fn) }; //發布者發布消息 Publish.prototype.deliver = function(news){//當成員函數看 var publish = this; this.subscribers.forEach(function(fn){//fn是遍歷過程中每一個元素 fn(news,publish); //把新消息發給一個訂閱者 }); return this ; //return this 可以繼續調用本函數或其他函數 }; Function.prototype.subscribe = function(publish){//當成員函數看 var sub = this;//some:數組的每一個元素，如果其中有一個返回true,那麽整體返回true var alreadyExists = publish.subscribers.some(function(item){ return item === sub ; }); //如果當前出版社裏不存在這個人 則將其加入其中 if(!alreadyExists){ publish.subscribers.push(this); } return this; //return this 可以繼續調用本函數或其他函數 }; Function.prototype.unsubscribe = function(publish){//當成員函數看 var sub = this ; // filter (過濾函數:循環便利數組的每一個元素，執行一個函數如果不匹配，則刪除該元素) publish.subscribers = publish.subscribers.filter(function(item){ return item !== sub ; }); return this; //鏈式編程 }; //發布者對象 var pub1 = new Publish(‘第一報社‘); //觀察者(訂閱者) var sub1 = function(news){ //sub1當成函數地址，當成普通變量看，也就是sub1類型是函數類型而已。 alert(arguments[1].name + ‘:‘ + news + "sub1"); }; var sub2 = function(news){ alert(arguments[1].name + ‘:‘ + news + "sub2"); }; sub1.subscribe(pub1);//訂閱就是加入到發布者的數組中 sub2.subscribe(pub1); pub1.deliver(‘text1‘); sub1.unsubscribe(pub1); //取消訂閱 </script> </head> <body> </body> </html>
Function.prototype：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type=text/javascript charset=utf-8> var Publish = function(name){ this.name = name ; }; Function.prototype.subscribe = function(){ //加載函數類型的變量上 alert(123); }; var g = function(){} g.subscribe();//123 var f = new Publish("sss"); f.subscribe();//f.subscribe is not a function function h(){} h.subscribe();//123 </script> </head> <body> </body> </html>
js31---觀察者模式