从大约两年前开始写 nautil，从一开转载请注明出处：www.tangshuang.net【未经授权禁止转载】始主要目标是创造一个跨平台开发的框架，现【本文受版权保护】【作者：唐霜】在来看，这个目标开始有所转变了。以前觉得【版权所有，侵权必究】【本文首发于唐霜的博客】跨平台开发是趋势，是一项重要工作，是亮点【作者：唐霜】原创内容，盗版必究。，但随着时间的推移，我越来越觉得，跨平台未经授权，禁止复制转载。原创内容，盗版必究。是一种技巧，而不是一种技术。在我长期以来【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】的开发中，我逐渐意识到，项目工程的可靠性原创内容，盗版必究。【本文受版权保护】是团队/个人开发的重中之重。如何让一个项【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】目的代码组织更加合理呢？特别是以 rea【未经授权禁止转载】【原创内容，转载请注明出处】ct 为基础的应用中，怎么去更好的组织码【未经授权禁止转载】【本文受版权保护】流（代码顺序和引用）？

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

代码写的多了以后，追求一种抽象的范式。所【本文受版权保护】转载请注明出处：www.tangshuang.net谓范式，是在方法范畴层面更广的风格。我发【转载请注明来源】本文版权归作者所有，未经授权不得转载。现在前端领域，react 和 angul【本文受版权保护】【本文受版权保护】ar 是两个极端，react 是只关注视【作者：唐霜】【关注微信公众号：wwwtangshuangnet】图更新，不断深入，寻找各种方式提升视图更本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】新性能，但是在工程性上完全放飞，性能代码原创内容，盗版必究。【本文首发于唐霜的博客】量全部由开发者自己去处理。而 angul转载请注明出处：www.tangshuang.net原创内容，盗版必究。ar 反过来，它根本不关注（或者说不是卖【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。点）视图更新问题，angular 沿用了原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。 angularjs 时代的脏检查思路，【本文首发于唐霜的博客】未经授权，禁止复制转载。只是做了优化，做到了没有 digest，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net只需要一次检查；而在工程性方面，angu【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】lar 想尽一切办法约束开发者，因此，a【本文首发于唐霜的博客】【本文首发于唐霜的博客】ngular 的语法多得多，所以学习曲线【转载请注明来源】【原创内容，转载请注明出处】比较漫长，但是我个人认为收益会很大，其中转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。，引入 typescript 以静态类型本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。语言的风格编写应用程序，会让应用更加健壮【本文受版权保护】【本文受版权保护】（但编程的灵活性降低，同时增加了类型编程【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。的麻烦/乐趣），引入 rxjs 让事件处【版权所有】唐霜 www.tangshuang.net【转载请注明来源】理从原始的 single push 模式【未经授权禁止转载】未经授权，禁止复制转载。升级为 multiple push 模式【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，增加了事件处理的灵活性；angular【作者：唐霜】【版权所有】唐霜 www.tangshuang.net 具有 module 和 service【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】 的概念，module 可以认为是一个业【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】务模块（和 react 中的 compo【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。nent 概念相似但不同），包含该模块的【关注微信公众号：wwwtangshuangnet】【转载请注明来源】所有信息，并通过工具进行解析构建；ser本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】vice 为模块提供处理能力，可以通过 【版权所有，侵权必究】【本文首发于唐霜的博客】angular 特殊的依赖注入完成比较魔本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】法的写法。

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

而在 react 的生态中，除了 nex【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】tjs 比较知名外，还没有比较成熟的工程【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】框架方案。而且 nextjs 走 ssr【本文首发于唐霜的博客】【版权所有，侵权必究】 路线，更像是以前的 php 换 nod本文版权归作者所有，未经授权不得转载。【本文受版权保护】ejs 来过一遍，而非纯前端（运行时）的【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。方案。于是，我想写一个框架来融合各种优秀【原创内容，转载请注明出处】原创内容，盗版必究。理念（大部分其实还是我自己的），提供一种著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。可靠的工程性框架的可能性。市面上其实也有原创内容，盗版必究。【原创内容，转载请注明出处】一些自称为 react 框架的方案，比如【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 dva，但是实际上大部分 react+本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netredux+react-router 的本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。项目，就可以称自己为框架，但是，这类框架本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】仍然停留在视图层编程的层面，没有上升为工【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。程性框架，没有提供真正的编程范式。而写 【转载请注明来源】转载请注明出处：www.tangshuang.netnautil 之初是为了实现跨端开发，但【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。是，随着慢慢深入开发，我发现 nautil 有可能成为真正的对标 an【作者：唐霜】【版权所有】唐霜 www.tangshuang.netgular 的 react 工程性框架。

【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net

首先，前端应用需要区分数据、界面和事件，【版权所有，侵权必究】【本文受版权保护】而类似 dva 之类的框架，你按照它的写【作者：唐霜】原创内容，盗版必究。法，永远只会写出把业务逻辑最终杂糅在视图【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。组件中。没有区分数据和界面，是前端项目目【原创内容，转载请注明出处】未经授权，禁止复制转载。前最大的问题。举一个简单的例子，在一段明【本文首发于唐霜的博客】【原创不易，请尊重版权】显只描述业务逻辑的代码块中，你很容易找到【转载请注明来源】【作者：唐霜】一两句用来处理界面的代码，比如打开一个弹著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。窗、颜色变化等。而 nautil 则首先【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。要求开发者有分层的概念在里面，从代码层面转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】看，就是有关业务的代码写在一个或多个文件【本文首发于唐霜的博客】【本文首发于唐霜的博客】中，有关界面的代码写在一个或多个文件中，【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】这两者绝对不会出现直接的联系，这也就是 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。MVC 中的 M 和 V，同时，需要有一本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net个东西将它们串联起来，也就是 C。在 n【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。autil 中编程，很像传统的 MVC 著作权归作者所有，禁止商业用途转载。【转载请注明来源】编程，需要写 .model.js, .c【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ontroller.js，看上去又回到了【版权所有，侵权必究】【作者：唐霜】 MVC 的老路，但是有一点，这里我们避【作者：唐霜】【本文首发于唐霜的博客】免了一些坑，我们不可能直接照搬后端的 M【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。VC 概念，后端的 C 才是请求的入口，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。而在前端 V 才是入口。所以在前端 mo本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】dule 中必须存在视图组建，但可以不存著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。在 controller 和 model本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net。

【本文首发于唐霜的博客】【本文受版权保护】【原创内容，转载请注明出处】

其次，关于事件，我认为是大部分前端容易忽【原创内容，转载请注明出处】【作者：唐霜】略的一个点，很多人认为事件就是事件，很简【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】单，没必要整那么复杂。但是在实际开发中，【未经授权禁止转载】【本文受版权保护】事件几乎串联了所有业务和交互，可以说，没著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。有事件处理就没有这个应用。但是大部分编程【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。，都只有事件回调函数，在 react 中转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net通过 on 开头的一些回调来获得 DOM【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。 的事件回调。但是，回调函数的方式比较钝转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。，当一个动作可能引发一连串非线性的反应的【本文首发于唐霜的博客】【作者：唐霜】时候，回调函数是不可能解决的。举个例子，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net比如我们有一个场景，当用户点击 A 时弹【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】出一个弹框，当点击 B 时需要先放大 B【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】 元素然后再相当于点击 A。这里点击 B【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】 就是一个会带来一连串非线性的反应的场景【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，在 jquery 时代，我们可以通过 【转载请注明来源】【本文受版权保护】trigger A 的 click 来达未经授权，禁止复制转载。【转载请注明来源】到这个目的，但是在 react 中，我们【作者：唐霜】【本文首发于唐霜的博客】无法做到这个效果。而在 nautil 中【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，我引入了 rxjs 来解决事件处理。普【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net通的回调函数是 single push 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。模式，只能处理单一线性的任务，而 rxj【作者：唐霜】著作权归作者所有，禁止商业用途转载。s 是 multiple push 模式【关注微信公众号：wwwtangshuangnet】【作者：唐霜】，可以处理多向离散任务，同时，由于 rx著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】js 的 Subject 既是观察者也是【版权所有，侵权必究】【未经授权禁止转载】被观察者，所以多个事件之间可以轻松串联起【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。来。在 v0.30 之前，我在 Comp【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】onent 中使用 on/off/emi本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】t 作为事件的处理工具，但是这种命名仍然【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】是传统的事件注册与回调的意味，因此，我改【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】为了 subscribe/unsubsc【原创内容，转载请注明出处】未经授权，禁止复制转载。ribe/dispatch，虽然只是名字【原创内容，转载请注明出处】【版权所有，侵权必究】的改变，但体现了事件流处理的理念的转变。

【未经授权禁止转载】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

最后，Controller 的发明也是非转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net常有意思。一个 controller 观本文作者：唐霜，转载请注明出处。原创内容，盗版必究。察模型，保管一些用于完成事件到数据交互的转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net组件，这些组件只完成交互（事件->【本文首发于唐霜的博客】未经授权，禁止复制转载。数据），而不完成布局和样式，所以细小碎片【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net化，但是却形成了另外一种模式：业务不仅包未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。含数据描述，还包含交互描述。通过 Mod【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netel+Controller，我们可以很好【作者：唐霜】转载请注明出处：www.tangshuang.net的还原需求文档中有关业务逻辑的描述（一般未经授权，禁止复制转载。【本文受版权保护】需求文档除了描述业务数据本身，还会描述用【转载请注明来源】【本文首发于唐霜的博客】户的某一个交互所带来的数据变化，而在这个【作者：唐霜】本文版权归作者所有，未经授权不得转载。描述中，往往还没有给出具体的界面效果）。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。所以，在我看来，一个 Controlle著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netr 其实是一个交互模型，这个交互模型的基转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。础，就是拥有基于 rxjs 的事件流管理未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】机制。基于这种思想，一个 module 【作者：唐霜】【未经授权禁止转载】除了视图组件和样式文件之外，其他的都是模【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】型（包括 Service 在内，因为它为【作者：唐霜】【本文首发于唐霜的博客】业务服务）。只有视图组件是为界面服务的，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net这就导致我们的开发方式与以往的 reac转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。t 开发方式具有极大的不同，这个不同非常【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net非常大！可以说，视图组件的编写，只占到整原创内容，盗版必究。原创内容，盗版必究。个应用的一小部分，而真正的大头应该是在 【本文受版权保护】本文作者：唐霜，转载请注明出处。Model+Controller 上，这【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。也符合我们对“业务系统的重点是这实现业务【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】”的朴素认知。

【本文受版权保护】【版权所有，侵权必究】

2021 年已经 5 月了，今年我做 R著作权归作者所有，禁止商业用途转载。【转载请注明来源】obust 的期数特别少，因为手上的工作未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】比较多，同时，我也逐渐发现，要完成一些具【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。有挑战的项目逻辑是比较困难的，不是有了想【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。法和行动，就能做到尽善尽美，特殊的场景实【本文受版权保护】【版权所有】唐霜 www.tangshuang.net在太多了，想要做一个完完全全通用化的功能著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】模块，几乎是不可能的，这也意味着，未来还著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。有很长的路要走，而且是不可替代的。

未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】