RxJS 非常强大,各种操作符连接在一起便能让数据流动到需要用到它的地方,有人甚至觉得 RxJS 是魔法;
然而,太阳底下无新事,本教程将一步步揭开 RxJS 的神秘面纱;
本教程会通过 10 个有趣的小 demo 渐进式的实现 RxJS 的核心功能,其中包括:
类:Observable 的实现 类的方法:subscribe,pipe 的实现 创建类操作符:of,from,fromEvent,interval,timer 的实现 过滤类操作符:filter,take 的实现 工具类操作符:tap 的实现 组合类操作符:merge 的实现 其中还包括 RxJS v5 链式调用 和 RxJS v6 通过 pipe 来调用 的各自实现。
而这一切,只有 200 行不到的代码,如果感兴趣,开始你的愉快之旅吧!
写在前面 如何使用? 首先安装依赖:
1 yarn 需要注意的是,本教程的 demo 是用 typescript 写的;
所以,为了方便调试运行,建议使用 ts-node,可以通过如下方式安装:
1 yarn global add ts-node 安装好后,你可以用 ts-node 来运行 typescript 文件,例如:
1 ts-node demo01/index.ts 这样就可以看到运行结果了;
文件结构 每个 demo 文件夹下会有 4 个文件,其中:
Being-A-Noob 成为一个菜鸟 January 2020
2020 年 01 月
When I was young, I thought old people had everything figured out. Now that I’m old, I know this isn’t true.
年轻的时候,我以为老人能弄清楚一切。现在我成为老人,才知道那不是真的。
I constantly feel like a noob. It seems like I’m always talking to some startup working in a new field I know nothing about, or reading a book about a topic I don’t understand well enough, or visiting some new country where I don’t know how things work.
Coronavirus and Credibility 冠状病毒与信誉 April 2020
2020 年 04 月
I recently saw a video of TV journalists and politicians confidently saying that the coronavirus would be no worse than the flu. What struck me about it was not just how mistaken they seemed, but how daring. How could they feel safe saying such things?
最近我看到一个视频,视频里政治家和新闻主持人们信誓旦旦地说新冠病毒不会比流感更糟糕。我对此感到非常震惊,不仅仅是因为他们的言辞有多错误,还因为他们的言辞有多大胆。他们怎么能心安理得地说这些话呢?
The answer, I realized, is that they didn’t think they could get caught. They didn’t realize there was any danger in making false predictions.
Electron 是一个优秀的跨平台桌面应用程序开源库,目前接触 Electron 的开发者也越来越多。但是笔者发现,目前社区里缺少对初学者足够友好的入门教程来帮助初学者用 Electron 搭建一个完整的开发框架。
为了解决这个问题,笔者将结合平时的一些 Electron 开发经验,渐近式的带领读者从零开始搭建一个完整的 Electron 应用。在这个教程中,笔者将使用 React 构建渲染进程。当然,读者也可以用其他框架来构建渲染进程,各种前端框架脚手架已经足够友好,所以这一点不用担心。
阅读完这篇教程,读者将会了解到:
Electron 的核心知识点 如何搭建一个最简单的 Electron 如何将 Electron 和前端应用相结合 如何配置 TypeScript 以保证代码质量 如何跨平台打包 Electron 应用 如何调试 Electron 笔者将通过以下 8 个小 Demo 来介绍上面的知识点,为了保证学习质量,建议读者手把手跟着练习这些 Demo,读者可以点击这里来下载项目代码。
搭建一个最简单的 Electron 从零搭建一个 React 应用(TypeScript,Scss,热更新) 将 Electron 与 React 结合 打包 Electron 应用 实际开发一个小 Demo 主进程使用 TypeScript 构建 主进程监听文件变化并重启 在 vscode 中调试主进程和渲染进程 在开始之前,我们先聊一聊 Electron 的基础概念
Electron 基础概念 Electron 是什么? Electron 是一个可以用 JavaScript、HTML 和 CSS 构建桌面应用程序的库。这些应用程序能打包到 Mac、Windows 和 Linux 系统上运行,也能上架到 Mac 和 Windows 的 App Store。
Markdown 是一种轻量级标记语言,目的是尽可能使其易于阅读和编写。
Markdown 由 John Gruber 在 2004 年创建,现在是世界上最流行的标记语言之一。
接下来会分两部分介绍,基础语法 和 扩展语法。
基本上,所有的 Markdown 编辑器都支持 John Gruber 原始设计文档中描述的 基触语法,扩展语法则要根据各个编辑器而异。
基础语法 标题 要创建标题,需要在文本前添加数字符号 #,并且和文本之间有空格相隔。
Markdown HTML Render # 一级标题 <h1>一级标题</h1> 一级标题 ## 二级标题 <h2>二级标题</h2> 二级标题 ### 三级标题 <h3>三级标题</h3> 三级标题 #### 四级标题 <h4>四级标题</h4> 四级标题 ##### 五级标题 <h5>五级标题</h5> 五级标题 ###### 六级标题 <h6>六级标题</h6> 六级标题 替代语法 你还可以在文本下方加上 == 或者 -- 来表示一级或者二级标题。
Markdown HTML Render 一级标题 ====== <h1>一级标题</h1> 一级标题 二级标题 ——— <h2>二级标题</h2> 二级标题 标题最佳实践 各个 Markdown 编辑器在处理标题与周围段落之间缺少空白行上并不一致。
模式 光标移动 h,j,k,l 分别对应光标键 ←,↓,↑,→。
单词间光标移动 键位 功能 w 到下一个单词的开头 e 到下一个单词的结尾 b 到当前单词的开头 行内光标移动 键位 功能 说明 0 到行头 $ 到行尾 ^ 到本行的第一个非空字符 g_ 到本行的最后一个非空字符 f 行内字符查找 fa → 跳到行内下一个为 a 的字符 F 和 f 一样,但是方向相反 t 行内字符查找 fa → 跳到行内下一个为 a 的前一个字符 T 和 t 一样,但是方向相反 行间光标移动 键位 功能 gg 到第一行 G 到最后一行 相同单词间光标移动 键位 功能 * 匹配光标当前所在的单词,移动光标到下一个匹配单词 # 匹配光标当前所在的单词,移动光标到上一个匹配单词 键位 功能 f 匹配光标当前所在的单词,移动光标到下一个匹配单词 # 匹配光标当前所在的单词,移动光标到上一个匹配单词 文本操作 复制文本 键位 功能 yy 复制当前行(当行于 ddp) 添加文本 键位 功能 p 粘贴剪贴板里的文本 删除文本 键位 功能 说明 dd 删除当前行,并把删除的行存到剪贴板里