@Javascript

Stories List
@aran_tu

5 張彈珠圖徹底弄清 RxJS 的拉平策略:mergeMap、switchMap、concatMap、exhaustMap

RxJS 的操作符理解起來確實比較複雜,比如最常用的幾種 map 操作符,本篇就來使勁衝一衝它們!! 原創文章,非商業轉載請説名出處 map 操作想必大家一定不陌生: const { of } = Rx; const { map } = RxOperators; const namesObservable = of('A', 'B'); namesObservable.pipe(

aran_tu Avatar

@aran_tu

Nickname 掘金安東尼

@invalidnull

使用 RxJS timeout 操作符給 Angular SSR 服務器端渲染模式下的 HTTP 請求添加超時機制

Angular Universal 是一個開源項目,擴展了 @angular/platform-server 的功能。 該項目使 Angular 中的服務器端渲染成為可能。 為了在服務器上渲染,Angular 使用 node.js 的 DOM 實現——domino. 對於每個 GET 請求,domino 都會創建一個類似的 Browser Document 對象。 在該對象上下文中,Angular

invalidnull Avatar

@invalidnull

Nickname 註銷

@invalidnull

Rxjs mergeMap 的使用場合

注意: flatMap 是 mergeMap 的別名。 如果一次只能激活一個內部訂閲,請使用 switchMap. 如果內部 observables 的發射和訂閲順序很重要,請使用 concatMap. 當需要展平內部 observable 但想要手動控制內部訂閲的數量時,是 mergeMap 極佳的使用場合。 例如,當使用 switchMap 時,每個內部訂閲在源發出時完成,即任意時間

invalidnull Avatar

@invalidnull

Nickname 註銷

@invalidnull

Rxjs map, mergeMap 和 switchMap 的區別和聯繫

map、mergeMap 和 switchMap 是 RxJS 中的三個主要運算符,在 SAP Spartacus 開發中有着廣泛的使用場景。 map map 是 Observables 中最常見的運算符。 它的作用與數組中的映射相對相似。 map 接收從 Observable 發出的每個值,對其執行操作並返回一個 Observable(因此 Observable 鏈可以繼續)。 把它想象成一個函

invalidnull Avatar

@invalidnull

Nickname 註銷

@invalidnull

rxjs Observable 設計原理背後的 Pull 和 Push 思路

Observables 顧名思義,是可以被觀察的事務。在 Rxjs 的上下文裏,Observable 會隨着時間的推移,在某個時間點產生數據。 Observables 可以: 不停地(永遠)產生值,比如 interval 操作符。 可以一次性生產價值,然後進入 complete 狀態。 可能會產生錯誤,然後進入 complete 狀態。 Observable 是一種異步事件的實現利器,例

invalidnull Avatar

@invalidnull

Nickname 註銷

@gfeteam

一文讀懂對JavaScript函數式編程的初認識

背景      函數式編程可以説是非常古老的編程方式,但是近幾年變成了一個非常熱門的話題。不管是Google力推的Go、學術派的Scala與Haskell,還是Lisp的新語言Clojure,這些新的函數式編程語言越來越受到人們的關注。函數式編程思想對前端的影響很大,Angular、React、Vue等熱門框架一直在不斷通過該思想來解決問題。      函數式編程作為一種高階編程範式,更接近於數

gfeteam Avatar

@gfeteam

Nickname GFE團隊

@aaaaaajie

RxJS 全面解析

又名:RxJS “道” 與 “術” 前言 打開此文的小夥伴想必對 RxJS 已經有了或多或少的瞭解,如果沒有倒也無妨,因為下面會從零開始講起;如果你帶着幾個問題來翻閲,本人也希望此文可以帶你找到答案。 温馨提示:文章內容較長,建議收藏反覆觀看。 概覽 從我個人的學習 RxJS 的歷程來看,最開始是“照貓畫虎”能夠基本使用,隨後是研究部分操作符和使用場景,最後瞭解產生背景、設計思想以及實現原理

aaaaaajie Avatar

@aaaaaajie

Nickname 阿杰

@42_6398721f10a5e

前端 - 封裝一個通用的接口請求工具

在前端開發中,接口請求是一個非常基本的需求。幾乎每個項目都會針對自己的使用場景對接口請求操作進行一系列封裝。今天我們也來一步步封裝一個通用的請求工具。 使用效果 首先讓我們來看看封裝完後的使用效果吧。 首先我們將提供一個 defineApi 函數,用於定義接口的配置信息,包括 url,請求參數以及返回類型等,具體使用方法如下: const BASE_URL = 'https://example.c

@zz_641473ad470bc

關於不同窗口,訂閲不生效的問題

問題 兩個窗口,顯示組件,A窗口顯示A組件,B窗口顯示B組件,兩個組件共同訂閲一個Service中的Subject,當在A組件中進行修改後,Service中的Subject發送通知,“值變更了”,B組件訂閲不到。 現在打開兩個窗口,每個窗口顯示一個組件,每個組件都訂閲 Service 中的 subjectTest, 在AComponent組件中,每隔一秒發送一條數據: AComponent 組件

zz_641473ad470bc Avatar

@zz_641473ad470bc

Nickname zZ_jie

@alienzhou

替代 webpack?一文帶你瞭解 snowpack 原理,你還學得動麼

近期,隨着 vue3 的各種曝光,vite 的熱度上升,與 vite 類似的 snowpack 的關注度也逐漸增加了。目前(2020.06.18)snowpack 在 Github 上已經有了將近 1w stars。 snowpack 的代碼很輕量,本文會從實現原理的角度介紹 snowpack 的特點。同時,帶大家一起看看,作為一個以原生 JavaScript 模塊化為核心的年輕的構建工具,它是如

alienzhou Avatar

@alienzhou

Nickname alienzhou

@shawnphang

如何優雅地編寫一個高逼格的JS插件?

在一個風和日麗的早晨,我正悠閒地喝着Coffe,突然領導向我走來,我趕緊熟練地切出VSCode,淡定自若地問:領導,什麼事?領導拍了拍我的肩膀:你上次封裝的方法同事跟我反饋使用起來很不錯啊,你不如做成JS插件給大家用吧。我放下了手中的馬克杯,甩了一下眼前僅剩的幾根劉海:沒問題啊,小Case!隨即開始摸魚.... 原型鏈寫法 要開始編寫插件就得先了解JS模塊化,早期的模塊化是利用了函數自執行來實現的

shawnphang Avatar

@shawnphang

Nickname 茶無味的一天

@linx

Web前端入門第 83 問:JavaScript localStorage 有大小限制嗎?溢出會怎樣?

本地存儲除了 Cookie 外,還有 localStorage 和 sessionStorage,本文一探 localStorage。 localStorage 此 API 存入的數據會 永久 保存在瀏覽器中,除非用户手動刪除。 localStorage 能用於同一瀏覽器同一域名跨標籤頁通信。 同一瀏覽器無痕模式和非無痕模式下,localStorage 存儲的數據無法互通,且無痕模式存入的數據在瀏

linx Avatar

@linx

Nickname 前端路引

@codechen8848

格式轉換全能王!一個開源自託管的文件轉換神器

大家好,我是 Java陳序員。 在日常工作生活中,常常需要對一些文件進行轉換,如不同格式的照片進行轉換,還有 Office 各文檔之間的轉換等。但常常找不到趁手的工具,使用在線工具又擔心隱私泄漏。 今天,給大家介紹一個開源自託管的文件轉換神器,支持超多種文件格式轉換,可以説是格式轉換全能王! 關注微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典計算機電子書籍等。

codechen8848 Avatar

@codechen8848

Nickname codechen8848

@linx

Web前端入門第 84 問:JavaScript sessionStorage 那些容易踩坑的地方

sessionStorage 與 localStorage 差不多可以算作一對兄弟,它倆的暴露的 API 方法一模一樣。 但兩者也有不同點: 1、sessionStorage 存入的數據在頁面關閉後,會自動清除。 2、相同 URL 的每個 tab 頁籤的 sessionStorage 會被隔離,互不影響。也就是説相同的鏈接,在 A 標籤頁打開和在 B 標籤打開,A 寫入的 sessionSt

linx Avatar

@linx

Nickname 前端路引

@software-Development

如何在DHTMLX Scheduler中實現帶拖拽的任務待辦區(Backlog)

為了滿足DHTMLX Scheduler用户的實際業務需求,本文將展示如何在 JavaScript 日程組件中實現“帶拖拽的任務待辦區(Backlog)”。這一功能讓用户可以像物業管理系統那樣,通過簡單的拖拽操作將任務分配到時間軸上的合適位置,大幅提升排程效率與體驗。 DHTMLX Scheduler 試用下載,請聯繫DHTMLX官方授權代理商慧都科技 本文將帶您一步步實現這一功能。 使用場

software-Development Avatar

@software-Development

Nickname IT開發者筆記

@software-Development

JavaScript數據表格方案AG Grid主題定製新升級:Figma 設計系統全面打通設計與開發

在最新版本的Figma 設計系統中,所有變量已與AG GridTheming API 參數實現1:1 映射。這意味着設計師在 Figma 中的修改能夠無縫傳遞到開發代碼,徹底消除溝通障礙。更重要的是,藉助自動化導出與轉換工具,團隊可以一鍵生成生產可用的AG Grid自定義主題,顯著提升交付效率。 AG Grid最新版下載,請聯繫AG Grid中國區合作伙伴慧都科技 1. 設計與開發的橋樑:變量

software-Development Avatar

@software-Development

Nickname IT開發者筆記

@linx

Web前端入門第 85 問:JavaScript 一個簡單的 IndexedDB 數據庫入門示例

在前端風風雨雨的混了多年,從沒在項目中實際使用過 IndexedDB 這個瀏覽器端的數據庫,所以今天就摸了下 MDN 的後門,寫一個簡單的入門示例。 頁面大概長這樣: 源碼: 以下代碼包含了一個數據庫所有的 CRUD (增刪改查)操作。 div button id="js_add_btn"添加書籍/button /div div input type="text" name="" id=

linx Avatar

@linx

Nickname 前端路引

@smileZAZ

記錄---前端實現倒計時為什麼會存在誤差呢

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 1. 前端倒計時為何不準? 1.1 JavaScript的“單線程陷阱” JavaScript是單線程語言,所有任務(包括定時器回調)都在同一個線程中排隊執行。當主線程被耗時任務(如複雜計算、網絡請求)阻塞時,定時器回調只能“望隊興嘆”,導致實際執行時間遠晚於預期時間。就像一家只有一個收銀台的超市,即使定時

smileZAZ Avatar

@smileZAZ

Nickname 林恆

@smileZAZ

記錄---一篇文了解qiankun的代碼隔離原理

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 隨着前端業務的快速發展,微前端架構已經被廣泛採用,其中qiankun作為主流解決方案也越來越受到關注。前幾天面試時,我就被問到了一個高頻問題:qiankun 是如何實現 JS 和 CSS 隔離的? qiankun 的JS 沙箱 qiankun 的微前端場景是:主應用加載多個子應用,不同子應用可能依賴不同版本的庫、全

smileZAZ Avatar

@smileZAZ

Nickname 林恆