什么是 RxJS?
RxJS 是一个基于异步和事件驱动的编程库，它使用可观察序列和操作符来编写异步和基于事件的程序，它非常适合编写 Web 应用程序中的大数据场景。
动态输入框的需求
动态输入框的需求就是可以实现添加或删除输入框，而这些输入框的值都可以随时监测到变化，最终将这些值提交到服务器。
下面我们将一步步地使用 RxJS 来实现动态输入框。
HTML 结构
<div id="container"></div> <button id="add">添加输入框</button> <button id="remove">删除输入框</button> <button id="submit">提交</button>
添加输入框的功能
我们在 id="container" 的 div 中添加输入框。
-- -------------------- ---- -------
----- --------- - -------------------------------------
----- ------ - -------------------------------
------------------------------- --------
----------- -- ----- - -- --
---------------- -- -
----- ----- - --------------------------------
------------------------ ------------------
-----------------------------
---我们使用 fromEvent 创建一个流，监听 addBtn 元素的 click 事件。.scan() 操作符将每次点击计数器增加 1，初始化计数器为 0。根据计数器的值创建一个带有唯一 id 的输入框，并将其添加到容器中。
删除输入框的功能
我们可以通过 “-” 操作符来删除最近添加的输入框，需要注意的是，只有当已经添加了输入框的情况下才能删除。
-- -------------------- ---- -------
----- --------- - ----------------------------------
---------------------------------- --------
----------------
------------------------------- ------------------- -- ----- - -- ---
--- ------ -- -----
-
------------- -- ----- - --
---------------- -- -
----- ----- - ------------------------------------------
-----------------------------
---我们使用 withLatestFrom 操作符将最近计数器值与 removeBtn 的 click 流合并，然后使用 filter 操作符过滤掉计数器值不大于 0 的情况，最终根据计数器的值移除对应的输入框。
监测输入框的变化
我们可以使用 mergeMap 操作符将所有输入框的 input 流合并为一个流，之后对这个流进行监听并处理。
-- -------------------- ---- -------
----- --------- - ----------------------------------
---------------------------------- --------
----------
-- -- -
------ ------------------------------------
-
-
----------
------- -- -
------ ------------------------------ --------
---------------- --------
------------------------
-
-
----------------- -- -
--------------------
---我们使用 mergeMap 操作符将所有输入框的 input 流合并为一个流，之后使用同样的操作符处理这个流。在内部我们使用 pluck 操作获取新值，并使用 startWith 操作提供当前的值，最终将所有输入框的值输出到控制台。
总结
在 RxJS 中使用可观察序列和操作符可以轻松地实现多种复杂的场景，如此动态输入框的需求就可以在极短的时间内得到实现。值得注意的是，我们在编写代码时应该注重代码的可读性和可维护性，使得代码能在日后得到轻松地维护和重构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64538819968c7c53b07dffa9