Databaxe：基于observer思想的数据（源）管理器-唐霜

datamanager.js是我自己认为著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】最近两年写出的最出色的库，虽然源码本身有本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】些乱，而且写在一个文件里面，行数也不多，【作者：唐霜】【未经授权禁止转载】很多传参也没有类型验证，但是，它的思想，【转载请注明来源】【本文受版权保护】以及我能完整的把这套思想用代码表达出来，【作者：唐霜】【版权所有】唐霜 www.tangshuang.net都是非常让我兴奋的事。我甚至认为，它是最原创内容，盗版必究。【转载请注明来源】新范式的数据管理方式。（这里说的数据，是【本文首发于唐霜的博客】未经授权，禁止复制转载。指从服务器请求获取的数据。）为什么这么说【本文首发于唐霜的博客】【原创内容，转载请注明出处】，我下面会慢慢解释。不管怎样，你可以提前【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】阅读我在写完代码前写的这篇文章《设计一个基于observer思想的数据管【本文首发于唐霜的博客】【版权所有，侵权必究】理器》。而且建议你在它的git仓库克隆它下来【版权所有，侵权必究】原创内容，盗版必究。，跑一下它的例子。如果你以前在工作中遇到本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net过某些情况，你会惊讶于它的解决方式。

数据源转载请注明出处：www.tangshuang.net

我们传统的数据请求也分了几种层次，最低的【本文受版权保护】未经授权，禁止复制转载。莫过于在业务代码流中，想要用数据的地方，转载请注明出处：www.tangshuang.net【未经授权禁止转载】就用一个xhr请求去请求数据，包括用jq【原创内容，转载请注明出处】【本文首发于唐霜的博客】uery的$.ajax去请求。稍微高级一【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】点的，会把所有的数据请求封装在一个目录下【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。，在业务代码中只是调用某个非常简单的函数著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net，就可以完成请求。而flux思想下，把数原创内容，盗版必究。未经授权，禁止复制转载。据和状态（state）混在一起，因为界面【作者：唐霜】【作者：唐霜】是通过state的变化而变化的，因此，要转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。使得界面展示请求回来的数据，就必须通过把【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】数据赋值给state，使得state发生【未经授权禁止转载】【原创内容，转载请注明出处】变化，从而使得界面跟着变化。这一过程使得【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】在flux框架下的应用写数据请求到业务逻【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net辑之间的跨度非常大，代码结构非常不好理解【本文首发于唐霜的博客】【原创内容，转载请注明出处】，如果是新手，只能望而生畏。

有没有一种可能，我们完全忽略“请求”这个【原创不易，请尊重版权】未经授权，禁止复制转载。动作，而是定义一大堆数据源，这个源里面提【作者：唐霜】【转载请注明来源】供数据的api接口，要传的参数，请求的方【转载请注明来源】本文作者：唐霜，转载请注明出处。式，至于请求的过程，交给一个黑盒子完成，【转载请注明来源】转载请注明出处：www.tangshuang.net这样，我就不用在关心我到底要在自己的项目【本文首发于唐霜的博客】未经授权，禁止复制转载。里面，怎么写请求，怎么在不同代码之间实现本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。桥梁，实现数据到界面的转换。

本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】

基于上面这个想法，我试着写了一些自己工作【转载请注明来源】转载请注明出处：www.tangshuang.net中可能出现的数据源形式：

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

// 从api得到一个数据
{
  url: 'http://api.xxx.com/source',
}

// 某些情况下，要拿到一组数据，必须通过post方法
{
  url: 'http://api.xxx.com/source2',
  method: 'post',
  postData: {
    yearRange: '2010-2017',
    queryIds: [ ... ],
  },
}

// 某些情况下，拿到一组数据之后，我希望在得到这组数据之前，对原始数据进行一些结构处理
{
  url: '...',
  transform(data) {
    return data.map(item => item.log_text = item.name + item.share)
  },
}

总之，我希望我不需要去写具体怎么请求，而【作者：唐霜】【原创内容，转载请注明出处】是定义了一大堆data source，每【本文首发于唐霜的博客】原创内容，盗版必究。一个source里面包含了拿到这组数据的本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】必要信息，然后，我把这个source传给【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。某个容器，这个容器自己去处理数据请求。而著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。我从这个容器得到的数据，就是我最终想要的原创内容，盗版必究。【本文受版权保护】数据，我根本不在乎这些数据是怎么得到的，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net我只在乎我最后拿到的数据是不是我想要的。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

数据仓库【作者：唐霜】

上面说的容器，我更愿意用“仓库”来形容。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。之所以选择“仓库”这个词，是因为它有存储【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net能力，它不是一个蓄水池，水只是从它过一下【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。就走了，它具有存储物品超过一个月甚至一年【转载请注明来源】【转载请注明来源】的能力，你需要的时候你就找它要，它就像哆【未经授权禁止转载】【原创不易，请尊重版权】啦A梦的口袋一样，你问它要数据的时候，数【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net据就在那里。

“仓库”还有一个特点，就是它里面的物品经【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。过详细的类目整理，使得物品的存储和空间利【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net用非常高效，你不用担心同一份数据在它里面【版权所有】唐霜 www.tangshuang.net【作者：唐霜】产生多个拷贝，从而消耗空间，你也不用担心【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net当你需要一个数据，而它实际上已经有了这个【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net数据的情况下，它还会花更多时间去服务端取原创内容，盗版必究。【本文首发于唐霜的博客】，它会智能的分析你向它发出的数据需求，并【原创不易，请尊重版权】【作者：唐霜】快速找到已经有的数据，直接返回给你。这事原创内容，盗版必究。转载请注明出处：www.tangshuang.net情看上去好像挺奇怪的，这种事好像发生的概本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。率特别低。但是，你想一下这样的情况，te【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netamA和teamB开发了两个不同的组件，原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net它们各自在组件A和组件B里面实现了自己的本文版权归作者所有，未经授权不得转载。【作者：唐霜】数据管理，但不巧的是，它们都对同一组数据【原创不易，请尊重版权】【作者：唐霜】有依赖，比如地区列表那种，它们虽然不自己【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。发请求，但是每次它们被加载的时候，它们都著作权归作者所有，禁止商业用途转载。【作者：唐霜】会通知application层面的框架，【原创内容，转载请注明出处】【版权所有，侵权必究】让框架的数据管理去请求一下，于是同一个数本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net据源，被毫无必要的访问了两次。

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

乍一看，这种问题，用缓存不就好了么？然而本文作者：唐霜，转载请注明出处。【本文受版权保护】，它们的思维逻辑完全不同。缓存是在请求过【版权所有，侵权必究】【本文受版权保护】程中的逻辑，而仓库是没有这个逻辑。仓库在【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。面对开发者这一端，你感觉不出它干了任何事著作权归作者所有，禁止商业用途转载。【转载请注明来源】情，你随心所欲的向它要数据，而它每次都一【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】五一十的把数据给你，你都不知道它的数据是【转载请注明来源】原创内容，盗版必究。从哪里来的，你只记得你把数据源告诉了它，【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。你心想，它大概在内部自己按照数据源里面提【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】供的信息已经早就把数据请求回来存起来了。【未经授权禁止转载】【作者：唐霜】没错，你看出了关键，你从仓库里面去数据是本文版权归作者所有，未经授权不得转载。【转载请注明来源】同步的，而传统的请求，是异步的。

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

我当时就是这样想的：【原创不易，请尊重版权】

var a = datamanager.get('a') // 得到一个数据
// 过了很久
var a = datamanager.get('a') // 得到一个新数据，可能是老数据过期了，所以datamanager跑去拿了新数据回来

但是，对于我而言，我只管用get这个方法著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。，我虽然不知道最后得到的是不是一个和前一【原创内容，转载请注明出处】【原创不易，请尊重版权】次相同的数据，但是，我可以保证我每次都得未经授权，禁止复制转载。未经授权，禁止复制转载。到了一个合法的数据，我不在乎浏览器端的数原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】据是否和服务器端的数据在同一时刻是一致的【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。，但我在乎用户每一次打开页面的时候，都可【作者：唐霜】未经授权，禁止复制转载。能极快的得到想要的结果。

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】原创内容，盗版必究。

当获取数据变成一种直接操作时，无论在执行【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。效率上，还是使用灵巧性上，都和现在所有的【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】前端数据请求、管理方式不同，它是一种激进的前卫的数据管理方式本文作者：唐霜，转载请注明出处。。因此，在某些细节上，甚至结果上，它都可未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。能被人不理解，甚至遭受诟病，但无论如何，著作权归作者所有，禁止商业用途转载。【作者：唐霜】一旦你开始接受这种方式，并且将它用到多团未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net队分离式开发中，特别是我以前公司那种，组【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】件团队之间，将会是一种新体验。

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

上面给出了一个例子，可以看出得到数据a是【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】多么的方便。然而，有一种情况不可避免，就【本文受版权保护】【原创不易，请尊重版权】是当a这个数据还没有被从服务器下载下来存本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net储在仓库中时，你就开始去使用它。这种情况本文作者：唐霜，转载请注明出处。【本文受版权保护】，在vue、react开发种随处可见。当转载请注明出处：www.tangshuang.net【转载请注明来源】一个组件实例化的时候，由于没有数据，所以【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net界面上不会渲染出任何东西，为了不让用户感原创内容，盗版必究。转载请注明出处：www.tangshuang.net到困惑，往往我们会用一个条件分支，将没有【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。数据时候的状况，展示为一个loading【原创不易，请尊重版权】【本文受版权保护】效果的界面。同样的道理，在dataman【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netager思想下去思考，如果数据还没有被下转载请注明出处：www.tangshuang.net原创内容，盗版必究。载到datamanager里面，那不是要【原创内容，转载请注明出处】未经授权，禁止复制转载。面临同样的效果吗？是的。而且就目前的情况【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。而言，这也是无法办到的。

但是有另外一件事我们可以做，就是我们可以【转载请注明来源】【作者：唐霜】防止页面上同时对同一个数据源发起两次请求著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】。这看上去是一个小问题，但是当你在两个不【版权所有】唐霜 www.tangshuang.net【本文受版权保护】同的team开发，而你们开发出来的东西被【原创不易，请尊重版权】【转载请注明来源】用到一个application里面的时候转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，这个时候情况就不同了。对于一个team著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。开发的产品，必然要求自己产品功能的完整性【本文受版权保护】转载请注明出处：www.tangshuang.net和可复用性，因此，当两个team开发的产转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。品同时请求了一个源时，无论你是哪一方，都【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。不得不在自己的产品体系内发送一个请求，这原创内容，盗版必究。【作者：唐霜】就导致了重复的请求发生。

我们回到前面所讲的，在datamanag【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】er的思想里，开发者不需要考虑“请求”这【本文受版权保护】【关注微信公众号：wwwtangshuangnet】个问题，他们都是get, get, ge【原创内容，转载请注明出处】【原创内容，转载请注明出处】t，而不需要做任何请求相关的事情，因此，未经授权，禁止复制转载。【作者：唐霜】上述的问题在这种情况下根本不存在，只要保【本文首发于唐霜的博客】【本文首发于唐霜的博客】证两个team都使用了datamanag【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.neter的数据管理模式，那么他们只需要get【版权所有】唐霜 www.tangshuang.net【转载请注明来源】, get, get。

响应式设计转载请注明出处：www.tangshuang.net

原创内容，盗版必究。【本文首发于唐霜的博客】【本文受版权保护】著作权归作者所有，禁止商业用途转载。

响应式设计是现代web应用的基础模式，一【本文受版权保护】未经授权，禁止复制转载。个web应用，不能做到在数据或状态变化的【原创内容，转载请注明出处】【原创不易，请尊重版权】情况下自动更新界面，那么它就算不上现代。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net我们继续回到上面两个team在完全不知道【原创内容，转载请注明出处】未经授权，禁止复制转载。对方的情况下进行开发的情况。假如，这两个原创内容，盗版必究。未经授权，禁止复制转载。team开发的产品，需要同一个数据源，那【未经授权禁止转载】原创内容，盗版必究。么，当这个数据源给出的数据发生更新时，这【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。两个产品的界面都应该同时更新（除非处于编未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net辑状态）。但是作为两个独立的产品，怎么可转载请注明出处：www.tangshuang.net【版权所有，侵权必究】能会预测到这一点呢？只要有dataman本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ager作为桥梁即可。那你可能会觉得，这【未经授权禁止转载】【未经授权禁止转载】岂不是是的独立产品耦合度很高。恰恰相反，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。datamanager就是为了解耦。就像本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net你在不同的项目里面使用lodash一样，原创内容，盗版必究。【作者：唐霜】使用datamanager也是只把它当作未经授权，禁止复制转载。【作者：唐霜】一个依赖库，然后使用它的api，你完全不【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net用去想还有另外一个team存在这件事。

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

另外一种响应可能更细节一些。当一个量依赖【作者：唐霜】原创内容，盗版必究。于另外一个量，比如 a = b + 1，未经授权，禁止复制转载。【原创内容，转载请注明出处】有什么办法可以在b发生变化时，a也自动发转载请注明出处：www.tangshuang.net原创内容，盗版必究。生变化：

【原创内容，转载请注明出处】【未经授权禁止转载】【转载请注明来源】原创内容，盗版必究。原创内容，盗版必究。

a = b + 1
b = 1
a // 2
b = 2 // b发生变化
a // 3 自动变化

这个技术叫依赖注入，其实质是在b发生变化【转载请注明来源】【关注微信公众号：wwwtangshuangnet】时，b内部隐藏了一种方法，可以去修改a。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。那它有什么用？vue就是在用它。当一个变【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。量依赖于另外一个变量时，它的值会随着被依转载请注明出处：www.tangshuang.net【版权所有，侵权必究】赖的变量值的变化而变化，根本不需要自己再未经授权，禁止复制转载。【原创不易，请尊重版权】去运行一遍求值过程。这在视觉上给人非常牛本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。逼的感觉。不过它也不是什么神秘技术，很容【本文受版权保护】【原创不易，请尊重版权】易分解。

【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

这在datamanager里面也可以很好【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。使用起来，当a = dm.get(转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】216;b’)时，一旦b发生【本文首发于唐霜的博客】【版权所有，侵权必究】变化，a也自动改变，而如果界面依赖于a，本文版权归作者所有，未经授权不得转载。【本文受版权保护】那么就可以触发某种机制去更新界面。

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

安装和使用未经授权，禁止复制转载。

【转载请注明来源】原创内容，盗版必究。转载请注明出处：www.tangshuang.net

非常简单，就像一个普通的npm包一样，你【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】只需要一条命令就可以安装datamana【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netger了：

npm install --save datamanager.js

安装好之后，你就可以使用它。datama转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netnager是一个类，使用时，实例化，得到转载请注明出处：www.tangshuang.net【本文受版权保护】一个实例，这个实例会附赠很多接口方法，这【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】些方法可以操作（主要是获取）数据。

import DataManager from 'datamanager.js'
let dm = new DataManager(options)
function render() {
  let data = dm.get(dataSourceId)
  if (data === undefined) {
    return
  }
  // 用data干点什么
}
dm.autorun(render)

这些在【本文受版权保护】github转载请注明出处：www.tangshuang.net上都有非常详细的介绍，这里就不再赘述，本未经授权，禁止复制转载。【原创内容，转载请注明出处】文主要是对一些概念做介绍，防止开发者不理【作者：唐霜】转载请注明出处：www.tangshuang.net解而乱用。

【本文受版权保护】著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】

再强调一下【转载请注明来源】

datamanager里面也没有什么新概【作者：唐霜】【原创不易，请尊重版权】念，只不过有些点如果不加以解释，会导致使本文作者：唐霜，转载请注明出处。原创内容，盗版必究。用者理解错误而带来bug。

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

没有请求数据的概念【本文受版权保护】

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

虽然datamanager提供了requ本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netest方法，但是不推荐使用，这个方法是为【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。了方便初学者过渡而提供了。正确的姿势是使未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】用get方法。把datamanager当【未经授权禁止转载】本文作者：唐霜，转载请注明出处。做一个数据管理仓库，每一格存放着一个数据未经授权，禁止复制转载。【原创不易，请尊重版权】源的所有信息，当然也包括了最终需要的数据本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。。注册一个数据源(datasource)转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】就是开辟一格，这一格里面有后端服务器的u转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。rl信息、一些初始化信息。当你调用get【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】方法时，datamanager会根据你传【本文首发于唐霜的博客】【版权所有，侵权必究】入的id确定从哪一个拿数据给你。你可以想【原创不易，请尊重版权】未经授权，禁止复制转载。象在get这个过程里面，datamana【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。ger从仓库中找到一格，取出数据直接返回原创内容，盗版必究。原创内容，盗版必究。给你，当数据不存在时，会返回undefi【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ned。

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

至于datamanager如何从后端ap【转载请注明来源】【原创内容，转载请注明出处】i接口去拿数据的，这对于开发者而已，可以【转载请注明来源】著作权归作者所有，禁止商业用途转载。不用了解，除非你对原理比较感兴趣，想自己转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】研究。

没有订阅的概念【版权所有】唐霜 www.tangshuang.net

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

这个非常重要，订阅是开发者自己写的代码里本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net面，通过subscribe方法，传入一个【原创不易，请尊重版权】【版权所有，侵权必究】回调函数。这个回调函数，会在对应的dat【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。aSourceId的数据发生变化时执行。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。什么时候数据会发生变化呢？当然是data原创内容，盗版必究。转载请注明出处：www.tangshuang.netmanager通过内部机制，去后端api转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】取新数据，把仓库里面的老数据（或没有数据【未经授权禁止转载】原创内容，盗版必究。）替换掉之后。一般而言，你需要在回调函数【本文受版权保护】原创内容，盗版必究。中通过get方法再去获取新数据。不过为了本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。兼容过渡思想，回调函数的第一个参数我还是【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】传出了新的data。但是这个data不允【未经授权禁止转载】原创内容，盗版必究。许被修改，绝对不允许，它仅仅用来做一些判【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】断，而不应该作为数据使用（除非你自己深拷【原创不易，请尊重版权】【作者：唐霜】贝一份）。

但是！subscribe方法都不提倡使用本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。。更推荐的方法是直接使用autorun方著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】法。就像上文的示例代码一样，你没有看到s【本文受版权保护】本文版权归作者所有，未经授权不得转载。ubscribe方法，程序照样能够在数据转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。被更新时重新执行一遍render函数。因转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】此，要从“订阅-发布”的思维中跳出来。新本文作者：唐霜，转载请注明出处。【本文受版权保护】的思维叫“依赖收集”。

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

它分为两个部分：著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。【本文受版权保护】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

autorun函数：立即运行传入的函数A

【本文受版权保护】

未经授权，禁止复制转载。

【未经授权禁止转载】

在函数A中使用get方法【作者：唐霜】

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

【本文受版权保护】

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

转载请注明出处：www.tangshuang.net

get方法会收集所有需要的dataSou未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。rce，建立一个内部机制，当这些被依赖的本文版权归作者所有，未经授权不得转载。【本文受版权保护】dataSource的数据发生变动时，就【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。会重新执行函数A。这听上去很神奇，你没有【作者：唐霜】【原创内容，转载请注明出处】自己创建subscribe，它是怎么做到【原创不易，请尊重版权】【未经授权禁止转载】知道哪些dataSource是函数A依赖【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】的呢？这是一个比较大的问题，有兴趣可以去【作者：唐霜】【作者：唐霜】了解vue的计算属性，相信你对vue还是著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net比较感兴趣的。

【未经授权禁止转载】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】

此时此刻，你应该建立新的数据使用的思维：从datamanager里面直接获取数据【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net，通过一个函数来渲染界面，当数据源发生变【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。化时，函数会自动重新执行，从而界面也会发【版权所有，侵权必究】【本文首发于唐霜的博客】生变化。你不再需要设计一整套根据条件而改变界面本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net的逻辑了，代码会变的少不止一倍以上。在这【作者：唐霜】著作权归作者所有，禁止商业用途转载。里，你不考虑两个点：1.数据如何通过aj未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ax请求回来，2.数据请求回来之后如何触【原创不易，请尊重版权】【未经授权禁止转载】发界面更新。

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。未经授权，禁止复制转载。【原创不易，请尊重版权】

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

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

【本文受版权保护】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。原创内容，盗版必究。未经授权，禁止复制转载。

前文我提到过，如果你第一次打开某个界面，未经授权，禁止复制转载。【转载请注明来源】而此时datamanager里面的某个d本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netatasource还没有数据，那么get本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】方法会返回undefined。这是一种特本文作者：唐霜，转载请注明出处。【未经授权禁止转载】殊的状态，面对这种状态你不能简单跳过，而本文版权归作者所有，未经授权不得转载。【作者：唐霜】需要特殊逻辑进行处理，特殊逻辑就是，在r【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。ender函数中经过判断，直接retur本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】n打断程序：

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

let somedata = dm.get(someid)
if (somedata === undefined) {
  return
}

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

let data1 = dm.get(id1)
let data2 = dm.get(id2)
if (data1 === undefined || data2 === undefined) {
  return
}

但是，在没有经过判断之前，绝对不要尝试使原创内容，盗版必究。转载请注明出处：www.tangshuang.net用该数据进行某些操作，下面是错误代码示范著作权归作者所有，禁止商业用途转载。【转载请注明来源】：

// 错误代码示范
function getName() {
  return dm.get('name')
}
function getAge() {
  return dm.get('age')
}
function render() {
  let name = getName()
  let age = getAge()
  document.querySelector('#text').innerHTML = name + ':' + age
}
dm.autorun(render)

看上去没什么毛病，但是你会发现，第一次页【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】面打开的时候，name和age都是und著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】efined，会引起一些错误。你有两种选转载请注明出处：www.tangshuang.net【转载请注明来源】择，一种是在getName和getAge转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net这两个函数里面直接写上面的if【转载请注明来源】逻辑，另一种是在render函数中写if本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net逻辑，第一种是推荐的方法，因为某些情况下【未经授权禁止转载】本文作者：唐霜，转载请注明出处。，getName不会像这里这样简单，可能转载请注明出处：www.tangshuang.net【作者：唐霜】在get操作之后还有后续动作。所以，在每本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net一次执行dm.get()之后做逻辑判定是【版权所有，侵权必究】【原创内容，转载请注明出处】最合理的。

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

总结【转载请注明来源】

datamanager给了前端一种新的写【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】作思路，就是把数据请求完全抽离开开发，假转载请注明出处：www.tangshuang.net【版权所有，侵权必究】定数据已经存在直接写作。从某种角度讲，这【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net种思路是一种将异步操作改为同步操作的方法【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】。

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

2018-01-07 5854

唐霜

Databaxe：基于observer思想的数据（源）管理器