在工作中，不同开发者思维方式不同，低级开【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net发者需要等到设计稿完成之后，才能启动开发【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。，中级开发者会根据交互稿利用系统风格就可【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。以启动开发，而高级开发者，从参与需求讨论本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】开始，就可以开始启动开发了。是什么让开发【转载请注明来源】【本文受版权保护】者无需在视图界面的引导下，就可以完成部分【转载请注明来源】本文版权归作者所有，未经授权不得转载。编程呢？模型！

模型化描述系统【原创内容，转载请注明出处】

模型，是现实客观事物的抽象和表示。一类事本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。物，所拥有的共性，经过抽象后以代码的形式【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】进行描述，就是模型。以模型的方式描述一类【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。事物形成的体系，就是模型化描述系统。在描著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net述事物过程中，我们往往需要在模型中提供事【本文受版权保护】【作者：唐霜】物共性的各个因子，因子的自身特性，以及因本文版权归作者所有，未经授权不得转载。【作者：唐霜】子与因子之间的联系。

在前端语境中，我们很少讲模型，因此，我们本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】只能从能看到的界面开始编程。缺乏对业务对本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net象的抽象能力，导致前端工作者在具体业务中著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，“只是一个画界面的”，而不能参与到真正【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net的业务推动中，而很多前端工作者也认为，这【未经授权禁止转载】【本文首发于唐霜的博客】个部分是后端人员的工作，导致工作中对业务【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。一知半解，bug层出。

构建前端业务对象模型，不需要特别复杂的设【版权所有，侵权必究】【版权所有，侵权必究】计，用class就可以构建了，例如：

class GoodNameMeta extends Meta {
  default = ''
  type = String
  maxLength = 50
}

class GoodPriceMeta extends Meta {
  default = 0
  type = Number
  min = 0
}

class GoodModel extends Model {
  static name = GoodNameMeta
  static price = GoodPriceMeta

  increasePrice(inc) {
    this.price += inc
  }
}

在这个代码中我们定义了一个商品的模型，拥【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】有 name, price 两个字段，在著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。前面，这两个字段的具体规则也通过 Met【未经授权禁止转载】【版权所有，侵权必究】a 进行了定义。

在模型中，有时候会打破字段与字段的边界。【原创不易，请尊重版权】原创内容，盗版必究。例如，a 字段对 b 字段有依赖，当 b【作者：唐霜】【版权所有】唐霜 www.tangshuang.net 字段的值发生变化时，a 字段也应该发生【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】响应的变化。这种逻辑应该在哪里定义呢？看【本文首发于唐霜的博客】【本文受版权保护】上去，我们应该在模型块内进行某种逻辑设计未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。，为了自动完成这个联动效果，还需要做一些【未经授权禁止转载】未经授权，禁止复制转载。联动设计。但是，如果讲关于 a 字段的逻【原创内容，转载请注明出处】【未经授权禁止转载】辑，从 a 字段的定义集合中脱离出来，那本文作者：唐霜，转载请注明出处。【作者：唐霜】么，单纯阅读 a 字段的 meta，就无【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】法真正阅读出它的全貌。因此，在模型设计时著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，我们以模型因子为单元，进行最基础的编程【版权所有，侵权必究】【作者：唐霜】设计。

无视图交互模型【原创不易，请尊重版权】

我们面对设计稿，可以做视图层编程。但是，【原创内容，转载请注明出处】原创内容，盗版必究。在大部分设计稿中，并不能动态的描述用户交【转载请注明来源】【关注微信公众号：wwwtangshuangnet】互的效果。也就是说，设计稿也不是万能的，本文版权归作者所有，未经授权不得转载。【转载请注明来源】还要结合交互稿才能明白具体某些细节的全部【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。面貌。但是，有的时候更坑，设计稿交互稿都【转载请注明来源】【转载请注明来源】没有反应某些细节全貌，必须阅读需求文档才【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。能复原其全貌。我们怎么应对这种情况，或者未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。说，我们怎么在即使没有视觉稿的情况下，也【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。可以完成部分编程？

通过对需求文档中的具体描述，进行模型化描转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net述，从而完成在无视图的情况下的代码构建。转载请注明出处：www.tangshuang.net【作者：唐霜】比如，需求文档中提到，“点击该按钮时，该未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。商品被加入到购物车中”这样一句话。那么，未经授权，禁止复制转载。【原创内容，转载请注明出处】我们怎么把这个需求点实现为代码呢？

class GoodDetailController extends Controller {
  static good = GoodModel
  shoppingCart = ShoppingCart.get()

  ShoppingCartButton(props) {
    return [
      'button',
      {
        onClick: () => this.shoppingCart.addGood(this.good)
      },
    ]
  }
}

在这个模型中，包含了“商品”“购物车”“【原创不易，请尊重版权】原创内容，盗版必究。按钮”三个因子，其中购物车是全局实例，通原创内容，盗版必究。【本文受版权保护】过 get() 获取。在这段描述中，没有本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net视图层面的编程，但是，我们完成了对需求文转载请注明出处：www.tangshuang.net【作者：唐霜】案的描述，并且开发者也很容易读懂。

在 ShoppingCartButton【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net 中，我返回了一个可被 React.cr转载请注明出处：www.tangshuang.net原创内容，盗版必究。eateElement 使用的数组，用以本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net表示该描述的实际逻辑。也就是说，在无视图【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】交互模型中，并非完全不考虑视图层，而是暂【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。时不考虑视图层的布局、样式、动效等，只对原创内容，盗版必究。原创内容，盗版必究。交互对象的交互效果产生的业务逻辑（而非交【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】互逻辑）进行描述。另外，交互模型的功用是【转载请注明来源】本文版权归作者所有，未经授权不得转载。为视图层提供封装好的交互逻辑，因此，它本原创内容，盗版必究。【版权所有，侵权必究】身应该具备响应式能力，当其所持有的状态发转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。生变化时，自动更新视图，而视图更多是对状原创内容，盗版必究。未经授权，禁止复制转载。态的反应和用户输入事件的反应。

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

“视图是对状态的表示”，是当代前端的一个【作者：唐霜】转载请注明出处：www.tangshuang.net重要范式，也就是公式“UI=f(stat本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。e)”。这个范式影响了我们前端开发的大部著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】分场景。但是在这个公式中，存在缺陷，UI【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 只受控于 state，当 state 【原创内容，转载请注明出处】未经授权，禁止复制转载。发生变化时，UI 也随之变化。问题在于，本文版权归作者所有，未经授权不得转载。【作者：唐霜】state 为什么会发生变化？在前端语境【转载请注明来源】著作权归作者所有，禁止商业用途转载。下，引起 state 变化的大部分原因，原创内容，盗版必究。转载请注明出处：www.tangshuang.net是用户的交互行为，也就是点击、输入等事件【关注微信公众号：wwwtangshuangnet】【本文受版权保护】。大部分情况下，开发者认为事件一定是来自本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】 UI 的，这是一种误解。实际上，事件本本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。身并不是 UI 的一部分，只是，在前端场【本文首发于唐霜的博客】原创内容，盗版必究。景下，我们应用的入口都是界面，所以用户的未经授权，禁止复制转载。【原创不易，请尊重版权】操作，也基本上是在界面上完成。除了用户在【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】界面上的操作事件外，由定时任务、webs【本文受版权保护】【版权所有，侵权必究】ocket等系统预设产生的事件，也会带来【未经授权禁止转载】原创内容，盗版必究。 state 的变化，因此，可以将公式进【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】行展开，即“UI=f(Event)(st【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netate)”，其中 f(Event) 是对【本文受版权保护】【版权所有】唐霜 www.tangshuang.net事件的编程过程，而 f(Event) 才著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net组成了上面 f(state) 中的 f，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。即对 state 进行操作的处理逻辑，在【版权所有，侵权必究】【本文首发于唐霜的博客】 react 环境中，我们可以认为 f=【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。react，也就是“UI=react(E转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。vent)(state)”。用户交互事件本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】虽然是在界面上产生，但是 UI 仅仅只是著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】提供了一个窗口，事件并非 UI 的一部分本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，也就是说，理论上，UI 编程不应该包含未经授权，禁止复制转载。【本文首发于唐霜的博客】事件相关的编程。

那么，我究竟应该怎么看到“事件”这个东西【原创内容，转载请注明出处】【版权所有，侵权必究】？

RxJS 是我一直喜欢的一种事件编程的方本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】式。通过事件流的形式，我们将事件处理独立原创内容，盗版必究。【未经授权禁止转载】出来，不再像以前一样，依附或混杂在 UI本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】 编程中。当然，除了 rxjs 之外，还【本文首发于唐霜的博客】【转载请注明来源】有其他方式管理事件到 state 的这个未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。过程，比如 xstate。但是，在我这里【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】，通过 rxjs 提供的这套编程思维，可原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。以帮助我解决很多问题。通过对“事件”本身【转载请注明来源】【本文受版权保护】进行抽象，你会发现，我们口口声声说的“事【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。件”，其实包含了多个过程：事件触发-&g【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nett;事件处理->事件影响。在我们以【版权所有，侵权必究】原创内容，盗版必究。前的编程中，我们基本上用一个事件监听的回【未经授权禁止转载】未经授权，禁止复制转载。调函数完成上述整个过程。但是，实际上这些著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】过程是可以拆解的，经过拆解后，事件本身的转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】编程就成为一套独立体系，和 UI 编程完【未经授权禁止转载】本文作者：唐霜，转载请注明出处。全分开来，再结合上一节无视图交互模型，我【未经授权禁止转载】本文作者：唐霜，转载请注明出处。们会发现，我们不再需要再在 UI 编程中【本文受版权保护】本文作者：唐霜，转载请注明出处。处理和业务相关的事件逻辑（和交互相关的事【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。件逻辑还是需要处理，比如需要处理渐隐渐显本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。效果、拖拽效果、移动效果等）

class GoodDetailController extends Controller {
  static good = GoodModel
  shoppingCart = ShoppingCart.get()

  static addToShoppingCart$(stream) {
    stream.pipe(take(4)).subscribe(() => {
      this.shoppingCart.addGood(this.good)
    })
  }

  ShoppingCartButton(props) {
    return [
      'button',
      {
        onHit: this.addToShoppingCart$,
      },
    ]
  }
}

注意看 this.addToShoppi【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ngCart$ 这个流，我直接将它绑定到【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。 onHit 上，当这个按钮被点击时，就【本文首发于唐霜的博客】【本文受版权保护】会触发这个流，那么就会走流的管道逻辑，最【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。后，再在它的 subscribe 中，对本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net当前交互模型上的状态进行修改，修改后，就原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】会通过内置的逻辑，触发视图的更新。通过 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】rxjs 的算子，可以实现形式非常复杂，本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。但是代码却很简单的事件流处理。我们可以自本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】己将计算过程进行拆解和抽离，通过算子的形【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。式，交给不同的 stream 去处理。我【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】在实现时，用 rxjs 的 Subjec【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.nett 实现，所以，stream 之间的串联【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。也很方便，例如 a$.subscribe本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】(b$)，这样就可以让事件触发脱离原始的【作者：唐霜】【原创内容，转载请注明出处】 UI，通过事件串联另外一个事件，让事件著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。触发也可被复用。例如：

class GoodDetailController extends Controller {
  static update$() { ... }
  static start$(stream) {
    stream.pipe(...).subscribe(...)
    stream.subscribe(this.update$) // 当 start$ 被触发时，update$ 也会被触发
  }
}

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

我在 2019 年初的时候，在内部分享中原创内容，盗版必究。【本文首发于唐霜的博客】梳理了前端框架的发展，当时，我认为对事件本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net的缺失是当代框架的一个缺陷，下一阶段的框【本文受版权保护】转载请注明出处：www.tangshuang.net架会补足这一部分，认为类似 cycle.【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】js 这样的框架会火。但是当时我忽视了一本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】点，即前端开发的窗入口一定是视图层，一切【作者：唐霜】未经授权，禁止复制转载。不从视图层出发的框架，都会碰一鼻子灰，除【版权所有】唐霜 www.tangshuang.net【本文受版权保护】非这个框架不以创建界面为目标。但是我用了著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net很久的事件，都没有找到一个方法，将事件这【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】个逻辑从 UI 编程中抽离出来，直到今年【本文受版权保护】转载请注明出处：www.tangshuang.net，才终于解决这个问题，弥补了当初对整个前【本文首发于唐霜的博客】未经授权，禁止复制转载。端框架编程的勾勒。

在实际编程中，我并不确定这种真正符合 M本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netVC 的编程方式是否会被接受，因为在前端【作者：唐霜】【原创内容，转载请注明出处】中，不同层次的开发者接受不同方式的程度也【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】是不同的，如果可以直接通过 V 层编程完本文作者：唐霜，转载请注明出处。【本文受版权保护】成，有些人是永远不会用 MVC 的。但是【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】，我相信，在适合的场景条件下，真正的 M【转载请注明来源】【关注微信公众号：wwwtangshuangnet】VC，将会对项目长期维护带来非常大的裨益【版权所有，侵权必究】【本文受版权保护】。

2021-01-02 3580 MVC, React, 前端框架