Full Stack Reactivity



Full Stack Reactivity


这个是叫全栈随动,或者从动。就是由于我的数据的改动,会让别的数据进行改动的。比如如果我们不是用meteor的话,这个的改动其实也是蛮麻烦的。


0.png


因为你需要响应一个event,就是比如你对这个做加或者减的时候,你要考虑到它会对页面有什么影响?


1.png


首选,要在这个文字上打个×,然后让后面的删除按钮出现。


2.png


同时,你还要考虑到,这儿还有一个计数器呢!你得把它也加一个或者减一个。必须得做,否则的话这就不一致了。


3.png


这里页面还很简单。如果很复杂,软件工程师必须得想明白,这里和谁有关?它又会影响到啥?


4.png


加入有更复杂的逻辑,这里小于0的时候,就变成红颜色的;或者出现警告提示。这些逻辑是十分复杂的,软件工程师在做这些的时候可能会出错。


5.png


所以后来才有了什么MVC,包括后来很流行的angular,它们的出现就是帮助程序猿来把所有的东西能够进行比较聪明的处理。那这里面最聪明的其实就是meteor了。meteor聪明到什么程度呢?Full Stack Reactivity。就是所有的文字都是变的东西。


6.png


也就是说,当你一个东西被改变。比如这个东西被改变的时候。 


7.png


我不需要自己去考虑它会影响到谁?我只要在定义这个数字的时候,把它定义成跟谁有关就可以了。


8.png


这个结果就是,比如这个依赖于总数的count的话,我们在定义这个数字1的时候,就说它等于这个的count。


9.png


这个定义完之后就完事了,我就不需要管了。那么一旦,你这个的增增减减都会改变count的数量。数据库一变,它这个count就一定会变。


90.png


等着变的时候,meteor会自动调一个function,这个function的结果就是重新计算rerun这个数字该是什么。我们以这个为例子,当我减一个这个的时候,数据库也会因为我前端而减。


91.png


然后DDP告诉数据库,我这个减掉了。然后呢!数据库会说,我数据库改了,那么谁会受我的影响呢!一看这里有一个定义好的。


92.png


所以这个count,是我这些document的总数,有多少个。所以呢!如果它发现我rerun了谁,它会把它重新recount一遍,得到的数字再送回来。所以这种做法,使得开发人员的负担变轻了。不用管是多少,我只需要把逻辑写出来,这个就是它的count,就完事了。


一旦这个count有变化的时候,这个数字会自动变化,我们不用去管它,而且这个是端到端的。


93.png


什么意思呢?从前端的任何一个界面上的元素(我们把这个叫做Element)。比如这个就是一个Element:


94.png


从这个Element一直到内存里面对应的object(就是count这个object),一直到DDP那一端,server这一端的数据库里面的某一个document里面的某一个filed。


95.png


里面任何一个有变化,比如这个filed有改变的时候,比如被别人改变的时候,这个数据会沿着这个DDP一直被送到前端来,把这个给改动。我们现在可以演示一下这个东西。这个所谓的端到端是怎么实现的?首先,打开两个浏览器,访问同一个数据库。


96.png


注意看,我在一个浏览器里面操作,另外一个浏览器里面就自动跟着就变了。


97.png


当然了,如果我左边切换到另外一个页面,右边是没有影响的,因为它们的subscript没什么关系。


98.png


但是要注意到,我这里右边一改动,左边的对应页面的数字也在改变。


99.png


也就是说,你不管把它放在哪儿,它都是随动的,没有代码去写这个东西。如果你把右边的页面也切换到和左边的一样来,它们的操作又会变得一致了。


990.png


比如我们在这里添加一个,看看两边能不能同步更新。


991.png


看添加也是同步添加的。


992.png


这个是什么样的一个过程呢?如果我把这个放慢动作,我加一个或者改一个东西的时候。


993.png


实际上我是在右边的这个浏览器的数据库里面加一条记录。
然后,右边的这个浏览器增加了记录之后,它会通知我们的server端。告诉说,“我” 增加了一个记录;然后server一看,允许你加。好了,然后server在server端的mongoDB里面也把这条记录给加上了。然后,由于我这个2号浏览器,因为也订阅了同样的language。所以呢!这个数据的改变也会通过DDP送给我这个2号浏览器。


994.png


2号浏览器不是也有一个mini mongo吗?


995.png


冲着“它”说,“我”这儿加了一条记录。然后呢!因为我们是Full Stack Reactivity。这个list就相当于表里面的每一条记录。


996.png


然后这个count 9 就相当于这个记录的总和。


997.png


一旦这个数据库改动了以后,这个数据库,meteor会控制,自动去重新计算这个list和这个count。于是,这个coffeescript也加上了,这个count也得到改变了。


998.png


而且这个还是realtime的,为什么是realtime的?刚才我们讲过,因为它有一个socket连接。是双向实时的。如果不是这样的话,这个东西也做不到。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 葡京国际首页 www.ybxiongdi.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

秋招大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部