iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 118 瀏覽

鐵人賽 Modern Web DAY 24

轉生成前端工程師後，30步離開新手村！系列第 24 篇

技術 # 前端實作案例分享: 電商購物車(四)

今天是購物車實作的最後一篇文章，我們要來討論兩個狀態之間相互耦合的情況下，該如何處理。假設今天的業務需求是，在進入購物車的時候，我們要比對結帳狀態和購物車中的...

艾瑞卡 ‧ 2024-10-08

0 Like 0 留言 920 瀏覽

鐵人賽自我挑戰組

菜雞也能優雅的征服RxJS 系列第 32 篇

技術菜雞們一起征服RxJS -day32: 進一步驗證startWith 位置擺放的重要性

我們在昨天day31有介紹到startWith及endWith的用法，也建議大家將startWith放置於pipe底下，避免不可預期的情形發生。今天...

小偉哥 ‧ 2022-10-07

0 Like 0 留言 845 瀏覽

鐵人賽自我挑戰組

菜雞也能優雅的征服RxJS 系列第 31 篇

技術菜雞們一起征服RxJS - day31: 在observable執行"之前(startWith)"以及"最後(endWith)"幫我放入資料

今天是鐵人賽完賽後的第一天，也就是第31天，今天的心情比較輕鬆，鬆到我一直想偷懶休息，不行，咱們還是來寫寫文章，分享心得，繼續上工! 先來複習一下JS A...

小偉哥 ‧ 2022-10-06

0 Like 1 留言 958 瀏覽

鐵人賽自我挑戰組 DAY 30

菜雞也能優雅的征服RxJS 系列第 30 篇

技術菜雞們一起征服RxJS - day30: 向後台發出請求並即時偵錯: ajax, catchError

ajax 我想大家對ajax應該不陌生，RxJS的ajax也符合我們過去的使用，這篇文章我們會先介紹使用GET的兩種方式，當然，如果想了解如何使用POST等...

小偉哥 ‧ 2022-10-05

0 Like 0 留言 914 瀏覽

鐵人賽 Modern Web DAY 22

angular專案開發指南系列第 22 篇

技術共用元件的動態載入(2)

前言上一篇使用 *ngComponentOutlet 的方式來動態產生元件，本篇要跟大家分享的是 ViewContainerRef，在程式中產生元件實體後再嵌...

ShawnWu ‧ 2022-10-06

0 Like 0 留言 1128 瀏覽

鐵人賽自我挑戰組 DAY 29

菜雞也能優雅的征服RxJS 系列第 29 篇

技術菜雞們一起征服RxJS - day29: 所有客服人員都在忙線中，請稍後再播~謝謝 ~ exhaustAll, exhaustMap

打電話給銀行客服，等待著轉接時間，卻常常等到～所有的客服人員都在忙線中，請稍後再撥，謝謝! 也就是說，有客服人員閒置，才會接上線，沒有的話，抱歉請稍後...

小偉哥 ‧ 2022-10-04

0 Like 0 留言 669 瀏覽

鐵人賽自我挑戰組 DAY 28

菜雞也能優雅的征服RxJS 系列第 28 篇

技術菜雞們一起征服RxJS - Day28: 來者不拒，但請照順序排隊訂閱，謝謝 ~ concatAll, concatMap

我們去買東西或辦事情，不時看到一些白目的人突然插隊說~ ㄟ小姐~我這東西很急，先幫我處理一下此時排在後方的人，不來個白眼伺候就對不起自己啦!...

小偉哥 ‧ 2022-10-03

0 Like 0 留言 995 瀏覽

鐵人賽自我挑戰組 DAY 27

菜雞也能優雅的征服RxJS 系列第 27 篇

技術菜雞們一起征服RxJS - day27: 只掌握最新的訂閱: switchAll及switchMap

昨天我們介紹了mergeAll及他另一個好用的方法mergeMap，針對回傳的所有observable，都能完成訂閱，實現類似平行化的處理。今天要介紹另一...

小偉哥 ‧ 2022-10-02

0 Like 0 留言 2176 瀏覽

鐵人賽 Modern Web DAY 18

angular專案開發指南系列第 18 篇

技術 Angular 組件間資料的傳遞方式

前言所有前端框架都會遇到一個共同的問題，就是資料與狀態如何在組件之間傳遞，根據元件之間不同的組合關係，大致可分類為父子，兄弟與沒有關係，在 Angular 中...

ShawnWu ‧ 2022-10-02

0 Like 0 留言 793 瀏覽

鐵人賽自我挑戰組 DAY 25

菜雞也能優雅的征服RxJS 系列第 25 篇

技術菜雞們一起征服RxJS - day25: 觸發後的時間內我只抓最後一個 auditTime

今天要介紹的，與throttleTime算是兄弟檔，不過，一個瞻前，一個顧後，瞻前的我們在day23-throttleTime有說明，我們今個兒來談談這位顧...

小偉哥 ‧ 2022-09-30

0 Like 0 留言 692 瀏覽

鐵人賽自我挑戰組 DAY 24

菜雞也能優雅的征服RxJS 系列第 24 篇

技術菜雞也能優雅的征服RxJS - day24 - 規律的取樣 sampleTime

今天繼續來介紹一下跟時間取樣有關的sampleTime。 sampleTime 先來看看彈珠圖，我在下面繪製了規律的取樣示意圖，讓大家更方便了解。注意...

小偉哥 ‧ 2022-09-29

0 Like 0 留言 860 瀏覽

鐵人賽自我挑戰組 DAY 23

菜雞也能優雅的征服RxJS 系列第 23 篇

技術菜雞們一起征服RxJS - day23: 第一個觸發的就被選中，其他的請離開，直到下一個時間區間來臨 - throttleTime

昨天我們介紹的debounceTime，當事件觸發後，如果這一段時間都沒有任何事件進來，我就會選擇這筆資料。 throttleTime的概念則是，當事件觸...

小偉哥 ‧ 2022-09-28

0 Like 0 留言 947 瀏覽

鐵人賽自我挑戰組 DAY 22

菜雞也能優雅的征服RxJS 系列第 22 篇

技術菜雞們一起征服RxJS - day22 - 別急~先讓子彈飛一會兒: debounceTime

讓子彈飛這部經典電影有一句台詞，先讓子彈飛一會兒，意思是，不要急著去看結果，你給他點時間，他會給你個交代。今天要介紹的debounceTime就像是這樣...

小偉哥 ‧ 2022-09-27

0 Like 0 留言 532 瀏覽

鐵人賽自我挑戰組 DAY 21

菜雞也能優雅的征服RxJS 系列第 21 篇

技術菜雞們一起征服RxJS - day21: 蒐集不重複的資料 distinctUntilChanged及distinctUntilKeyChanged

我們在處理資料的過程中，難免遇到重複且需要過濾掉的東西，distinctUntilChanged就是我們今天要介紹的好幫手，趕緊來看一看!☕ distin...

小偉哥 ‧ 2022-09-26

0 Like 0 留言 983 瀏覽

鐵人賽自我挑戰組 DAY 20

菜雞也能優雅的征服RxJS 系列第 20 篇

技術菜雞也能優雅的征服RxJS - day20: 一旦符合條件就結束 takeUntil

昨天介紹的takeWhile(predict)式利用predict函示來定義條件式，一旦符合條件，就不再拿資料了。今天要介紹的takeUntil跟take...

小偉哥 ‧ 2022-09-25

0 Like 1 留言 490 瀏覽

鐵人賽自我挑戰組 DAY 19

菜雞也能優雅的征服RxJS 系列第 19 篇

技術菜雞也能優雅的征服RxJS - day19: 符合條件內的才拿takeWhile

先前介紹的first(條件式)可以定義條件式，來決定拿取資料的條件，但只能拿一個；如果我希望能持續取得資料，當條件不符時才中斷呢?takeWhile就是你的...

小偉哥 ‧ 2022-09-24

0 Like 1 留言 659 瀏覽

鐵人賽自我挑戰組 DAY 18

菜雞也能優雅的征服RxJS 系列第 18 篇

技術菜雞也能優雅的征服RxJS - day18: 給我第一個，其餘免談 first

延續著我們昨天介紹的take(N)，今天介紹也是跟數量有關的，不過它比較有個性，只抓一個 ~ first。☕ first RxJS官網-first...

小偉哥 ‧ 2022-09-23

0 Like 0 留言 457 瀏覽

鐵人賽自我挑戰組 DAY 17

菜雞也能優雅的征服RxJS 系列第 17 篇

技術菜雞也能優雅的征服RxJS - day17: 設定領取數量take

take(count) RxJS官網-take 從彈珠圖來看，count=2，代表我們從observable中僅需要2筆資料，取得2筆之後，就不再接收...

小偉哥 ‧ 2022-09-22

0 Like 0 留言 586 瀏覽

鐵人賽自我挑戰組 DAY 16

菜雞也能優雅的征服RxJS 系列第 16 篇

技術菜雞也能優雅的征服RxJS - day16 : 安插個觀察點 - tap (下集)

今天來繼續說說tap下集 case4: 來個side effect改變一下我們使用前幾天實作2:scan - countdown為例子來觀察一下。...

小偉哥 ‧ 2022-09-21

0 Like 0 留言 703 瀏覽

鐵人賽自我挑戰組 DAY 15

菜雞也能優雅的征服RxJS 系列第 15 篇

技術 day15: 安插個觀察點 - tap (上集)

今天要介紹RxJS裡一個相當有用的operator ~tap。☕ 還記得scan很盡責的在每個步驟，回報對應的值吧，tap能協助我們在pipe的每個步驟之間...

小偉哥 ‧ 2022-09-20

0 Like 0 留言 844 瀏覽

鐵人賽自我挑戰組 DAY 14

菜雞也能優雅的征服RxJS 系列第 14 篇

技術菜雞也能優雅的征服RxJS - day14: 實戰2 - 來個倒數計時 final

今天我們要來實作一個倒數計時器，完成這個需求的設計，你需要思考幾點: 固定每秒發出一個訊號: interval(1000) 將每秒的訊號轉變為1: m...

小偉哥 ‧ 2022-09-19

0 Like 0 留言 897 瀏覽

鐵人賽自我挑戰組 DAY 13

菜雞也能優雅的征服RxJS 系列第 13 篇

技術菜雞也能優雅的征服RxJS - day13- 過濾不要的資訊 filter

javascript的Array提供了另一個func~ filter 它可以幫助我們快速的過濾出我們要的資訊，如同下面這個例子，相信大家都不陌生!☕...

小偉哥 ‧ 2022-09-18

0 Like 0 留言 613 瀏覽

鐵人賽自我挑戰組 DAY 11

菜雞也能優雅的征服RxJS 系列第 11 篇

技術菜雞也能優雅的征服RxJS - day11: 直到完成最後一個值才結束的reduce

Javascript的Array提供一個可累加蒐集資料的函示~ reduce，今天我們要介紹的RxJS reduce也是一樣的概念，趕緊來看個例子吧!...

小偉哥 ‧ 2022-09-16

0 Like 0 留言 963 瀏覽

鐵人賽自我挑戰組 DAY 10

菜雞也能優雅的征服RxJS 系列第 10 篇

技術菜雞們也能優雅的征服RxJS - day10: 實戰1 - 取得scroll百分比

今天我們來運用fromEvent及map來計算一下頁面scroll的狀態，不囉嗦，立馬練習! Step1: 使用fromEvent來取得scroll的事件...

小偉哥 ‧ 2022-09-15

0 Like 0 留言 953 瀏覽

鐵人賽自我挑戰組 DAY 9

菜雞也能優雅的征服RxJS 系列第 9 篇

技術菜雞也能優雅的征服RxJS - day9-資料轉換類(1) map

javascript的Array提供一個map函式，相信用過的人一定愛不釋手，經過一個設定，就能轉換出我們要的資料。底下就是map的一個例子，我們將收到...

小偉哥 ‧ 2022-09-14

1 Like 0 留言 802 瀏覽

鐵人賽自我挑戰組 DAY 8

菜雞也能優雅的征服RxJS 系列第 8 篇

技術菜雞也能優雅的征服RxJS - day8-創建類(3): 老師!給我一個固定的節拍 interval ,timer

第8天囉!咱來說說創建類的第三種:interval及timer這兩個跟時間區間有關的operator，上工! Interval 圖片來源: RxJ...

小偉哥 ‧ 2022-09-13

0 Like 1 留言 880 瀏覽

鐵人賽自我挑戰組 DAY 7

菜雞也能優雅的征服RxJS 系列第 7 篇

技術菜雞也能優雅的征服RxJS - day7 - 創建類(2): from 資料打哪來的

今天要介紹的from同樣屬於屬於負責創建資料來源(creation)，事不宜遲，趕緊來學學! 圖片來源: RxJS官網 - from說明定義:...

小偉哥 ‧ 2022-09-12

0 Like 1 留言 1103 瀏覽

鐵人賽自我挑戰組 DAY 5

菜雞也能優雅的征服RxJS 系列第 5 篇

技術菜雞也能優雅的征服RxJS - day5 - fromEvent 事件處理

第五天囉，還不快為自己喝采一下!!☕ RxJS提供許多內建的功能，讓大家可以快速的組合出我們要的連續技。今天我們先來聊聊前端常用的事件處理。 from...

小偉哥 ‧ 2022-09-10

1 Like 1 留言 921 瀏覽

鐵人賽自我挑戰組 DAY 4

菜雞也能優雅的征服RxJS 系列第 4 篇

技術菜雞也能優雅的征服RxJS - day4 - 多人訂閱怎個處理法!?

先給自己愛的鼓勵!! 沒話說 ~ 第四天仍然知道寫些什麼，代表你有認真的想把RxJS給學好，那就來說說多人訂閱吧!! 多人訂閱為了區分，我們建立兩個...

小偉哥 ‧ 2022-09-09

0 Like 0 留言 1041 瀏覽

鐵人賽自我挑戰組 DAY 3

菜雞也能優雅的征服RxJS 系列第 3 篇

技術菜雞也能優雅的征服RxJS - day3-來段非同步Async的範例吧

第三天啦! 你還在呢!! 你的毅力讓人佩服，今天我們要來玩玩非同步的模式，將非同步的過程加入觀察，看看迸出什麼火花! 延續著昨天的教學，我們在subs...

小偉哥 ‧ 2022-09-08

技術 # 前端實作案例分享: 電商購物車(四)

技術 菜雞們一起征服RxJS -day32: 進一步驗證startWith 位置擺放的重要性

技術 菜雞們一起征服RxJS - day31: 在observable執行"之前(startWith)"以及"最後(endWith)"幫我放入資料

技術 菜雞們一起征服RxJS - day30: 向後台發出請求並即時偵錯: ajax, catchError

技術 共用元件的動態載入(2)

技術 菜雞們一起征服RxJS - day29: 所有客服人員都在忙線中，請稍後再播~謝謝 ~ exhaustAll, exhaustMap

技術 菜雞們一起征服RxJS - Day28: 來者不拒，但請照順序排隊訂閱，謝謝 ~ concatAll, concatMap

技術 菜雞們一起征服RxJS - day27: 只掌握最新的訂閱: switchAll及switchMap

技術 Angular 組件間資料的傳遞方式

技術 菜雞們一起征服RxJS - day25: 觸發後的時間內我只抓最後一個 auditTime

技術 菜雞也能優雅的征服RxJS - day24 - 規律的取樣 sampleTime

技術 菜雞們一起征服RxJS - day23: 第一個觸發的就被選中，其他的請離開，直到下一個時間區間來臨 - throttleTime

技術 菜雞們一起征服RxJS - day22 - 別急~先讓子彈飛一會兒: debounceTime

技術 菜雞們一起征服RxJS - day21: 蒐集不重複的資料 distinctUntilChanged及distinctUntilKeyChanged

技術 菜雞也能優雅的征服RxJS - day20: 一旦符合條件就結束 takeUntil

技術 菜雞也能優雅的征服RxJS - day19: 符合條件內的才拿takeWhile

技術 菜雞也能優雅的征服RxJS - day18: 給我第一個，其餘免談 first

技術 菜雞也能優雅的征服RxJS - day17: 設定領取數量take

技術 菜雞也能優雅的征服RxJS - day16 : 安插個觀察點 - tap (下集)