- 测试代码：fromEvent(this.test, 'click').pipe(map( event => event.timeStamp), mapTo(1)).subscribe((event) => console.log(event));pipe 操作的两个输入操作：输入参数为数组，包含两个元素：使用原始的 Observable 作为输入，执行这两个操作：数组的 reduce 是一个... 测试代码：fromEvent(this.test, 'click').pipe(map( event => event.timeStamp), mapTo(1)).subscribe((event) => console.log(event));pipe 操作的两个输入操作：输入参数为数组，包含两个元素：使用原始的 Observable 作为输入，执行这两个操作：数组的 reduce 是一个...
- 使用一个例子来研究 map 操作符的工作原理。推荐阅读本文之前，先浏览这篇文章RxJs fromEvent 工作原理分析以了解相关知识。源代码：import { Component, OnInit, Inject } from '@angular/core';import { fromEvent, combineLatest } from 'rxjs';import { mapTo, sta... 使用一个例子来研究 map 操作符的工作原理。推荐阅读本文之前，先浏览这篇文章RxJs fromEvent 工作原理分析以了解相关知识。源代码：import { Component, OnInit, Inject } from '@angular/core';import { fromEvent, combineLatest } from 'rxjs';import { mapTo, sta...
- fromEvent(this.test, 'click').subscribe((event) => console.log(event));this.test 的赋值逻辑：this.test = this.document.getElementById('test');每当该 id 为 test 的按钮被点击一次，则 fromEvent issue 一个新的值，内容为 MouseClick... fromEvent(this.test, 'click').subscribe((event) => console.log(event));this.test 的赋值逻辑：this.test = this.document.getElementById('test');每当该 id 为 test 的按钮被点击一次，则 fromEvent issue 一个新的值，内容为 MouseClick...
- 在 window-ref.ts 的实现里，定义了一个每隔 300 毫秒，通过 fromEvent 发射一个 resize event 的Observable：/** * Returns an observable for the window resize event and emits an event * every 300ms in case of resizing. An e... 在 window-ref.ts 的实现里，定义了一个每隔 300 毫秒，通过 fromEvent 发射一个 resize event 的Observable：/** * Returns an observable for the window resize event and emits an event * every 300ms in case of resizing. An e...
- 看下列这段出现在 Angular Component 内的代码：protected userCostCenters$: Observable<CostCenter[]> = this.userCostCenterService .getActiveCostCenters() .pipe(filter((costCenters) => !!costCenters));... 看下列这段出现在 Angular Component 内的代码：protected userCostCenters$: Observable<CostCenter[]> = this.userCostCenterService .getActiveCostCenters() .pipe(filter((costCenters) => !!costCenters));...
- 在 RxJS 中，tap 操作符是一种用于在 Observable 流中插入额外的副作用操作的工具。它允许我们在数据流中进行调试、记录日志、执行辅助操作等，而不会改变原始的 Observable 数据流。tap 操作符接收一个回调函数，该函数会在每个值通过 Observable 时被调用。tap 操作符的使用场景有很多，本文介绍一些常见的应用示例：调试和日志记录：import { tap }... 在 RxJS 中，tap 操作符是一种用于在 Observable 流中插入额外的副作用操作的工具。它允许我们在数据流中进行调试、记录日志、执行辅助操作等，而不会改变原始的 Observable 数据流。tap 操作符接收一个回调函数，该函数会在每个值通过 Observable 时被调用。tap 操作符的使用场景有很多，本文介绍一些常见的应用示例：调试和日志记录：import { tap }...
- Content Security Policy 是一种使用标题或 meta 元素来限制或批准加载到指定网站上的内容的策略。 这是一个广受支持的安全标准，所有网站运营者都应该对这些标准了然于心。 使用 CSP 通过说明允许或不允许的规则为 Web 网站增加了一层保护。 这些规则有助于防御内容注入和跨站点脚本 (XSS) 攻击，这是 OWASP 的十大 Web 应用程序安全风险中的两个。 Content Security Policy 是一种使用标题或 meta 元素来限制或批准加载到指定网站上的内容的策略。 这是一个广受支持的安全标准，所有网站运营者都应该对这些标准了然于心。 使用 CSP 通过说明允许或不允许的规则为 Web 网站增加了一层保护。 这些规则有助于防御内容注入和跨站点脚本 (XSS) 攻击，这是 OWASP 的十大 Web 应用程序安全风险中的两个。
- Observables 顾名思义，是可以被观察的事务。在 Rxjs 的上下文里，Observable 会随着时间的推移，在某个时间点产生数据。 Observables 顾名思义，是可以被观察的事务。在 Rxjs 的上下文里，Observable 会随着时间的推移，在某个时间点产生数据。
- 本文介绍笔者在实际 Angular 开发项目中对 Rxjs 里 mergeMap 这个 Operator 的使用经验分享。注意：flatMap 是 mergeMap 的别名。如果一次只能激活一个内部订阅，请使用 switchMap.如果内部 observables 的发射和订阅顺序很重要，请使用 concatMap.当需要展平内部 observable 但想要手动控制内部订阅的数量时，是 m... 本文介绍笔者在实际 Angular 开发项目中对 Rxjs 里 mergeMap 这个 Operator 的使用经验分享。注意：flatMap 是 mergeMap 的别名。如果一次只能激活一个内部订阅，请使用 switchMap.如果内部 observables 的发射和订阅顺序很重要，请使用 concatMap.当需要展平内部 observable 但想要手动控制内部订阅的数量时，是 m...
- 一个具体的例子：combineLatest([ data$.pipe(startWith(null)), loading$,]).pipe( takeWhile(([data, loading]) => !data || loading, true), map(([data, loading]) => loading ? null : data), skip(1), distin... 一个具体的例子：combineLatest([ data$.pipe(startWith(null)), loading$,]).pipe( takeWhile(([data, loading]) => !data || loading, true), map(([data, loading]) => loading ? null : data), skip(1), distin...
- 首先看看我这个支持 infinite scroll 的 Angular 应用的运行时效果：https://jerry-infinite-scroller.stackblitz.io/滚动鼠标中键，向下滚动，可以触发 list 不断向后台发起请求，加载新的数据：下面是具体的开发步骤。(1) app.component.html 的源代码：<div> <h2>{{ title }}</h2> ... 首先看看我这个支持 infinite scroll 的 Angular 应用的运行时效果：https://jerry-infinite-scroller.stackblitz.io/滚动鼠标中键，向下滚动，可以触发 list 不断向后台发起请求，加载新的数据：下面是具体的开发步骤。(1) app.component.html 的源代码：<div> <h2>{{ title }}</h2> ...
- 之前有读者看了我文章里代码截图之后，给我留言，Jerry，你为什么不用等宽字体呢？确实，我对编程等宽字体没有什么研究，感谢这位读者对我文章细心的阅读。网上做了一番功课，最后我选择了 Cascadia Code 这款等宽字体。看一下效果。图1和图2 分别是在 Visual Studio Code 里的非等宽字体和等宽字体 Cascadia Code，可见等宽字体确实能治疗程序员的强迫症。在 V... 之前有读者看了我文章里代码截图之后，给我留言，Jerry，你为什么不用等宽字体呢？确实，我对编程等宽字体没有什么研究，感谢这位读者对我文章细心的阅读。网上做了一番功课，最后我选择了 Cascadia Code 这款等宽字体。看一下效果。图1和图2 分别是在 Visual Studio Code 里的非等宽字体和等宽字体 Cascadia Code，可见等宽字体确实能治疗程序员的强迫症。在 V...
- iframe 是一项历史悠久的前端技术，能够将另一个 HTML 页面嵌入到当前的宿主页面。每个通过 iframe 被嵌入的 HTML 页面都拥有自己独立的浏览上下文，会话历史记录和 DOM 树。虽然 iframe 如果使用不当，可能会引发性能问题和安全隐患，但是它也有其应用场合，即复用第三方应用页面。因此，即便在 SAP 这种企业级应用软件的前端开发领域，iframe 仍然有其一席之地。本文... iframe 是一项历史悠久的前端技术，能够将另一个 HTML 页面嵌入到当前的宿主页面。每个通过 iframe 被嵌入的 HTML 页面都拥有自己独立的浏览上下文，会话历史记录和 DOM 树。虽然 iframe 如果使用不当，可能会引发性能问题和安全隐患，但是它也有其应用场合，即复用第三方应用页面。因此，即便在 SAP 这种企业级应用软件的前端开发领域，iframe 仍然有其一席之地。本文...
- 登录 SAP Commerce Cloud Administration Cockpit，从下拉菜单里选择 Product Cockpit:点击这个箭头，打开 product 视图：点击这个 excel import 按钮：选择好 excel 和 media.zip 之后，点击 import：点击这个按钮查看 import 进度：进到 Backoffice 页面，根据 excel 里的 pr... 登录 SAP Commerce Cloud Administration Cockpit，从下拉菜单里选择 Product Cockpit:点击这个箭头，打开 product 视图：点击这个 excel import 按钮：选择好 excel 和 media.zip 之后，点击 import：点击这个按钮查看 import 进度：进到 Backoffice 页面，根据 excel 里的 pr...
- 通过一个实际的例子来理解。下面的代码，创建了一个新的 subject，然后调用 next 方法，多播给其所有的监听者。import { Subject } from 'rxjs';const jerry = new Subject();const subscription = jerry.subscribe((data) => console.log(data));console.log('... 通过一个实际的例子来理解。下面的代码，创建了一个新的 subject，然后调用 next 方法，多播给其所有的监听者。import { Subject } from 'rxjs';const jerry = new Subject();const subscription = jerry.subscribe((data) => console.log(data));console.log('...
上滑加载中
推荐直播
0.3333333333333333
-
空中宣讲会 2025年华为软件精英挑战赛2025/03/10 周一 18:00-19:00
宸睿 华为云存储技术专家、ACM-ICPC WorldFinal经验 晖哥
2025华为软挑赛空中宣讲会重磅来袭！完整赛程首曝+命题天团硬核拆题+三轮幸运抽奖赢参赛助力礼包，与全国优秀高校开发者同台竞技，直通顶尖赛事起跑线！
即将直播 -
CloudPond上的DeepSeek2025/03/07 周五 16:30-17:30
George-华为云CloudPond解决方案经理
比一体机能力更丰满；比公有云距离更亲近；比自己搭建更轻松简单；解读在CloudPond 上部署DeepSeek，选型、方案以及部署维护的细节。
即将直播 -
空中宣讲会 2025年华为软件精英挑战赛
2025/03/10 周一 18:00-19:00
宸睿 华为云存储技术专家、ACM-ICPC WorldFinal经验 晖哥
2025华为软挑赛空中宣讲会重磅来袭！完整赛程首曝+命题天团硬核拆题+三轮幸运抽奖赢参赛助力礼包，与全国优秀高校开发者同台竞技，直通顶尖赛事起跑线！
即将直播 -
CloudPond上的DeepSeek
2025/03/07 周五 16:30-17:30
George-华为云CloudPond解决方案经理
比一体机能力更丰满；比公有云距离更亲近；比自己搭建更轻松简单；解读在CloudPond 上部署DeepSeek，选型、方案以及部署维护的细节。
即将直播
热门标签
