Observer妯″紡浜嬩欢椹卞姩涓や釜涓昏瀵硅薄锛屼竴涓槸琚瀵熷璞hangeobservable锛屼竴涓槸observer銆傝瑙傚療鐨勫璞′細鍥犱簨浠跺彂鐢熷彉鍖栵紝瑙傚療鑰呬細琚繖绉嶅彉鍖栨墍椹卞姩锛屽仛鍑轰竴浜涘弽搴斻€傜被Observable{constructor(){this.observers=[];}subscribe(func){this.observers.push(func);}unsubscribe(func){this.observers=this.observers.filter(observer=>observer!==func);}notify(change){this.observers.forEach(observer=>{observer.update(change);});}}classObserver{constructor(state){this.state=state;this.initState=鐘舵€侊紱}鏇存柊锛堟洿鏀癸級{璁╃姸鎬?this.state;switch(change){case'澧炲姞':this.state=++state;浼戞伅;妗堜緥鈥滃噺灏戔€濓細this.state=--state锛涗紤鎭?榛樿鍊硷細this.state=this.initState锛泒}}//浣跨敤varobservable=newObservable();varobserver1=newObserver(11);varobserver2=newObserver(21);observable.subscribe(observer1);observable.subscribe(observer2);observable.notify('澧炲姞');console.log(observer1.state);//12console.log(observer2.state);//22鍦ㄨ繖涓簨浠堕┍鍔ㄧ殑妗堜緥閲岋紝鐢ㄥ埌鐨勫氨鏄瀵熻€咃紙observer锛夋ā鍨嬨€傝瀵熻€呮ā寮忔槸琛屼负妯″紡涓殑涓€绉嶏紝涔熸槸鏈€甯歌鐪嬪埌鍜岃皥璁虹殑妯″紡銆傚畠鏄簨浠堕┍鍔ㄥ湪璁捐灞傞潰鐨勪綋鐜般€傛渶甯歌鐨勪簨浠堕┍鍔ㄦ槸UI浜嬩欢銆傛洿甯歌鐨勬槸缃戠粶鍜屽悗绔簨浠躲€俇I浜嬩欢姣斿鏈夋椂鍊欐垜浠渶瑕佺▼搴忛€氳繃鐩戝惉瑙︽懜灞忔垨鑰呮粦鍔ㄨ涓烘潵鍋氬嚭鍙嶅簲銆傜綉缁滀簨浠舵垜浠洰鍓嶇殑搴旂敤澶у閲囩敤XHR鏂瑰紡鍔ㄦ€佸姞杞藉唴瀹瑰苟鍦ㄥ墠绔睍绀恒€傞€氬父锛屼粬浠瓑寰呭鎴风璇锋眰閫氳繃缃戠粶鍒拌揪鏈嶅姟鍣紝鑾峰彇杩斿洖鐘舵€侊紝鐒跺悗鎵ц浠讳綍鎿嶄綔銆傚浜庡悗绔簨浠讹紝姣斿鍦∟ode.js涓紝瑙傚療鑰呮ā寮忎篃鏄潪甯搁噸瑕佺殑锛岀敋鑷虫槸鏍稿績妯″紡涔嬩竴锛屾墍浠ュ唴缃簡EventEmmiter鍑芥暟鏉ユ敮鎸併€備緥濡傦紝Node涓殑鈥渇s鈥濇ā鍧楁槸涓€涓敤浜庡鐞嗘枃浠跺拰鐩綍鐨凙PI銆傛垜浠彲浠ユ妸涓€涓枃浠跺綋浣滀竴涓璞★紝閭ｄ箞褰撳畠琚墦寮€銆佽鍙栨垨鍏抽棴鏃讹紝瀹為檯涓婃槸涓€涓笉鍚岀殑鐘舵€佷簨浠躲€傚湪杩欎釜杩囩▼涓紝濡傛灉瑕侀€氱煡鍜屽鐞嗚繖浜涗笉鍚岀殑浜嬩欢锛屽氨浼氱敤鍒拌瀵熻€呮ā寮忋€備簨浠堕┍鍔ㄤ笌寮傛瑙傚療鑰呮ā寮忛€氬父閮藉拰浜嬩欢椹卞姩鏈夊叧锛岄偅涔堝畠鍜屽紓姝ユ湁浠€涔堝叧绯诲憿锛熶竴浜涜绠楁満绋嬪簭锛屼緥濡傜瀛︽ā鎷熷拰鏈哄櫒瀛︿範妯″瀷锛屽湪璁＄畻涓婃槸鍙楅檺鐨勶紱瀹冧滑杩炵画涓嶆柇鍦拌繍琛岋紝娌℃湁鍋滈】锛岀洿鍒拌绠楀嚭缁撴灉銆傝繖灏辨槸鍚屾缂栫▼銆傜劧鑰岋紝澶у鏁扮幇瀹炰笘鐣岀殑璁＄畻鏈虹▼搴忛兘鏄紓姝ョ殑锛岃繖鎰忓懗鐫€绋嬪簭缁忓父涓嶅緱涓嶅湪绛夊緟鏁版嵁鍒拌揪鎴栨煇浜涗簨浠跺彂鐢熸椂鍋滄璁＄畻銆傜劧鍚庣瓑寰呮煇涓姸鎬佹垨鍔ㄤ綔鍚姩绋嬪簭杩愯銆傝瀵熻€呮ā寮忓拰寮傛鐨勫叧绯绘槸浜嬩欢鏄熀浜庡紓姝ヤ骇鐢熺殑锛屾垜浠渶瑕侀€氳繃瑙傚療鏉ュ搷搴斿熀浜庡紓姝ヤ骇鐢熺殑浜嬩欢銆侸avaScript鎻愪緵浜嗕竴绯诲垪鏀寔寮傛瑙傚療鑰呮ā寮忕殑鍑芥暟锛屽嵆callback銆乸romise/then銆乬enerator/next鍜宎ync/await銆傝鎴戜滑鍒嗗埆鐪嬬湅杩欎簺妯″紡銆傚洖璋冩ā寮忓湪JavaScript涓紝鍥炶皟妯″紡锛坈allbackpattern锛夋槸杩欐牱涓€绉嶆搷浣滐紝鎴戜滑鍦ㄤ竴涓嚱鏁扮殑鎿嶄綔瀹屾垚鍚庯紝灏嗙粨鏋滀綔涓哄弬鏁颁紶閫掔粰鍙︿竴涓嚱鏁般€傚湪鍑芥暟寮忕紪绋嬩腑锛岃繖绉嶄紶閫掔粨鏋滅殑鏂瑰紡琚О涓鸿繛缁紶閫掗鏍硷紙CPS锛宑ontinuouspassingstyle锛夈€傛剰鎬濇槸璋冪敤鍑芥暟涓嶇洿鎺ヨ繑鍥炵粨鏋滐紝鑰屾槸閫氳繃鍥炶皟浼犻€掔粨鏋溿€侰PS骞朵笉鏄涓€瀹氭槸寮傛鎿嶄綔锛屼篃鍙互鏄悓姝ユ搷浣溿€傚悓姝PS涓嬮潰鐨勫姞娉曞嚱鏁板ぇ瀹跺簲璇ュ緢瀹规槗鐞嗚В銆傛垜浠皢a鍜宐鐨勫€肩浉鍔犲苟杩斿洖缁撴灉銆傝繖绉嶆柟娉曠О涓虹洿鎺ユ牱寮忋€俙functionadd(a,b){returna+b;}`閭ｄ箞濡傛灉鍚屾CPS浣跨敤鍥炶皟鏂瑰紡浼氭€庝箞鏍峰憿銆傛湰渚嬩腑syncCPS涓嶇洿鎺ヨ繑鍥炵粨鏋滐紝鑰屾槸閫氳繃鍥炶皟杩斿洖a鍔燽鐨勭粨鏋溿€俧unctionsyncCPS(a,b,callback){callback(a+b);}console.log('鍚屾鍓?);syncCPS(1,2,result=>console.log(`result:${result}`));console.log('aftersynchronized');//beforesynchronization//result:3//aftersynchronization,asynchronousCPS杩欓噷鏈€缁忓吀鐨勪緥瀛愬氨鏄痵etTimeout銆傛垜浠娇鐢╯etTimeout浣跨粨鏋滃湪0.1绉掑悗杩斿洖銆傝繖閲屾垜浠彲浠ョ湅鍒帮紝鎵цsetTimeout鏃讹紝骞舵病鏈夌瓑寰呯粨鏋滐紝鑰屾槸杩斿洖asyncCPS锛屽苟鎵ц涓嬩竴涓猚onsole.log('afterasynchronous')浠诲姟銆俧unctionasyncCPS(a,b,callback){setTimeout(()=>callback(a+b),100);}console.log('beforeasync');asyncCPS(1,2,result=>console.log(`缁撴灉锛?{result}`))console.log('寮傛鍚?);//寮傛鍓?/寮傛鍚?/缁撴灉锛?涓婇潰鐨勪緥瀛愪腑锛屽嚱鏁拌皟鐢ㄧ殑椤哄簭鍜屾帶鍒舵祦鍙互鐢ㄤ笅鍥炬潵琛ㄧず锛氬洖璋冨湴鐙卞湪ES6涔嬪墠锛屾垜浠嚑涔庡彧鑳介€氳繃鍥炶皟鏉ヨ繘琛屽紓姝ュ洖璋冦€傛瘮濡備笅闈㈢殑渚嬪瓙锛屾垜浠鑾峰彇绁炲瀹濊礉鐨刴achineInfo鏈哄櫒鏁版嵁锛屽彲浠ュ熀浜嶺MLHttpRequest閫氳繃缃戜笂鐨勫叕鍏卞簱鑾峰彇銆傞渶瑕佸熀浜庤繖鏍蜂竴鏉￠摼pockmon=>moveInfo=>machineInfo銆?function(){varAPI_BASE_URL='https://pokeapi.co/api/v2';varpokemonInfo=null;varmoveInfo=null;varmachineInfo=null;varpokemonXHR=newXMLHttpRequest();pokemonXHR.open('GET',`${API_BASE_URL}/pokemon/1`);pokemonXHR.send();pokemonXHR.onload=function(){pokemonInfo=this.responsevarmoveXHR=newXMLHttpRequest();moveXHR.open('GET',pokemonInfo.moves[0].move.url);moveXHR.send();moveXHR.onload=function(){moveInfo=this.response;varmachineXHR=newXMLHttpRequest();machineXHR.open('GET',moveInfo.鏈哄櫒[0].machine.url);machineXHR.send();machineXHR.onload=function(){}}}})();鍙互鐪嬪埌锛屽湪杩欎釜渚嬪瓙涓紝鎴戜滑姣忎竴娆℃兂瑕佽幏鍙栦笅涓€灞傜殑鎺ュ彛鏁版嵁锛岄兘蹇呴』閲嶆柊鍒涘缓涓€涓柊鐨凥TTP璇锋眰锛岃€岃繖浜涘洖璋冨嚱鏁版槸涓€灞備竴灞傜殑銆傚鏋滄槸澶у瀷椤圭洰锛岃繖涔堝灞傜殑宓屽鏄潪甯哥碂绯曠殑浠ｇ爜缁撴瀯銆傝繖绉嶅绾у紓姝ュ祵濂楄皟鐢ㄧ殑闂涔熷彨鈥滃洖璋冨湴鐙憋紙callbackhell锛夆€濓紝灏辨槸鐢╟allback鍋氬紓姝ュ洖璋冩椂瑕侀潰瀵圭殑鍥伴毦銆傚浣曡В鍐宠繖涓棶棰樺憿锛熸垜浠潵鐪嬬湅promise鍜宎sync鐨勫嚭鐜版槸濡備綍瑙ｅ喅杩欎釜闂鐨勩€侲S6+鐨勫紓姝ユā寮忎粠ES6寮€濮嬶紝JavaScript閫愭笎寮曞叆浜嗗緢澶氱‖鏍稿伐鍏锋潵甯姪澶勭悊寮傛浜嬩欢銆備粠涓€寮€濮嬬殑Promise锛屽埌Generator鍜孖terator锛屽啀鍒板悗鏉ョ殑async/await銆侾romises鑷狤S6浠ユ潵锛孞avaScript寮曞叆浜嗕竴缁勬柊鐨勫唴缃伐鍏锋潵甯姪澶勭悊寮傛浜嬩欢銆傜涓€涓槸鎵胯锛岀劧鍚庢槸銆傛垜浠彲浠ヤ娇鐢╰hen鐨勮繛鎺ユ柟娉曪紝鍦ㄦ瘡娆etch涔嬪悗璋冪敤涓€涓猼hen鏉ヨ繘琛屼笅涓€灞傜殑鎿嶄綔銆?function(){varAPI_BASE_URL='https://pokeapi.co/api/v2';varpokemonInfo=null;varmoveInfo=null;varmachineInfo=null;varshowResults=()=>{console.log('瀹犵墿灏忕簿鐏?,pokemonInfo);console.log('Move',moveInfo);console.log('Machine',machineInfo);};fetch(`${API_BASE_URL}/pokemon/1`).then((response)=>{pokemonInfo=response;fetch(pokemonInfo.moves[0].move.url)}).then((response)=>{moveInfo=response;fetch(moveInfo.machines[0].machine.url)})銆傜劧鍚?(鍝嶅簲)=>{machineInfo=response;showResults();})})();鐢熸垚鍣ㄥ拰杩唬鍣ㄥ湪ES6鐗堟湰涓紝鍚屾椂寮曞叆浜哖romise鐒跺悗鏄敓鎴愬櫒锛圙enerator锛夊拰杩唬鍣紙Interator锛夌殑姒傚康銆俫enerator閫氳繃yield璁╁嚱鏁颁腑涓€琛屼唬鐮佺殑鎵ц鍏堟殏鍋滐紝鐒跺悗鎵ц澶栭儴浠ｇ爜锛屽綋澶栭儴浠ｇ爜鎵ц杩囩▼涓嚭鐜皀ext鏃讹紝鍐嶈繑鍥炲嚱鏁版墽琛屼笅涓€鏉¤鍙ャ€俧unction*getResult(){varpokemonInfo=yieldfetch(`${API_BASE_URL}/pokemon/1`);varmoveInfo=yieldfetch(pokemonInfo.moves[0].move.url);varmachineInfo=yieldfetch(moveInfo.machines[0].machine.url);}varresult=showResults();result.next().value.then((response)=>{returnresult.next(response).value}).then((response)=>{returnresult.next(response).value}).then((response)=>{returnresult.next(response).valueasync/await鍦‥S8鐗堟湰涓紝JavaScript寮曞叆浜哸sync/await鐨勬蹇碉紝杩欐牱姣忎竴涓幏鍙栦俊鎭殑寮傛鈥嬧€嬫搷浣滐紝姣斿pokemonInfo銆乵oveInfo绛夛紝閮藉彲浠ラ€氳繃await鐙珛杩涜锛屽啓娉曞彲浠ヤ繚鎸佺被浼煎悓姝ョ殑绠€娲佹€с€俛syncfunctionshowResults(){try{varpokemonInfo=awaitfetch(`${API_BASE_URL}/pokemon/1`)console.log(pokemonInfo)varmoveInfo=awaitfetch(pokemonInfo.moves[0].move.url)鎺у埗鍙般€傛棩蹇?moveInfo)varmachineInfo=awaitfetch(moveInfo.machines[0].machine.url)console.log(machineInfo)}catch(err){console.error(err)}}showResults();鏈枃涓轰簩鏈圖ay4瀛︿範绗旇锛屽唴瀹规潵鑷瀬瀹㈡椂闂淬€奐vascript杩涢樁瀹炴垬璇俱€嬶紝涓€璧疯繘姝ヰ煉煉?/p>
