当前位置: 首页 > Web前端 > HTML

不要混淆观察者模式和发布-订阅模式!

时间:2023-03-28 01:40:18 HTML

瑙傚療鑰呮ā寮忚瀵熻€呮ā寮忎腑閫氬父鏈変袱绉嶆ā鍨嬶紝瑙傚療鑰呭拰琚瀵熻€呫€備粠瀛楅潰涓婄悊瑙o紝灏辨槸褰撹瑙傚療瀵硅薄鍙戠敓鏌愮琛屼负鎴栧彉鍖栨椂锛屼細閫氱煡瑙傚療鑰咃紝瑙傚療鑰呮牴鎹繖绉嶈涓烘垨鍙樺寲杩涜澶勭悊銆備妇涓畝鍗曠殑鏍楀瓙馃尠锛氱幇鍦ㄦ湁涓埧涓滐紙瑙傚療鑰咃級鐨勬埧瀛愬緢鐏垎锛屼簬鏄湁涓€缇ゆ埧瀹紙瑙傚療鑰咃級鎯崇鎴垮瓙銆傛埧涓滀細鍙戝竷涓€浜涚鎴夸俊鎭紝绉熷闇€瑕佸強鏃朵簡瑙o紝鐪嬫埧灏卞ソ銆俢lassLandlord{//妤间富锛堣瑙傚療锛塩onstructor(){this.observerList=[]//瑙傚療鑰呭垪琛紙绉熸埛锛墋addObserver(observer){//娣诲姞涓€涓瀵熻€咃紙绉熸埛锛塼his.observerList.push(observer);}notify(data){this.observerList.forEach(observer=>observer.update(data))}}letperson_id=1classPerson{//鎯宠绉熸埧鐨勬埧瀹紙瑙傚療鑰咃級constructor(){this.id=person_id++}update(data){console.log("Tenant"+this.id+`-鏀跺埌${data.name}锛岄┈涓婃潵鐪嬫埧锛乣)}}letlandlord=newLandlord()//鎴夸笢letperson1=newPerson()//鎴垮1letperson2=newPerson()//鎴垮2letperson3=newPerson()//鎴垮3//鎴垮璁㈤槄鎴夸笢娑堟伅.addObserver(person1)landlord.addObserver(person2)landlord.addObserver(person3)//鎴夸笢鍙戝竷淇℃伅landlord.notify({name:'甯備腑蹇冭豹瀹呯┖缃?,price:10000})/*print*///绉熷1-鏀跺埌绌虹疆甯備腑蹇冭豹瀹咃紝椹笂鏉ョ湅鎴匡紒//绉熸埛2-鎺ュ埌甯備腑蹇冭豹瀹呯┖缃紝椹笂鏉ョ湅鎴匡紒//鎴垮3-鎺ュ埌甯備腑蹇冭豹瀹呯┖缃紝绗竴鏃堕棿鏉ョ湅鎴匡紒鍙戝竷璁㈤槄鑰呮ā寮忛偅涔堜粈涔堟槸鍙戝竷璁㈤槄鑰呮ā寮忓憿锛熷啀涓句釜绠€鍗曠殑渚嬪瓙馃尠锛氭埧涓滅殑鎴垮瓙澶伀鐖嗕簡锛岃秺鏉ヨ秺澶氱殑浜烘兂瑕佽闃呯鎴夸俊鎭湅鎴裤€傛埧涓滃珜楹荤儲锛屽氨鎵句腑浠嬶紙璋冨害涓績锛夊府浠栫鐞嗐€傛埧涓滃彧闇€瑕佸彂甯冩秷鎭粰涓粙锛屽嚭绉熷鎴峰彧闇€瑕佽闃呮満鏋勭殑娑堟伅锛屾埧涓滃拰鎴垮瑙h€︼紝鎴夸笢缁堜簬瀹夐潤浜唦classLandlord{//鎴夸笢锛堝彂甯冭€咃級constructor(agency){this.agency=agency}publish(type,price){this.agency.publish(type,price)//鍚戜腑浠嬪彂甯冧俊鎭瘆}letperson_id=1classPerson{//鎯宠绉熸埧瀛愮殑绉熸埛锛堣闃呰€咃級constructor(agency){this.id=person_id++this.agency=agency}subscribe(type){this.agency.subscribe(type,this);}update(type,price){console.log(`Tenant${this.id}-鏀跺埌${type}鐨勭鎴夸俊鎭紝鎴戣寰?{price}涓€涓湀寰堜究瀹滐紒`)}}classAgency{//涓粙鏈烘瀯锛堣皟搴︿腑蹇冿級constructor(){this.dispatcher={}}subscribe(type,subscriber){//璁㈤槄if(!this.dispatcher[type]){this.dispatcher[type]=[]}this.dispatcher[type].push(subscriber)}publish(type,price){//鍙戝竷letsubscribers=this.dispatcher[type]if(!subscribers||!subscribers.length)returnsubscribers.forEach(subscriber=>{璁㈡埛.up鏃ユ湡锛堢被鍨嬶紝浠锋牸锛墋锛夛紱}}letagency=newAgency()//agencyletperson1=newPerson(agency)//tenant1letperson2=newPerson(agency)//tenant2letperson3=newPerson(agency)//tenant3//绉熸埛璁㈤槄淇℃伅person1.subscribe('璞畢')person2.subscribe('璞畢')person3.subscribe('璞畢')person3.subscribe('villa')letlandlord=newLandlord(agency)//鎴夸笢//鎴夸笢鍙戝竷淇℃伅landlord.publish('璞畢',10000);landlord.publish('鍒',20000);/*print*///鎴垮1-鏀跺埌璞畢鍑虹淇℃伅锛屾垜瑙夊緱10000涓€涓湀闈炲父渚垮疁锛?/鎴垮2-鏀跺埌璞畢鍑虹淇℃伅锛岃寰?0000涓€涓湀寰堜究瀹滐紒//鎴垮3-鏀跺埌璞畢鐨勫嚭绉熶俊鎭悗锛岃寰?0000涓€涓湀寰堜究瀹滐紒//绉熷3-鏀跺埌鍒鐨勫嚭绉熶俊鎭悗锛屾垜瑙夊緱20000涓€涓湀寰堜究瀹滐紒瑙傚療鑰呮ā寮忓叿鏈夐珮鍐呰仛鐨勭壒鐐癸紝鍙€傚悎鍦ㄥ悓涓€涓ā鍧楁垨缁勪欢涓娇鐢紱褰撹鐩戞帶鐨勫璞″拰鎵ц鍔ㄤ綔涓嶅湪鍚屼竴涓ā鍧楁垨缁勪欢涓椂锛岃闃?鍙戝竷鐨勬ā寮忔瘮杈冮€傚悎锛屽彲浠ュ緢濂界殑瑙e喅鑰﹀悎锛屼笉浼氱牬鍧忓寘銆傛渶鍚庯紝鎴戞槸鍓嶇鏂颁汉鍛ㄦ檽闃炽€傛垜鍐欐枃绔犺褰曡嚜宸卞湪鏃ュ父宸ヤ綔鍜屽涔犲唴瀹逛腑閬囧埌鐨勯棶棰橈紝浠ユ彁楂樿嚜宸便€傚鏋滄偍瑙夊緱鏈枃瀵规偍鏈夌敤锛岃鐐硅禐榧撳姳鐪嬬湅~