Posted 2021-04-30 鍓嶇琛ョ粰绔?/a> 鍝嶅

锛堭煈嗙偣鍑?/span>鍓嶇琛ョ粰绔?/span>锛屽彲蹇€熷叧娉級

鎹姣忎釜绋嬪簭鍛樼瓑鐢垫鐨勬椂鍊欓兘鎬濊€冭繃鐢垫鐨勮皟搴︾畻娉曗€︽墍浠ユ€庝箞鍔ㄦ墜瀹炵幇涓€涓憿锛熻櫧鐒惰繖涓満鏅矊浼兼湁浜涘鏉傦紝浣嗗嵈闈炲父閫傚悎浣跨敤鍝嶅簲寮忕紪绋嬬殑鑼冨紡鏉ュ鐞嗐€備笅闈㈡垜浠細鍦?RxJS 鍜?Vue 鐨勫熀纭€涓婏紝涓€姝ユ瀹炵幇鍑轰竴涓渶灏忓彲鐢ㄧ殑鐢垫璋冨害妯℃嫙 Demo銆?/p>

Demo

涓轰簡閬垮厤璇昏€呫€愯劚浜嗚￥瀛愬氨缁欐垜鐪嬭繖涓紵銆戠殑鍚愭Ы锛屽湪姝ゆ垜浠厛灞曠ず 50 琛屼唬鐮佹渶缁堟墍鑳藉疄鐜扮殑鏁堟灉锛氫竴鍙?10 灞傛ゼ鐨勭數姊紝浣犲彲浠ュ湪姣忓眰妤兼寜 鈫?/code> 鍙敜鐢垫鎶婁綘閫佸埌涓€妤笺€傚湪澶氫釜妤煎眰鏍规嵁涓嶅悓鏃跺簭鍙敜鍑虹數姊殑鏃跺€欙紝杩欎釜妯℃嫙鍣ㄧ殑鍗囬檷鐘舵€佸簲褰撴槸鍜屾棩甯哥殑浣撻獙涓€鑷寸殑銆傚厛鍒€ョ潃鍚愭Ы瀹冧负浠€涔堣繖涔堢畝闄嬶紝鎶婂畠瀹炵幇鎴愯繖鏍风殑鐞嗙敱浼氬湪涓嬫枃涓參鎱粙缁嶐煒?/p>




閾炬帴 demo锛?/span>

https://ewind.us/h5/rx/final.html

寰俊涓婄殑 iframe 鏍囩涓嶈兘姝ｅ父宸ヤ綔锛孌emo 涓嶅Θ鏌ラ槄 Blog Post

https://ewind.us/2017/rx-elevator-demo/

Get Started

鍦ㄤ粙缁嶅疄闄呯殑缂栫爜缁嗚妭鍓嶏紝鎴戜滑涓嶅Θ鍏堣€冭檻娓呮鏈€鍩虹鐨勬€濊矾锛屽嵆濡備綍琛ㄨ揪鐢垫鐨勮皟搴︼紵鎴栬€呮崲涓€绉嶈〃杩版柟寮忥紝杩欏叾瀹炴槸涓洿涓烘湁瓒ｇ殑璇濋锛?span class="mq-31">濡備綍浣跨敤浠ｇ爜鎶借薄鍑轰竴鍙扮數姊憿锛?/span>

涔熻楂樹腑鐗╃悊瀛﹀緱濂界殑鍚屽棣栧厛浼氳繖涔堟兂锛氱數姊彲浠ユ娊璞℃垚鐢变竴鏉＄怀瀛愭寕鐫€鐨勭洅瀛愶紝鎴戜滑鍙互浼犲叆瀹冪殑閲嶉噺 m銆佺鍦伴珮搴?h銆佸綋鍓嶉€熷害 v銆佸綋鍓嶅姞閫熷害 a锛岀劧鍚庣敤涓€绯诲垪绮惧鐨勫叕寮忔潵鎻忚堪瀹冪殑杩愬姩杞ㄨ抗鈥︹€︽伃鍠滀綘锛岀悊绉戞€濈淮鎶婁綘寮曞叆姝ч€斾簡馃檮璇锋斁蹇冿紝鏈€鍚庣殑 50 琛屼唬鐮侀噷涓嶆秹鍙婁换浣曢珮涓墿鐞嗙煡璇?/span>銆?/p>

鍊掓槸鏈変釜鍏充簬鐢垫鐨勮€佹瀛愭洿绗﹀悎鎴戜滑鐨勬娊璞★細銆愪竴涓€佸睂涓濈湅鍒颁竴涓€佸お濠嗚繘浜嗙數姊棿锛屼竴浼氬嚭鏉ョ殑灞呯劧鏄釜鐧藉瘜缇庯紝浜庢槸灏辨兂鐫€瑕佹槸甯︿簡鑷繁鐨勮€佸﹩鏉ヨ澶氬ソ鍟娾€︹€︺€戣繖閲屽鐢垫鐨勬娊璞★紝鍙笉杩囨槸涓€鎵囨暟瀛椾細璺冲姩鐨勯棬鑰屽凡銆傛垜浠笉闇€瑕佸叧蹇冨畠鐨勬満姊板埌搴曟€庢牱杩愪綔锛屽浜庡畠鐨?span class="mq-39">鐘舵€?/span>锛屽彧瑕佺煡閬撶數姊彛娑叉櫠灞忎笂鐨?span class="mq-40">鏂瑰悜鍜?span class="mq-41">妤煎眰鍙?/span>灏辫冻澶熶簡銆傚棷锛岃繖灏辨槸 Duck Typing 鐨勫伐绉戞€濈淮锛?/p>

杩欎袱绉嶆€濈淮鏈変粈涔堝尯鍒憿锛熻鎴戜滑鏉ヨ€冭檻鏈€绠€鍗曠殑鎯呭舰锛氬湪鍗佹ゼ鎸変竴涓敭锛屾妸鐢垫浠庝竴妤煎彨涓婃潵銆傝繖鏃讹紝涓ょ鎶借薄鏂规硶鎵€鎻忚堪鐨勫唴瀹逛細鏈夊緢澶х殑涓嶅悓锛?/p>

• 娉曚竴锛氱洅瀛愬紑濮嬩互閫熷害 v 鍚戜笂杩愬姩锛屽湪鍗佹ゼ鐨勯珮搴?h 鍋滀笅鏉ャ€?/p>

• 娉曚簩锛氭ゼ灞傛暟瀛椾粠 1 寮€濮嬶紝鎸夊浐瀹氭椂闂撮棿闅斿姞涓€锛屽埌 10 鍋滄銆?/p>

鍡紝鐪嬭捣鏉ュ悗鑰呭疄鐜拌捣鏉ュ緢绠€鍗曞晩锛氬彧瑕佹瘡闅斾竴绉?nbsp;setTimeout 鏀逛竴涓嬫ゼ灞傛暟锛岃繖涓數姊氨妯℃嫙鍑烘潵鍟︷煒庢伃鍠滀綘锛屼綘璺宠繘浜嗗紓姝ヤ簨浠舵祦鐨勫ぇ鍧戦噷锛岃€冭檻杩欎簺闇€姹傦細

• 浣犲湪浜屾ゼ鎯充笅妤硷紝鍙戠幇鐢垫姝ｄ粠涓夋ゼ涓嬫潵銆傝繖鏃跺€欑數姊細鎹庝笂浣狆煒?/p>

• 浣犲湪鍗佹ゼ鎯充笅妤硷紝鍙戠幇鐢垫姝ｅ湪涔濇ゼ寰€涓嬭蛋銆傝繖鏃跺€欑數姊苟涓嶄細鍥炲ご鏉ユ帴浣狆煒?/p>

• 浣犲湪鍗佹ゼ鎯充笅妤硷紝鍙戠幇鐢垫姝ｄ粠浜屾ゼ涓婃潵銆備綘浠ヤ负瀹冧細鍋滃湪浣犺繖锛岀粨鏋滃叾瀹炴槸浜屽崄妤肩殑娣疯泲鍙殑鐢垫馃槨

• 鈥︹€?/p>

濂界殑锛岃繖鏃跺€?nbsp;setTimeout 鎭愭€曚笉澶熺敤鍟︼紝鑷充簬浠€涔?Redux Flux MobX鈥︹€﹀啓杩欑闇€姹備篃瑕佹帀灞傜毊銆傚棷锛屽埌姝ゆ垜浠殑鍓嶆垙缁堜簬宸笉澶氫簡锛屾槸鏃跺€欎粙缁嶆湰鏂囩殑涓昏 Reactive Programming 鍝嶅簲寮忕紪绋嬩簡馃榾

鍦?Reactive 鑼冨紡涓紝Stream 浜嬩欢娴佺殑姒傚康闈炲父寮哄ぇ銆傛垜浠兘鐭ラ亾璁＄畻鏈哄鐞嗙殑鏁版嵁鏈川涓婇兘鏄鏁ｇ殑锛屽嵆渚挎槸灏忓濮愮殑瑙嗛锛屼篃瑕佹媶鎴愪竴绉?24 甯с€傚浜庢垜浠殑鐢垫妯℃嫙鍣紝瀹冪殑杈撳叆鍏跺疄灏辨槸鐢ㄦ埛鍦ㄥ悇涓ゼ灞備笂闅忔椂闂村彉鍖栫殑涓€绯诲垪绂绘暎鎿嶄綔锛岃緭鍑哄垯鏄竴涓綋鍓嶆椂闂存ゼ灞傚拰鏂瑰悜鐨勭姸鎬?/span>銆傝繖鏍凤紝鎴戜滑灏辫兘澶熶娇鐢?Stream 鏉ヨ〃杈炬ā鎷熷櫒鐨勮緭鍏ヤ簡銆?/p>

Stream 鍜屾湸绱犵殑浜嬩欢鐩戝惉鍣ㄦ湁浠€涔堝尯鍒憿锛烻tream 鏄彲浠?span class="mq-61">鍦ㄦ椂闂寸淮搴︿笂杩涜缁勫悎銆佺瓫閫夌瓑鍙樻崲鐨?/span>銆傚鏋滆寰楄繖涓娉曞緢鎶借薄锛屼笉濡ㄨ€冭檻杩欎釜渚嬪瓙锛氬湪鍗佹ゼ鎸変竴娆＄數姊寜閽紝妤煎眰鏁板瓧浼氫粠 1 閫愪釜璧板埌 10銆傝繖鏃讹紝鎴戜滑灏辨妸涓€涓簨浠舵祦涓殑涓€涓簨浠讹紝鏄犲皠涓轰簡涓€涓緷娆¤Е鍙戝崄娆′簨浠剁殑鏂版祦銆傚啀姣斿锛屾垜浠彧瑕佹妸浠庝竴妤煎埌鍗佹ゼ鐨勪簨浠舵祦鍜?span class="mq-64">浠庡崄妤煎埌涓€妤?/span>鐨勪簨浠舵祦绠€鍗曞湴杩炴帴璧锋潵锛屽氨瀹炵幇浜?span class="mq-66">涓婃ゼ鎺ヤ汉鍐嶈繑鍥?/span>鐨勭數姊熀鏈姛鑳斤紒

璇濋兘璇村埌杩欎唤涓婁簡锛屼篃宸笉澶氭槸鏃跺€?Show Me the Code 浜嗮煠撲笅闈㈣鎴戜滑鏉ヤ竴姝ユ浣跨敤 Reactive 瀹炵幇 Demo 鍚с€?/p>

Step 1

鍏堢畝瑕佷粙缁嶄竴涓嬭繖涓?Demo 鐨勬妧鏈儗鏅細涓虹畝鍗曡捣瑙侊紝鎴戜滑閫夋嫨浜?Vue 鏉ュ厖褰撶畝鍗曠殑瑙嗗浘灞傦紝閫夋嫨浜?nbsp;RxJS 杩欎釜 Reactive 搴撴潵瀹炵幇鏍稿績鐨勫姛鑳姐€傚彈闄愪簬绡囧箙锛屾垜浠笉浼氳鐩?Vue 鐨勪娇鐢ㄧ粏鑺傦紝鍙粙缁?Reactive 鐩稿叧鐨勯噸瑕佺壒鎬ю煓冨彟涓€鏂归潰锛屼粠 0 鍒?1 鎬绘槸鏈€闅剧殑锛屽洜姝?Step 1 鐨勫唴瀹逛篃浼氭槸鏈€澶氱殑馃槄

涓婃枃涓紝鎴戜滑宸茬粡鎻愬埌浜?Rx 涓祦鐨勫己澶с€傞偅涔堬紝鎴戜滑棣栧厛鑰冭檻杩欎釜鏈€鏈€鍩烘湰鐨勯渶姹傚惂锛?span class="mq-76">鍦ㄥ崄妤兼寜涓€涓?nbsp;鈫?/code>锛岀數姊暟瀛椾粠 1 寮€濮嬮€愭閫掑銆傝繖鏃跺€欙紝鎴戜滑灏变粠鐐瑰嚮浜嬩欢娴佷腑鐨勪竴涓簨浠讹紝鏄犲皠鍑轰簡涓€涓柊娴侊細

import { Observable } from 'rxjs'const stream = Observable  // 灏?DOM 鐨勬ゼ灞傜偣鍑讳簨浠惰浆鍖栦负 Observable 浜嬩欢娴?/span>
  .fromEvent(emitter, 'click')  // 杈撳叆浜嬩欢娴侊紝杈撳嚭闂撮殧 1s 瑙﹀彂鏂颁簨浠剁殑鏂版祦
  .interval(1000)// 娴佺殑涓€绯诲垪寮傛杈撳嚭鍙互琚闃?/span>stream.subscribe(x => console.log(x))

鎵ц涓婇潰鐨勪唬鐮侊紝鐐瑰嚮鎸夐挳鏃讹紝灏变細姣忕瑙﹀彂涓€涓粠 0 寮€濮嬭嚜澧炵殑浜嬩欢娴佷簡锛屾瘡绉掍篃閮借兘鍦ㄦ帶鍒跺彴鐪嬪埌绋冲畾鐨勮緭鍑恒€備絾杩欏苟涓嶇鍚堣姹傦細鎬庢牱璁╂ゼ灞傚彧澧炲姞鍗佹鍛紵鎴戜滑寮曞叆 take 鏂规硶锛?/p>

const up = Observable
  .fromEvent(emitter, 'click')
  .interval(1000)  // 鍙細瑙﹀彂鍗佹锛?/span>
  .take(10)

鍡紝鎺ヤ笅鏉ワ紝鎴戜滑鍙戠幇杩樻湁涓€鐐逛笉澶紭闆咃細妤煎眰鏁板瓧铏界劧鎸夎姹傞€掑浜嗭紝浣嗗嵈鏄粠 0 鍒?9锛岃€岄潪浠?1 鍒?10锛堜綘瀹舵湁 0 灞傚悧锛燂級瑕佹寜鐓х壒瀹氳鍒欐槧灏勫嚭鏂版祦锛屾垜浠洿鎺ヤ娇鐢ㄧ啛鎮夌殑 map鏂规硶灏辫锛?/p>

const up = Observable
  .fromEvent(emitter, 'click')
  .interval(1000)
  .take(10)  // +1 馃惛
  .map(x => x + 1)

鐜板湪鎴戜滑鑳藉浠庝竴妤煎埌鍗佹ゼ浜嗭紝浣嗘槸鎬庝箞涓嬫ゼ鍛紵鎴戜滑鍏堥€犱竴涓粠鍗佹ゼ鍒颁竴妤肩殑 Stream 鍚ю煒?/p>

const down = Observable
  .interval(1000)
  .map(x => 10 - x)
  .take(10)

鐢垫闇€瑕佸厛 UP 涓婃ゼ锛屽啀 DOWN 涓嬫ゼ銆備负姝わ紝鎴戜滑鐩存帴 concat 涓や釜 Stream 灏辫锛?/p>

function getStream () {  // 澹版槑 Up 鍜?Down...
  return up.concat(down) 
}

鐩墠鎴戜滑宸茬粡浣跨敤浜?nbsp;interval / take / map / concat 杩欏嚑涓?API 浜嗭紝涓嶈繃绂荤湡姝ｅ畬鎴?Step 1 杩欎竴姝ワ紝杩樻湁涓€涓潪甯稿叧閿殑鍦版柟锛?span class="mq-140">鍦ㄤ笉鍚屾ゼ灞傚娆℃寜涓嬬數姊寜閽椂锛屽浣曟帶鍒朵簨浠舵祦锛?/span>

浠庤繖鍑犱釜 API 鐨勪娇鐢ㄤ笂锛屾湁浜涢€兼牸姣旇緝楂樼殑鍚屽涔熻浼氬彂鐜帮紝鎴戜滑鐨勭紪鐮佺畻娉曪紝鍏跺疄鏈変簺鎺ヨ繎鎷夋櫘鎷夋柉鐨?span class="mq-144">鍐冲畾璁?/span>锛氱數姊殑鎸夐挳琚寜涓嬪悗锛屽畠鍦?span class="mq-145">鏈潵涓€娈垫椂闂村唴鐨勪竴绯诲垪鐘舵€佸彉鍖栧湪閭ｄ竴涓椂鍒诲氨宸茬粡琚喅瀹氫簡銆傛崲鍙ヨ瘽璇达紝缁欐垜涓€涓冻澶熺簿纭殑褰撳墠鐘舵€侊紝鎴戣兘璁＄畻鍑烘暣涓湭鏉ワ紙琚嫋璧帮級鈥︹€﹁繖鏃跺€欐垜浠鍏堥亣鍒扮殑楹荤儲鏄細濡傛灉鍦ㄨ緭鍑虹殑涓€绯诲垪浜嬩欢鎵ц鏃堕棿涓紝鍙堝嚭鐜颁簡鏂扮殑杈撳叆浜嬩欢锛岃濡備綍瀹氫箟鍚庣画鐨勭姸鎬佸憿锛?/span>

杩欓噷锛屾垜浠紩鍏ヤ簡 switchMap 鏂规硶鏉ヨ〃杈鹃€昏緫锛氬亣璁惧湪鍗佹ゼ鎸変笅鎸夐挳锛屽湪鏈潵鐨勫崄绉掍細瑙﹀彂鍗佷釜浜嬩欢銆傞偅涔堢粡杩?nbsp;switchMap 鐨勫皝瑁咃紝涓€鏃﹀湪鍗佺涓殑鏌愪釜鏃跺埢鍙堟湁鏂版寜閽鎸変笅锛屽師鍏堝墿浣欑殑浜嬩欢灏辫鑸嶅純锛屼粠杩欐椂璧锋敼涓鸿Е鍙戞柊鎸夐挳浜嬩欢琛嶇敓鍑虹殑鏂颁簨浠躲€?/span>鎹竴绉嶈娉曪紝灏辨槸浠庝竴妤煎埌鍗佹ゼ鐨勭數姊紝濡傛灉璧板埌涓€鍗婃湁浜烘寜浜嗕簲妤硷紝灏辩珛鍒讳粠涓€妤奸噸鏂板嚭鍙戯紝璧板埌浜旀ゼ杩斿洖銆傛棦鐒舵垜浠彧鍏冲績鐘舵€侊紝涓嶅叧蹇冭繖涔堥噺瀛愬寲鐨勭數姊埌搴曟€庝箞瀹炵幇鐨勶紝杩欎釜 Step 1 鐨勬ā鎷熷櫒鎵ц缁撴灉鍊掍篃鏄ǔ瀹氱殑銆傜◢寰皝瑁呭嚭涓€浜涘弬鏁帮紝绗竴涓?Demo 灏卞畬鎴愬暒锛?/p>

閾炬帴 step 1锛?/span>

https://ewind.us/h5/rx/step1.html

鍦ㄤ笂闈㈢殑 Demo 涓偣鍑讳换浣曚竴涓寜閽紝鐢垫灏变細浠庝竴妤煎紑濮嬪幓鎺ヤ綘锛岀劧鍚庤繑鍥炪€備腑閫斿鏋滃啀娆＄偣鍑绘柊妤煎眰锛岀數姊氨浼氱珛鍒婚噸鏂颁粠涓€妤煎嚭鍙戯紙閲忓瓙鍖栵紵锛夊幓鏂版ゼ灞傛帴浜恒€傚棷绂诲疄鐢ㄨ繕鏈夋璺濈锛屼笉杩囧凡缁忔湁涓牱瀛愬暒銆傝€岀洰鍓嶆垜浠殑 Rx 閫昏緫澶ф闀胯繖鏍凤紝闈炲父绠€鐭細

import { Observable } from 'rxjs'export function getStream (emitter, type) {  return Observable
    .fromEvent(emitter, type)    // target 涓?Vue 涓Е鍙戞寜閽簨浠剁殑妤煎眰鍙?/span>
    .switchMap(({ target }) => {      const up = Observable
        .interval(1000)
        .map(x => x + 1)
        .take(target)      const down = Observable
        .interval(1000)
        .map(x => target - x)
        .take(target)      return up.concat(down)
    })
}

Step 2

杩欎竴姝ヤ腑锛屾垜浠渶瑕佽В鍐崇數姊湪鏂版寜閽寜涓嬫椂锛岀濂囧湴閲忓瓙鍖栧嚭鐜板湪涓€妤肩殑闂锛堣锛夈€傛垜浠笉闇€瑕佸紩鍏ユ柊鐨?API锛屽彧闇€瑕佺◢寰慨姝ｄ竴涓嬮€昏緫锛?/p>

绗竴姝ヤ腑锛屾垜浠緭鍏ユ祦涓殑鐘舵€佸彧鏈?nbsp;target 杩欎釜鍞竴鐨勭洰鏍囨ゼ灞傦紝杩欏氨鎰忓懗鐫€鐢垫鐢氳嚦涓嶇煡閬撴寜閽Е鍙戞椂锛岃嚜宸卞綋鍓嶆鍦ㄥ嚑妤?/span>銆備负姝わ紝鎴戜滑鍦?Vue 涓坊鍔犱竴涓?nbsp;curr 鍙傛暟鏉ユ爣璁拌繖涓姸鎬侊紝杩欐牱锛岀數姊瘡褰撴柊浜嬩欢瑙﹀彂鏃讹紝灏变細浠庡綋鍓嶆ゼ灞傚幓寰€鏂扮洰鏍囨ゼ灞傦紝鑰屼笉鏄洿鎺ュ嚭鐜板湪涓€妤硷細

// 澧炲姞涓€涓?curr 鍙傛暟.switchMap(({ target, curr }) => {  const up = Observable
    .interval(1000)    // 浠庡綋鍓嶆ゼ灞傚嚭鍙戝幓寰€鏂版ゼ灞?/span>
    .map(x => x + curr)
    .take(target + 1 - curr)  const down = Observable
    .interval(1000)
    .map(x => target - x)
    .take(target)  return up.concat(down)

澧炲姞杩欎釜鐘舵€佸悗锛孲tep 2 鐨勬晥鏋滃涓嬫墍绀猴細

閾炬帴 step 2锛?/span>

https://ewind.us/h5/rx/step2.html

杩欎釜 Demo 閲岋紝浣犲彲浠ュ厛鐐瑰嚮浜旀ゼ锛岀瓑鍒扮數姊蛋鍒颁笁妤兼椂鍐嶇偣鍑讳竷妤笺€傝繖鏃剁數姊笉浼氱洿鎺ュ嚭鐜板湪涓€妤硷紝鑰屾槸浼氫粠涓夋ゼ鑰佽€佸疄瀹炲湴鐖笂涓冩ゼ鍐嶄笅鏉ャ€?/p>

涓嶈繃杩欏氨甯︽潵浜嗘柊鐨勭姸鎬侀棶棰橈細鍏堢偣鍑讳簲妤硷紝绛夌數姊蛋鍒颁笁妤兼椂鐐瑰嚮浜屾ゼ銆侭oom锛佺數姊嚭 bug 璧颁笉鍔ㄤ簡鈥︹€?/p>

Step 3

涓婁竴姝ョ殑 bug 鍑虹幇鍘熷洜锛屾槸浣?nbsp;take 浜嗕竴涓礋鏁帮紙鏈潵浠庝簲妤煎埌鍏ゼ闇€瑕?nbsp;take 涓€娆★紝浣嗕粠浜旀ゼ鍒板洓妤煎垯鏄?nbsp;take -1 娆★級銆傛櫘閫氱殑鏁扮粍涓嬫爣瓒婄晫鍊掕繕濂斤紝闈㈠悜鏃堕棿搴忓垪鐨?Observable 涓嬫爣瓒婄晫鐨勮瘽锛岄偅鍙氨鏄湡姝ｇ殑 -1s 浜嗏€︹€︽垜浠潵琛ヤ竴鐐归€昏緫淇瀹冨惂锛?/p>

.switchMap(({ target, curr }) => {  // 鐩爣妤煎眰楂樹簬褰撳墠妤煎眰锛屾垜浠厛涓婃ゼ鍐嶄笅妤?/span>
  if (target >= curr) {    const up = Observable
      .interval(1000)
      .map(x => x + curr)
      .take(target + 1 - curr)    const down = Observable
      .interval(1000)
      .map(x => target - x)
      .take(target)    return up.concat(down)
  } else {    // 鐩爣妤煎眰浣庝簬褰撳墠妤煎眰锛屾垜浠洿鎺ヤ笅妤?/span>
    return Observable
      .interval(1000)
      .map(x => curr - x)
      .take(curr)
  }

濂戒簡锛宐ug 淇浜嗭細

step 3锛?/span>

http://ewind.us/h5/rx/step3.html

涓婇潰鐨勪緥瀛愪腑锛屼笉绠℃€庝箞鎸夋寜閽紝鐢垫缁堜簬閮戒笉浼氶噺瀛愬寲锛屼篃閮戒笉浼氳鐜╁潖鍟︼紒浣嗘槸鏂扮殑椋庢毚鍙堝嚭鐜颁簡锛氭潵鍥炵偣鍗佹ゼ鍜屼簲妤硷紝浼氬彂鐜颁负浠€涔堣繖涓數姊潵鏉ュ幓鍘诲嵈鎬绘槸鍒颁笉浜嗕竴妤煎憿鈥︹€?/p>

Step 4

鍦ㄤ笂闈㈢殑渚嬪瓙涓紝鎴戜滑浼犲叆 Stream 鐨勭姸鎬佸叾瀹炲缁堜笉瓒充互鏀拺鐢垫璋冨害绠楁硶鐨勬甯稿伐浣溿€傛瘮濡傦紝鎴戜滑骞舵病鏈夋爣蹇楀嚭涓€涓ゼ灞傛湁娌℃湁琚寜閽偣浜€傚湪杩欎竴姝ヤ腑锛屾垜浠湪 Vue 鐨勮鍥惧眰澧炲姞涓€涓繖鏍风殑鐘舵€侊細

  // ...
  data () {    return {      floors: [
        { up: false, down: false },
        { up: false, down: false },
        { up: false, down: false },
        { up: false, down: false },
        { up: false, down: false },
        { up: false, down: false },
        { up: false, down: false },
        { up: false, down: false },
        { up: false, down: false },
        { up: false, down: false }
      ],      currFloor: 1
    }
  },

鍡笉瑕佸湪鎰忔垜浠病鏈?nbsp;鈫?/code> 鎸夐挳涓轰粈涔堟湁 up 鐘舵€佽繖浜涚粏鑺備簡銆傝€?Rx 涓垜浠坊鍔犱竴浜涚畝鍗曠殑澶勭悊锛岃浜嬩欢娴佷紶鍑虹殑鐘舵€佷笉浠呬粎鍖呮嫭褰撳墠妤煎眰锛屼篃鍖呮嫭褰撳墠鏂瑰悜锛?/p>




if (targetFloor >= baseFloor) {  const up = Observable
    .interval(1000)
    .map(count => {      const newFloor = count + baseFloor      return {        floor: newFloor,        // 浼犲嚭褰撳墠鏂瑰悜
        direction: newFloor === targetFloor ? 'stop' : 'up'
      }
    })
    .take(targetFloor + 1 - baseFloor)    // ...}

鎬讳箣鐜板湪妯℃嫙鍣ㄧ湅璧锋潵闀胯繖鏍凤細

閾炬帴 step 4锛?/span>

https://ewind.us/h5/rx/step4.html

鐐瑰嚮鏃朵細鍦?Rx 涓脊鍑轰竴涓啋鐩殑 alert 鏉ュ憡璇変綘锛氭垜杩欎釜浜嬩欢娴佹槸鐭ラ亾杩欎簺鐘舵€佺殑锛佷笉杩囩洰鍓嶄粛鐒舵病瑙ｅ喅鍒颁笉浜嗕竴妤肩殑闂鈥︹€?/p>

Final Step

鍦ㄦ渶鍚庝竴姝ラ噷锛屾垜浠渶瑕佷娇鐢?Rx 澶勭悊涔嬪墠鍒颁笉浜嗕竴妤肩殑闂銆傛垜浠煡閬擄紝鏍规嵁銆愬喅瀹氳銆戠殑鎬濇兂锛孯x 鍏跺疄鍦ㄦ瘡涓寜閽簨浠惰Е鍙戞椂锛屽氨宸茬粡瑙勫垝濂戒簡鏈潵鐨勭數姊繍鍔ㄤ簡銆傞偅涔堬紝鎴戜滑鑳戒笉鑳藉仛鍋氬噺娉曪紝鎶婂奖鍝嶇姸鎬佺殑浜嬩欢杩囨护鎺夊憿锛熻繖閲屾垜浠彲浠ヤ娇鐢?nbsp;filter 鏉ユ搷浣滀簨浠舵祦锛?/p>

绠€鍖栫殑妯″瀷涓紝鎴戜滑涓嶅Θ璁や负鐢垫鍙細鎵ц銆愬厛 up 鍐?down銆戠殑鎿嶄綔銆傝繖鏃讹紝瀵逛簬鐢垫杩愬姩杩囩▼涓Е鍙戠殑鏂颁簨浠讹紝鍙互杩欐牱鍒嗙被锛?/p>

• 濡傛灉鐢垫姝ｅ湪涓嬮檷锛岄偅涔堜笉绠″湪鍝釜妤煎眰瑙﹀彂鐨勬柊浜嬩欢閮戒笉鑳藉啀娆¤鐢垫鍐嶆 up and down锛屼繚璇佺數姊€昏兘涓嬮檷鍒颁竴妤?/p>

• 濡傛灉鐢垫姝ｅ湪涓婂崌锛屼絾鏄柊鐨勪笅闄嶄簨浠舵墍鍦ㄦゼ灞備綆浜庡綋鍓嶆ゼ灞傦紝閭ｄ箞鐢垫鍦ㄨ繖涓€杞笅闄嶈繃绋嬩腑灏卞彲浠ョ粡杩囪繖涓柊妤煎眰锛屼粠鑰屼笉闇€瑕佸啀娆?up and down

• 濡傛灉鐢垫姝ｅ湪涓婂崌锛岃€屼笖鏂扮殑涓嬮檷鏃堕棿鎵€鍦ㄦゼ灞傞珮浜庡綋鍓嶆ゼ灞傦紝閭ｄ箞鎴戜滑閲嶆柊杩涜涓€娆＄洰鏍囦负鏂版ゼ灞傜殑 up and down 鍗冲彲銆?/p>

涓夌鎯呭舰涓紝鎴戜滑浼氬垽鏂嚭鏄惁闇€瑕?up and down銆傛棦鐒舵瘡娆?up and down 閮芥槸杈撳叆 switchMap 鐨勪竴涓簨浠讹紝閭ｄ箞鎴戜滑灏卞彲浠ョ洿鎺ュ湪 switchMap 鍓嶆斁缃竴涓?nbsp;filter 鏉ヨ繃婊ゆ帀鏃犲叧鐨勬寜閽簨浠讹細

  return Observable
    .fromEvent(emitter, type)
    .filter(({ floors, targetFloor, currFloor, currDirection }) => {      // 鍙傝€冧笂鏂囬€昏緫鍒ゆ柇
      if (currDirection === 'down') return false
      else if (currDirection === 'up' && targetFloor <= currFloor) {        return false
      } else return true
    })

鍦ㄦ斁缃繖涓€昏緫鍚庯紝鎴戜滑鎶?up and down 鐨勭洰鏍囨ゼ灞傜敱浜嬩欢鎵€鍦ㄦゼ灞傦紝鏀逛负浠?floors 涓壘鍑虹殑鏈€楂樻ゼ灞傦紙maxTargetFloor锛夛紝灏辫兘澶熶繚璇佺數姊甯告姷杈剧洰鏍囨ゼ灞傚苟姝ｅ父杩斿洖浜嗐€備笉杩囪繖鏃惰繕鏈夋渶鍚庣殑涓€鐐瑰皬闂锛氬鏋滅數姊笅闄嶄腑浣犳寜涓嬩簡鍗佹ゼ锛岄偅涔堢數姊埌杈句竴妤煎悗涓嶄細鍐嶆鏉ユ帴浣犫€﹁В鍐虫柟娉曞緢绠€鍗曪紝鍦ㄧ數姊笅闄嶅埌杈句竴灞傛椂锛屽皾璇曡鐢垫鍐?up and down 涓€娆″嵆鍙€?/p>

鍦ㄦ垜浠疄鐜板畬浜嗘渶鍚庣殑杩欎竴鐐瑰紓姝ラ€昏緫鍚庯紝灏辨槸鏈枃寮€濮嬫椂鐨?Demo 浜嗭細

閾炬帴 final锛?/span>

https://ewind.us/h5/rx/final.html

鍒拌繖鏃讹紝Rx 涓殑浠ｇ爜浠嶇劧浠呮湁 40 浣欒銆傝€?Vue 涓殑浠ｇ爜涔熸病鏈夋秹鍙婁换浣曠殑寮傛閫昏緫锛屼粎浠呴渶瑕佸 Observable 鍋氱畝鍗曠殑璁㈤槄骞舵覆鏌撴暟鎹嵆鍙€?/p>

Wrap Up

鐩墠涓烘锛屾垜浠殑妯℃嫙鍣ㄥ姛鑳藉叾瀹炶繕鍙槸鐪熸鐢垫鐨勪竴涓瓙闆嗭紝瀹冭繕缂哄皯杩欐牱鐨勫姛鑳斤細

• 涓€涓鐢ㄦ埛鍦ㄧ數姊噷閫夋嫨鐘舵€佺殑闈㈡澘

• 姣忓眰鐨?nbsp;鈫?/code> 鎸夐挳

涓嶈繃鍦?Rx 鐨勫熀鏈€濊矾鍩虹涓婏紝妯℃嫙鍑鸿繖浜涚壒鎬у苟涓嶄細鏄捐憲鍦板鍔犲鏉傚害锛氬湪鐢垫閲岄€夋嫨鐘舵€佹墍瑙﹀彂鐨勪簨浠讹紝鍏跺疄鍦ㄤ紭鍏堢骇涓婂畬鍏ㄧ瓑鏁堜簬鍦ㄧ數姊棬澶栫殑妤煎眰閫夋嫨锛堝湪鍚戜笂杩愯鐨勭數姊唴鎸変竴妤硷紝鐢垫涓嶄細鐞嗕綘锛屽氨鑳藉璇佹槑杩欎竴鐐癸級锛涜€屽紩鍏?nbsp;鈫?/code> 鎸夐挳鍚屾牱鍙槸寮曞叆浜嗘柊鐨勩€愬喅瀹氳銆戠姸鎬佽€屽凡鈥︹€﹁櫧鐒惰繖涔堣鏈変簺涓嶈礋璐ｄ换锛屼笉杩囦粠鎴戜滑宸叉湁鐨勫疄鐜版潵鐪?Rx 浜嬩欢娴佺‘瀹炴槸鍏峰浼橀泤瑙ｅ喅杩欎簺闂鐨勮兘鍔涚殑銆?/p>




濡傛灉浣犺繕鍦ㄧ籂缁撻渶涓嶉渶瑕佸湪宸叉湁椤圭洰涓紩鍏?Rx锛屼篃璁告湰鏂囩殑瀹炶返鑳藉涓轰綘鎻愪緵涓€浜涘皬鍙傝€冿細Rx 鍦ㄥ鐞嗗紓姝ヤ簨浠舵祦鏃堕潪甯稿己澶э紝绫讳技Redux / MobX 绛夌姸鎬佺鐞嗗櫒鎵€鍏虫敞鐨勪笌 Rx 鍏跺疄骞堕潪鍚屼釜灞傞潰鐨勯棶棰橈紝涓€鏃﹀皢瀹冧滑涓?Rx 缁撳悎锛屾槸鑳藉澶勭悊寰堥珮鐨勪笟鍔″鏉傚害鐨勩€?/p>

涓嶈繃濡傛灉浣犵殑闇€姹備粎浠呮槸銆愭暟鎹姞杞芥椂鏄剧ず Loading 鐘舵€併€戯紝閭ｄ箞寮曞叆 Rx 澶氬皯灏辨湁浜涙潃楦＄敤鐗涘垁浜嗐€?/p>

鏈€鍚庯紝杩欏叾瀹炰綔鑰呯涓€娆″皾璇?Rx 鐨勯」鐩€傜湡姝ｇ紪鍐欑殑浠ｇ爜骞朵笉澶氾紝涓嶈繃瑕侀€傚簲瀹冨苟浣跨敤瀹冪湡姝ｈВ鍐抽棶棰橈紝鎵€闇€瑕佺殑鎬濊€冩椂闂村叾瀹炴瘮鏁查敭鐩樺啓鍑犺浠ｇ爜鐨勬椂闂磋澶氬緱澶氣€︹€﹁繖涔熺畻鏄竴绉嶄箰瓒ｅ惂馃檭鏈枃涓瘡涓€涓?Step 閮芥槸浠庡紑鍙戣繃绋嬩腑鐨勭湡瀹?commit 鎶藉彇鍑烘潵鐨勶紝甯屾湜鏈枃瀵瑰ぇ瀹舵湁鎵€甯姪馃檭

Github 浼犻€侀棬锛?/span>

https://github.com/doodlewind/rx-elevator-demo

Observable 鏂囨。锛?/span>

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

/閭€鎮ㄤ竴鍚屽涔? 

/鏇村闃呰/ 

•  鐑?/span> 馃敟 

•  鐑?/span> 馃敟 

•  鐑?/span> 馃敟 

•  鐑?/span> 馃敟 

瑙夊緱鏈枃寰堟湁甯姪锛熻浼犻€掔粰鏇村鏈嬪弸

鍏虫敞鈥?nbsp;鍓嶇琛ョ粰绔欌€?nbsp;锛?/span>鎻愬崌鍓嶇鎶€鑳?/span>

以上是关于的主要内容，如果未能解决你的问题，请参考以下文章

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数

VSCode自定义代码片段8——声明函数