一场无声的军备竞赛：js响应式编程-唐霜

近几年来，前端框架层出不穷，我们不禁感叹【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】，不知道未来两年还会有什么新框架出现。这【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】种无力的感叹，究竟是因为前端的想象力太过【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net丰富，人才太多，各自新式花样的东西会冒出未经授权，禁止复制转载。【转载请注明来源】来，还是因为有内在的规律？我相信，作为一【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】个历史学系毕业的学生，万事皆有规律，这种【版权所有，侵权必究】【版权所有，侵权必究】规律支配着下一代编程的可能性。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【作者：唐霜】

有些人觉得这是玄学，他认为，之所以有这样著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】的规律，是因为那些东西胜出了，胜者为王，【版权所有，侵权必究】【版权所有，侵权必究】历史都是胜利者书写。然而，如果把逻辑反过【未经授权禁止转载】【转载请注明来源】来，自问，为什么在众多框架中，vue、r【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。eact如日中天，为什么typescri未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。pt越来越被接纳？难道是因为他们本身太过著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。优秀？为什么webpack这么火，打包工【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。具不是没有rollup如此优秀，怎么不是【作者：唐霜】原创内容，盗版必究。它火爆到如此？为什么seajs挂了？

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】

我认为，更多的原因，是因为他们用最恰当的方式解决了当下开发者的痛点。

抽象化

而痛点是什么？这就是我们今天要讨论的话题【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net。当下这个时代，前端开发的痛点有两个：1本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net.抽象化；2.同构。抽象化是指将某种原本本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。混杂的概念，抽象为某种逻辑清晰的理念，最【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】成功的，当属“Virtual DOM”。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】同构，是指写一套代码，在不同端使用，PC【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。、手机、服务器……总之，这两点都是当下已【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。经探索出门路的东西，所以，才有那么多东西本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。围绕这两天冒出来。

其实同构这个痛点解决起来轻松很多，大家都著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】有思路，只是方案不同，京东凹凸实验室做了转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】一个项目，叫Taro，用以实现一套代码，本文作者：唐霜，转载请注明出处。【作者：唐霜】构建出在PC、app、微信小程序等多个平本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】台运行的应用。同构大家都有思路，只是方案【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net还没有完善而已。

但是，抽象化，则更像是一个哲学问题，它要原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。研究，要实验，要有理论支撑，要集大成，要原创内容，盗版必究。【原创不易，请尊重版权】有权威人物发言，要有知名厂商站台。因此，【转载请注明来源】【本文首发于唐霜的博客】在对前端开发规范、标准、模式等各个方面的【本文受版权保护】【本文首发于唐霜的博客】竞争，就像一场军备竞赛一样，很多人既不甘【版权所有，侵权必究】转载请注明出处：www.tangshuang.net心，又不得不使用最流行的框架或规范。

【原创内容，转载请注明出处】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ng.net本文作者：唐霜，转载请注明出处。

也正是因为这样，我们在感觉到这几年前端领【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。域的混乱的同时，似乎也感觉到另外的东西，【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】前端正在范式化，很多问题都在被解决，虽然转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。有些方案看上去还没有变得非常权威，但确实【作者：唐霜】【版权所有】唐霜 www.tangshuang.net起到了一个探索的过程，这些探索像从四面八未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】方出发，慢慢堆积出前端这座大厦的主体框架【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】，并且已经在添砖了。

举一个例子，前端推行函数式编程。而函数式转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的特点就是纯函数，纯函数是一个无状态的运未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】行器，无论多少次，只要给的输入相同，输出【转载请注明来源】【作者：唐霜】也一定相同。那么这就会有一个疑问，既然相【原创内容，转载请注明出处】【作者：唐霜】同输入是一样的输出结果，为何不缓存起来呢【作者：唐霜】【版权所有，侵权必究】？是的，最大的问题是，要以怎样的代码来实【作者：唐霜】【版权所有】唐霜 www.tangshuang.net现，让开发者可以非常爽的使用这个工具，写原创内容，盗版必究。未经授权，禁止复制转载。最少的代码，以最浅薄的认知，就实现这个效【作者：唐霜】本文作者：唐霜，转载请注明出处。果呢？有一个包，叫reselect，它实转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。现了一套这样的机制。而redux中的re【本文受版权保护】【原创不易，请尊重版权】ducer也要求是纯函数，因此，把这两者本文版权归作者所有，未经授权不得转载。【转载请注明来源】结合起来，就得到了一个答案。

当你读到这里，你可能蒙圈儿了。这篇文章到本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】底要讲什么？下面，我们就将正式的进入我们【本文受版权保护】本文作者：唐霜，转载请注明出处。的话题。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【作者：唐霜】ngnet】

驱动模式

而前端领域抽象化话题下，有个话题不得不单未经授权，禁止复制转载。未经授权，禁止复制转载。独拿出来讲，那就是程序的驱动模式。

什么是程序的驱动模式？简单的说，就是一套【原创不易，请尊重版权】【作者：唐霜】程序里面，它依靠何种模式去运行。一旦在技【版权所有】唐霜 www.tangshuang.net【作者：唐霜】术选型中确认了驱动模式，这个应用的一生就【本文首发于唐霜的博客】【原创不易，请尊重版权】不得不在这个模式下开发，驱动模式就是它的本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】基因。想要更换驱动模式？不可能的，即便是未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。重构，也不可能，除非你的上级允许你把原有原创内容，盗版必究。【未经授权禁止转载】产品当作一个新产品，完完全全重新写过，否本文版权归作者所有，未经授权不得转载。【作者：唐霜】则永远无法逃脱这个驱动模式。

【作者：唐霜】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

举个例子，如果你的应用一开始选择了rea【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netct作为基本库，那么后面切换到vue或者【版权所有，侵权必究】【转载请注明来源】angular可能吗？不可能。但是，如果【转载请注明来源】本文版权归作者所有，未经授权不得转载。你后面切换到taro的体系，可能吗？完全【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net没问题。因为react和taro的驱动模【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。式完全一模一样，因为taro就是按rea【本文首发于唐霜的博客】【本文首发于唐霜的博客】ct的模式开发的。同样的道理，使用zet转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】op替代jquery是可以的，使用req本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】uirejs替代seajs也是可行的，使未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net用angular2替代angular1比【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。较困难，但大体还是有办法。用rollup【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net替代webpack，用yarn替代npm本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net，用其他什么东西替代babel，只要它们未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】的驱动模式相同，就是可行的，只是需要付出本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。迁移成本。

jquery

【作者：唐霜】

backbone

【原创内容，转载请注明出处】

【本文首发于唐霜的博客】

著作权归作者所有，禁止商业用途转载。

angular

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

【未经授权禁止转载】

react

【原创不易，请尊重版权】

著作权归作者所有，禁止商业用途转载。

转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【本文受版权保护】ng.net

转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ng.net

转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ng.net

【原创内容，转载请注明出处】

这里列出来的5个，代表着过去10年来，前【作者：唐霜】【转载请注明来源】端领域最为重要的东西：如何驱动一个应用。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

答案很明显，jquery通过简化DOM操【转载请注明来源】【转载请注明来源】作，同时它提供了非常多的辅助方法，让开发【版权所有，侵权必究】转载请注明出处：www.tangshuang.net者极其迅速的实现应用交互。可以说，jqu【未经授权禁止转载】【原创不易，请尊重版权】ery就是前端领域的诺基亚，若不是rea著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ct的出现，它还会过得很舒服。那么问题来著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】了，为什么backbone和angula【本文受版权保护】【本文受版权保护】r没有打败jquery？其实说实话，它们著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】根本没有要打架的意思，它们都拥抱jque【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netry。backbone提供的是数据层面的【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。模式，视图操作还是要靠jquery。an【转载请注明来源】转载请注明出处：www.tangshuang.netgular更不用说，干脆直接集成jque【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ry。这究竟是为什么？

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

实际上，如果你慢慢读我下面的内容，你就会【原创不易，请尊重版权】【本文受版权保护】发现，他们是在同一种驱动模式下实现的东西著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，只是解决了不同的问题而已。其中非常值得【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】一提的是backbone，它是这一时期的【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net最高提炼，甚至有些过了头。backbon【本文受版权保护】转载请注明出处：www.tangshuang.nete的终极，是要建立一套数据驱动视图的机制原创内容，盗版必究。未经授权，禁止复制转载。，但是它只管数据，而不管视图，它差就差了【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】这一步，如果它能够在“驱动视图”这个层面原创内容，盗版必究。本文作者：唐霜，转载请注明出处。有所突破，比如它在它那个时候想到“数据改原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】动时，找出最小的改动范围，只更新这部分数本文版权归作者所有，未经授权不得转载。【作者：唐霜】据对应的视图”这样的方案的话，那么后面可【版权所有】唐霜 www.tangshuang.net【本文受版权保护】能就没react多少事了。可惜啊可惜，那【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。个时代，思维可能还不能这么超前，所以今天【作者：唐霜】转载请注明出处：www.tangshuang.net，backbone就像完成了历史使命一样【本文受版权保护】【原创内容，转载请注明出处】，等待着失去生命那一天。

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】本文作者：唐霜，转载请注明出处。

是的，“数据驱动视图”，是react和v【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ue大获成功的核心所在。react最终找【作者：唐霜】【转载请注明来源】到了突破backbone没有突破的那个点转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，那就是用virtual DOM来实现数本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】据到视图这个过程。

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

说了这么多，这5个框架的最本质区别是什么未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net？答案很明显啊：驱动模式。

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

jquery、angular、backb原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。one：事件驱动

原创内容，盗版必究。

【转载请注明来源】

vue、react：数据驱动（这里还有更【未经授权禁止转载】【本文首发于唐霜的博客】深的讨论）

【原创不易，请尊重版权】

【转载请注明来源】

转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】ng.net

backbone虽然想要解决“数据驱动视转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】图”这个问题，但是很无奈，它构建了数据响本文作者：唐霜，转载请注明出处。原创内容，盗版必究。应的一种方式，也就是和jquery、an原创内容，盗版必究。原创内容，盗版必究。gular一模一样的方式：事件响应。

【本文受版权保护】【访问 www.tangshuang.n原创内容，盗版必究。【转载请注明来源】et 获取更多精彩内容】

响应式编程

阅读本文，你需要有一种思维的跳跃过程。终【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。于，你看到了标题中提到的东西。为什么现在【转载请注明来源】【原创不易，请尊重版权】才讲到标题上的东西？因为，终于出现了“事【本文受版权保护】【原创内容，转载请注明出处】件响应”。事件响应，它是响应式编程的一种。

【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。ang.net【版权所有】唐霜 www.tangshu【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ang.net转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netng.net

所谓响应式编程，是指不直接进行目标操作，【转载请注明来源】【作者：唐霜】而是用另外一种更为简洁的方式通过代理达到目标操作的目的。举个例子，还是vir本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】tual DOM，通过修改数据，实现对D【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】OM的更新。那么问题来了，修改数据到DO【作者：唐霜】【原创内容，转载请注明出处】M更新这个过程，怎么实现联动呢？再说明白【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net一点，这套代码怎么在我修改了数据之后，去【原创内容，转载请注明出处】【原创内容，转载请注明出处】更新DOM呢？如果是react，那就比较【作者：唐霜】【版权所有】唐霜 www.tangshuang.net好解释，通过setState方法更新状态【转载请注明来源】本文版权归作者所有，未经授权不得转载。，并且setState方法内会联动去执行【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】virtual DOM中的diff和pa未经授权，禁止复制转载。转载请注明出处：www.tangshuang.nettch操作，这样就会更新界面。但是在vu著作权归作者所有，禁止商业用途转载。【转载请注明来源】e里面就相对复杂一些，vue里面直接修改转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netthis上面的一个属性，就可以更新界面了【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net。虽然我们现在都知道，vue是用defi本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】neProperty重写了属性的sett【版权所有，侵权必究】【原创内容，转载请注明出处】er，但是这一整套机制实现起来，可不是三【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。两句就说完的。

【本文受版权保护】原创内容，盗版必究。

react之所以好解释，是因为如果单纯讲【版权所有，侵权必究】转载请注明出处：www.tangshuang.netreact本身，它其实在响应式这个问题上【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net和vue有非常大的区别，因为如果单纯看s【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。etState，它根本没有响应式，它的响【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】应，是要通过在jsx上绑定事件来实现，因原创内容，盗版必究。【转载请注明来源】此，单纯看react，它的响应式和ang著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ular并无大异，甚至还不如angula【未经授权禁止转载】原创内容，盗版必究。r。这可能会气坏react的追随者，但事未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。实就是如此。angular的脏检查机制，【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。从体系的层面讲，等同于react里面se【原创内容，转载请注明出处】【本文首发于唐霜的博客】tState+virtual DOM，而【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。angular里面不需要setState未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，而是像vue里面一样直接修改数据，编程转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】体验上更舒服的多。那么是什么让react本文作者：唐霜，转载请注明出处。【转载请注明来源】变得不一样？是redux！！！是的，re本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。dux及其生态，简直就是这个时代最最最了转载请注明出处：www.tangshuang.net【版权所有，侵权必究】不起的发明之一，当然，redux是按fl转载请注明出处：www.tangshuang.net【转载请注明来源】ux实现的，因此，说Facebook的工【未经授权禁止转载】【作者：唐霜】程师伟大，也不为过。实体的东西叫了不起，【转载请注明来源】【未经授权禁止转载】思想的东西才叫伟大。

回到响应式这个话题。

一套代码里面，怎么做到，当一个东西发生了著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。变化，另外一个东西知道它变了，自己也马上【作者：唐霜】【本文受版权保护】作出调整？

【访问 www.tangshuang.n原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。et 获取更多精彩内容】【关注微信公众号：wwwtangshua原创内容，盗版必究。【原创不易，请尊重版权】ngnet】转载请注明出处：www.tangshua【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】ng.net

我们来看看响应式和非响应式的区别：

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

// 非响应式
var a = 1
var b = a + 3
var _temp = a

setInterval(() => {
  if (_temp !== a) {
    b = a + 3
    _temp = a
  }
}, 16)

上面这段代码超级容易理解。b是依赖于a的【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。，当a发生变化的时候，b也发生变化。那么【作者：唐霜】【版权所有】唐霜 www.tangshuang.net非响应式是怎么做的？写一个定时器，不断跑本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】，如果在跑的过程中，发现a变了，那么赶紧原创内容，盗版必究。原创内容，盗版必究。把变化之后的值运算之后给b，这样b也就跟【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】着变了。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

// 响应式
$scope.a = 1
$scope.b = a + 3

$scope.$watch('a', (a) => {
  $scope.b = a + 3
})

上面这段代码也比较容易理解。用一个$wa【原创内容，转载请注明出处】【版权所有，侵权必究】tch方法去观察a这个属性，如果它变了，【本文首发于唐霜的博客】原创内容，盗版必究。马上执行watch的第二个参数函数。“观转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net察”，这个词引出了一个设计模式：观察者模【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】式。被观察的对象，将要观察的部分，以及发【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】生变动后要做什么事情，这两个东西交给观察【未经授权禁止转载】【未经授权禁止转载】者，当观察者发现被观察对象的这个部分发生本文作者：唐霜，转载请注明出处。【未经授权禁止转载】变动的时候，就执行要做的事情。这就是观察本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net者模式的基本思路。这种思路普遍存在于jq【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。uery、angular、backbon本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。e中，这也是早期框架、库无法逃脱的宿命，转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】它们遵循这一驱动模式。

而响应式编程，就是这一驱动模式下的一种编【转载请注明来源】【关注微信公众号：wwwtangshuangnet】程方式。开发者写一段代码要实现某个操作时本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。，他并不立即用代码去写这个操作，而是使用【作者：唐霜】【本文受版权保护】了一个代理（这个代理一般由框架或库实现）【转载请注明来源】【版权所有】唐霜 www.tangshuang.net，这个代理的作用是，当用户进行了某个操作未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】时，触发了某个变动（事件或数据变动），而【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】这个变动触发了代理中的某些特定项，而这些【转载请注明来源】未经授权，禁止复制转载。特定项被触发时，和它们绑定的目标操作就会【本文受版权保护】【本文首发于唐霜的博客】自动执行。虽然这个过程比直接用代码写操作【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。过程本身复杂，但是对于开发者而言不是，开【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】发者只写用户进行操作时会触发哪个变动，这【本文首发于唐霜的博客】【未经授权禁止转载】样代码量就极速下降，甚至只需要一行代码。

这就是响应式编程的优势，它利用代理（一般【本文首发于唐霜的博客】【作者：唐霜】是经过高级封装的一套逻辑）阻断了变动和操【转载请注明来源】【原创不易，请尊重版权】作的直接关系，而是将变动和操作分离，但通【本文受版权保护】【原创不易，请尊重版权】过代理，又可以准确的执行变动带来的操作。

响应式的分流

原创内容，盗版必究。【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】et 获取更多精彩内容】

【关注微信公众号：wwwtangshua【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ngnet】【未经授权禁止转载】【原创内容，转载请注明出处】原创内容，盗版必究。

事件响应

这是我们最早知道的一种响应式编程方式。时【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。间倒退10年，我们会在网页中，利用DOM本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。节点的事件钩子来做一些事情，例如当用户输【版权所有】唐霜 www.tangshuang.net【作者：唐霜】入关键字的时候，利用xhr搜索，让用户可本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net以看到一个推荐列表。现在听起来这个功能好本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】土啊，但是回到10年前，真的不得了，我记【原创不易，请尊重版权】【未经授权禁止转载】得百度是2010年才有这个功能的吧。

【本文首发于唐霜的博客】【作者：唐霜】

但现在是2018年了，事件响应简直简单的【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net要死，连HTML5都规定了addEventListener这样的api，简直抢了jquery的饭碗【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】。但是，我还是要提backbone，虽然转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】这件事是jquery先做的，什么事？那就本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。是抽象出事件响应的书写方式，也就是提供o【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】n/off/trigger这三个主要方法【作者：唐霜】著作权归作者所有，禁止商业用途转载。，实现一整套事件的绑定、解除、触发逻辑。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net之所以觉得backbone更高级，是因为本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。backbone试图完全脱离view层面【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。，jquery的这些方法，大部分还是向D【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】OM节点绑定事件，但backbone完全著作权归作者所有，禁止商业用途转载。【作者：唐霜】是自定义事件，脱离了DOM事件体系，触发原创内容，盗版必究。未经授权，禁止复制转载。事件是为了修改数据。

angular里面对事件响应做了更高级对本文版权归作者所有，未经授权不得转载。【作者：唐霜】封装，它把对DOM节点绑定的事件和对数据未经授权，禁止复制转载。【本文受版权保护】操作绑定的事件这两件事抹平，成为一件事，转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net它把点击抽象为ng-click，ng-c本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】lick实际要做两件事，一件是绑定事件到本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。DOM节点上，另一件是当DOM事件被触发未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net时同时触发绑定的数据操作。因此，当ng-转载请注明出处：www.tangshuang.net【转载请注明来源】click传入的函数被执行时，会同时执行【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。所有$watch的函数，实现脏检查。an原创内容，盗版必究。【原创不易，请尊重版权】gular本身实现的是backbone那【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。一套事件响应，但同时，它也借助了DOM事著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】件响应的原生特性。这使得angular成本文作者：唐霜，转载请注明出处。【本文受版权保护】为早起最不得了的框架。

【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ngnet】未经授权，禁止复制转载。转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ng.net

数据响应

借鉴于angular，但和angular【转载请注明来源】【未经授权禁止转载】不同，vue走了另外一条路。vue要做的本文版权归作者所有，未经授权不得转载。【本文受版权保护】，是解决backbone没有解决的问题。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】它不去寻求中间的那一层代理，而是直接实现本文作者：唐霜，转载请注明出处。原创内容，盗版必究。数据变动的联动效果。在前面举例一个数据变原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net了另外一个数据跟着变的代码的时候，有一种原创内容，盗版必究。原创内容，盗版必究。更快速的实现方式：

var a = 1
var b = a + 3

function setA(value) {
  a = value
  b = a + 3
}

在每次想要修改a的时候，调用setA，而【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。非直接a = 0，这样可以做到a变的时候转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net，b也跟着变。这叫响应式？如果非得说概念著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】的话，这还真是，只是代码看上去不那么优雅【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】吧。

不知道你有没有用过chai.js，里面有【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。一种should方式。这种方式修改了整个本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。作用域，使得要测的变量拥有了should【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net属性，非常了不起。为什么要讲这个？因为我原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。们也可以用一种方式，不要用setA这么俗转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】的方式修改a，因为太不直观了，我就想要a本文版权归作者所有，未经授权不得转载。【作者：唐霜】 = 0。

vue就是干了这么一件事，它抹掉了set著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。A这个操作，使得直接修改this上的某个【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】属性时，就可以触发目标操作（更新界面）。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net这种将其他操作抽象到数据操作上的响应模式【作者：唐霜】本文作者：唐霜，转载请注明出处。，就叫“数据响应”。它把对界面操作的目标【本文首发于唐霜的博客】【本文受版权保护】，抽象为对数据操作，也就是抹平了angu【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netlar里面的$watch，抹平了back原创内容，盗版必究。本文作者：唐霜，转载请注明出处。bone里面的on/trigger，其实【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。也就是抹平了事件响应里面的“观察者”这个【未经授权禁止转载】【本文受版权保护】环节，也就是不需要观察者，因为它不依赖于事件。

未经授权，禁止复制转载。【原创不易，请尊重版权】

基于数据响应，其实可以做非常多的事。在v著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】ue里面，数据响应的下一步是通过virt【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netual DOM实现界面的更新。而如果将这【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】个模式运用到服务端开发，也是可以的。我之原创内容，盗版必究。转载请注明出处：www.tangshuang.net前发布了自己写的最新的包objext，它本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net就是将数据响应抽象化，使得数据响应脱离v转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netue这种要操作界面的具体场景，数据响应，著作权归作者所有，禁止商业用途转载。【转载请注明来源】应该可以运用于任何场景。当然，objex未经授权，禁止复制转载。【本文受版权保护】t只是一个非常小的东西，如果想要更加高级未经授权，禁止复制转载。【本文首发于唐霜的博客】功能的，可以了解下mobx。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshua【原创不易，请尊重版权】【原创不易，请尊重版权】ngnet】著作权归作者所有，禁止商业用途转载。

事件流响应

2018年真是多事之秋，原本以为数据响应【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。，已经是最了不起的模式了，然而，RxJS未经授权，禁止复制转载。【原创内容，转载请注明出处】的突然爆热，让响应式编程出现了新的视野，【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net原来以为只有事件响应和数据响应，没想到响著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。应式里面还有新的风骚操作。

【版权所有】唐霜 www.tangshu【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】ang.net【本文首发于唐霜的博客】【访问 www.tangshuang.n原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】【访问 www.tangshuang.n原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】

RxJS并非完全首创，实际上HTML5已转载请注明出处：www.tangshuang.net【本文受版权保护】经有类似的东西出来了，那就是Mutati【关注微信公众号：wwwtangshuangnet】【作者：唐霜】onObserver，这个看上去很容易让【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net人忽略的接口，却对于一不小心看到的开发者【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net来说，简直就像捡到一块宝。Mutatio著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】nObserver将DOM的操作变为可观【作者：唐霜】【作者：唐霜】察的，在这之前，我们操作DOM，没有一个原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。事件可以知道，一个DOM节点是不是被删掉【作者：唐霜】转载请注明出处：www.tangshuang.net了，是不是被修改了，而有了Mutatio【未经授权禁止转载】【本文受版权保护】nObserver之后，就可以做到了。既未经授权，禁止复制转载。未经授权，禁止复制转载。然DOM是一个对象，那么基于同样的逻辑，【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。能否实现一个东西，可以让一个普通的js对【版权所有，侵权必究】转载请注明出处：www.tangshuang.net象也可以转变为可观察的呢？RxJS孕育而【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。生。了解RxJS的同时，需要了解ReactiveX，也就是说，这是一种编程方式，它在不同的著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net语言中被实践，不单单包括js。

ReactiveX is a combination of the best ideas from
the Observer pattern, the Iterator pattern, and functional programming。

未经授权，禁止复制转载。【原创不易，请尊重版权】【作者：唐霜】

它将事件再度抽象，因为一个应用中，事件往原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】往不是单独存在的，而是一系列事件相继被触【本文首发于唐霜的博客】未经授权，禁止复制转载。发，因此，它提出了streams的概念，【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】也就是“流”，事件流，总结起来，它就是基著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。于“可观察的事件流”的编程方式。当然，它著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】提到了自己是函数式的编程，这可能是为了蹭转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net热度，强制要让开发者体验最新潮的开发方式著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，但函数式并非它的最终极目标，没有函数式转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，它照样让开发者体验极致开发，有了函数式【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。，使得它熠熠生辉。

【本文首发于唐霜的博客】【本文受版权保护】【关注微信公众号：wwwtangshua未经授权，禁止复制转载。【原创不易，请尊重版权】ngnet】【转载请注明来源】

那么，RxJS到底优秀在什么地方呢？Rx转载请注明出处：www.tangshuang.net【本文受版权保护】JS的本质和事件响应一样，是观察者模式的【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。一种实践，通过内部机制，实现观察者，同时未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。开发者可以通过subscribe方法进行转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。订阅，从而在特定的事件中，达到自己的目的【本文首发于唐霜的博客】原创内容，盗版必究。。但是，单有观察者模式的实践不足以使它优原创内容，盗版必究。【转载请注明来源】秀，构建“流”才是它的杀手锏。RxJS是未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。怎么实现“流”的，那就是它结合了迭代器模本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。式。

【本文受版权保护】【原创不易，请尊重版权】

什么是迭代器模式？就是开发者可以自己创建【未经授权禁止转载】未经授权，禁止复制转载。一个迭代器，在遍历过程中，开发者创建的这著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】个迭代器规定了遍历的内在逻辑。在RxJS【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。开发时，开发者可以自己规定迭代器，把迭代转载请注明出处：www.tangshuang.net原创内容，盗版必究。器作为被观察对象，这样，在运行过程中，事【版权所有】唐霜 www.tangshuang.net【转载请注明来源】件流（本质上是一个事件订阅序列）就会安装未经授权，禁止复制转载。【版权所有，侵权必究】迭代器内的逻辑进行流动。

除此之外，RxJS更是抽象出事件与数据之【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】间的映射关系。我们都知道，virtual【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net DOM抽象出了数据和真实DOM的映射关【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】系，数据改变，DOM改变。RxJS则是抽【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。象出事件与数据之间的映射关系，事件发生，【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。数据按照规定发生变化。RxJS通过各种m【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ap方法，抹平了事件和数据、事件和事件的本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】分离状态，使得事件在RxJS的体系里面，【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。是有序的，可映射为数据变化的东西。因此，【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。RxJS里面的响应方式是：你不需要关心事【本文受版权保护】本文版权归作者所有，未经授权不得转载。件本身，而只需要关心事件所映射的数据变化【原创不易，请尊重版权】【本文受版权保护】。

【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

虽然RxJS的编程体验非常好，但是有一个本文作者：唐霜，转载请注明出处。【本文受版权保护】问题在于，它是完全新的驱动模式。它不仅改【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。变了开发者的开发习惯，更重要的是，它对项未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。目具有侵入性。我已经说过，要使得一个已有著作权归作者所有，禁止商业用途转载。【作者：唐霜】的项目改变驱动模式，是不可能的，如果要在【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。一个原有项目中重新使用RxJS，几乎不可转载请注明出处：www.tangshuang.net【转载请注明来源】能。而且它的api超级多，使得新晋的开发【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。者可能望而却步。但现在已经是2018年了本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。，什么样的复杂模式不应该了解一下呢？

【本文受版权保护】【本文首发于唐霜的博客】

数据流响应

很明显，有“流”的概念之后，“数据流”的本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】概念也呼之欲出。数据响应和事件响应的区别【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】是，不需要“观察者”，对数据的操作更加直【转载请注明来源】【未经授权禁止转载】接。但是有一个问题是，当一套复杂的数据响【未经授权禁止转载】【作者：唐霜】应被应用于一套复杂的应用中时，开发者往往【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】在响应来响应去的连环嵌套响应中被搞昏头，【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net因为数据的响应而牵一发动全身，导致整个响【原创不易，请尊重版权】【未经授权禁止转载】应很难控制，这是数据响应必须解决的问题。

为了解决这个问题，vue推出了vuex。著作权归作者所有，禁止商业用途转载。【作者：唐霜】react本身就没有响应，数据是单向流的【版权所有】唐霜 www.tangshuang.net【转载请注明来源】，不存在这个问题，但是也正因为react著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】没有响应，所以开发体验极差，因此，有了r原创内容，盗版必究。本文作者：唐霜，转载请注明出处。edux和react-redux。

【未经授权禁止转载】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua【作者：唐霜】【本文受版权保护】ng.net

数据流响应的本质，是一个状态机。它确定了【转载请注明来源】本文版权归作者所有，未经授权不得转载。数据在某一时刻的特定状态，数据的不断变化【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。是可以被监控的，上一个状态是什么，变化后著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。现在的状态又是什么，都可以被开发者知道。未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】靠什么来维持这种数据流呢？redux发明【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net了reducer机制，通过纯函数式的状态本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。更改器，来保证每一个状态都是独特的不被污原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】染的。

【转载请注明来源】未经授权，禁止复制转载。

但是，实际上，redux在“响应”上做的【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。并不完美。react-redux顶多做到【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。了“状态的改动自动映射到界面的改动”，但【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。是它没有解决的是，在数据和状态之间做好映【原创内容，转载请注明出处】未经授权，禁止复制转载。射。现在的redux，你需要创建acti原创内容，盗版必究。【作者：唐霜】on和触发dispatch，有没有一种方【原创内容，转载请注明出处】【作者：唐霜】式，可以不需要手动去触发dispatch【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】，数据的响应是事先安排好的，当数据发生变【本文首发于唐霜的博客】未经授权，禁止复制转载。化时，自动dispatch？这样可以更完著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。美的提升开发体验。虽然mobx是这样的，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。但是它忘记抽象出数据流，用mobx管理数【未经授权禁止转载】【本文受版权保护】据，更多的是看中它的响应，但你不能保证对【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。整个应用的状态的准确把握。

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】原创内容，盗版必究。

由此，在“数据流响应”这个点上，实际上，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。还没有一套完美的解决方案。另外，有人将R【本文受版权保护】【转载请注明来源】xJS和redux结合起来，既发挥了Rx【作者：唐霜】【原创不易，请尊重版权】JS在事件管理上的优雅，又保证了数据流的【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。准确，但这一结合也仅仅主要是为了解决re【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netdux在异步数据数据处理中的问题，没有真【本文受版权保护】【作者：唐霜】正抽象出数据流动本身的管理。或许，接下来著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】的一两年，冒出来的新东西，就是在解决这个转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】痛点也说不定。

小结

本文从前端的开发体验入手，阐述了“抽象化本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。”“驱动模式”“响应式编程”等问题。前端未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】编程是面向用户体验的编程，它不仅要考虑界本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。面呈现的友好、业务逻辑的准确，还要考虑在本文版权归作者所有，未经授权不得转载。【转载请注明来源】编程中如何精准、快速地响应用户操作。响应【作者：唐霜】【关注微信公众号：wwwtangshuangnet】式编程，是未来的一个趋势，但响应式编程不著作权归作者所有，禁止商业用途转载。【转载请注明来源】只有ReactiveX，不应该一提到响应【转载请注明来源】【本文首发于唐霜的博客】式编程，就限定于ReactiveX。它是原创内容，盗版必究。【原创内容，转载请注明出处】一整套抽象逻辑，除了本文提到的四种响应式【版权所有，侵权必究】【未经授权禁止转载】之外，说不定再两年，又有新的响应式也不定未经授权，禁止复制转载。【版权所有，侵权必究】。

【转载请注明来源】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

【本文受版权保护】【未经授权禁止转载】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【本文受版权保护】【转载请注明来源】

2018-10-02 4765 React, Redux, vue, 响应式

唐霜

一场无声的军备竞赛：js响应式编程

抽象化

驱动模式

响应式编程

响应式的分流

事件响应

数据响应

事件流响应

ReactiveX is a combination of the best ideas from
the Observer pattern, the Iterator pattern, and functional programming。

数据流响应

小结

为价值买单，打赏一杯咖啡

声明

关于

生态

唐霜

一场无声的军备竞赛：js响应式编程

抽象化

驱动模式

响应式编程

响应式的分流

事件响应

数据响应

事件流响应

ReactiveX is a combination of the best ideas from the Observer pattern, the Iterator pattern, and functional programming。

数据流响应

小结

为价值买单，打赏一杯咖啡

声明

关于

生态

ReactiveX is a combination of the best ideas from
the Observer pattern, the Iterator pattern, and functional programming。