如何打造更稳健的前端业务模块代码组织形式？-唐霜

业务系统和一般的应用有非常大的不同，一般【本文受版权保护】【原创内容，转载请注明出处】的应用以提供给公司/企业外的用户（消费者【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。、普通玩家）提供服务，以完成2C的销售目【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。的，而业务系统一般是2B或者自身消费的模本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。式，完成的是自身业务的管理目标。所以，应【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】用侧重服务，业务系统侧重管理。两者的不同未经授权，禁止复制转载。【本文受版权保护】，导致我们对项目开发中，代码的组织方式会原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net有差别。2C应用要满足大量用户在使用时的转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】舒适性，因此要提高项目中有关性能、用户体原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net验、效果等方面的要求，以吸引用户付费。但【本文受版权保护】转载请注明出处：www.tangshuang.net业务系统则稍有差别，虽然系统的使用体验也【原创内容，转载请注明出处】【作者：唐霜】很重要，但是不是占最重要的部分，业务系统【转载请注明来源】【未经授权禁止转载】最重要的部分，是必须保证用户看到的数据、【作者：唐霜】著作权归作者所有，禁止商业用途转载。流程等，必须与真实的业务、业务流程一致，【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】否则会带来自身利益的损失，因此，在稳健性【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】、安全性等方面要求更高。

本文主要站在稳健性这个角度，试图阐述，在原创内容，盗版必究。【未经授权禁止转载】业务系统中，如何去安排或组织我们的（前端【本文受版权保护】本文作者：唐霜，转载请注明出处。）代码，才能保证符合业务系统特征要求，且转载请注明出处：www.tangshuang.net【版权所有，侵权必究】有利于长期可持续维护下去。由于谈系统过大本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，那么，本文只立足于一个业务模块来进行阐【本文受版权保护】【版权所有】唐霜 www.tangshuang.net述。

本文作者：唐霜，转载请注明出处。【本文受版权保护】【本文首发于唐霜的博客】

什么是业务模块？本文版权归作者所有，未经授权不得转载。

首先，什么是业务系统？在这之前，又必须回【转载请注明来源】【未经授权禁止转载】答什么是业务？业务（Business）专【本文首发于唐霜的博客】【本文首发于唐霜的博客】指商业活动，是实现企业生产到利益回收的一【原创内容，转载请注明出处】【版权所有，侵权必究】个环节，它的总和，构成了该企业盈利活动的【版权所有】唐霜 www.tangshuang.net【转载请注明来源】整个流程。一般而言，我们所指的业务是企业本文作者：唐霜，转载请注明出处。【转载请注明来源】商业活动中的一个部分，有的甚至小到一个环【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net节，例如“结算”这个环节。业务系统则是辅本文作者：唐霜，转载请注明出处。【本文受版权保护】助这些商业活动的计算机在线系统，以信息化【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】的形式管理和决策企业的商业活动（理论上没著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net有业务系统企业也能运转，但信息化社会没有【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。业务系统会让企业寸步难行）。

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

大部分情况下，业务系统会尽可能多的囊括企【原创内容，转载请注明出处】【作者：唐霜】业的业务环节，其目标是将企业的所有商业管【转载请注明来源】【原创内容，转载请注明出处】理在线化，完成除必须在线下完成的实体业务转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】之外的所有管理活动。而且，通过业务系统的【原创内容，转载请注明出处】【转载请注明来源】数据积累，可以让企业基于已有数据进行深入本文作者：唐霜，转载请注明出处。【作者：唐霜】决策，比只有线下管理的竞争对手高出多个维【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】度。企业的管理者和员工使用业务系统，参与未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net到企业的各个业务环节，参与形式各有不同，【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。根据员工的角色来决定，比如有的员工不接触【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。系统界面，只通过工卡完成各项流程的录入，【原创不易，请尊重版权】未经授权，禁止复制转载。有的员工则需要完成在线申请或审批，有的员【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net工需要使用复杂的第三方工具完成系统录入等转载请注明出处：www.tangshuang.net【未经授权禁止转载】等。

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

业务模块，是以业务系统的建设者（领域专家【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net、系统工程师等）的角度看待业务系统时，将【本文首发于唐霜的博客】【版权所有，侵权必究】庞大的业务系统，按照某个业务活动的边界，【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。进行划分的某个单元。但是技术上，一般一个原创内容，盗版必究。【未经授权禁止转载】模块还是粒度比较大的单元。一般而言，业务本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。模块囊括了系统关于该业务的所有内容，且和【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net其他业务有明显的界限，理论上，可以在脱离【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。了其他业务模块的情况下独立运行。

有了以上的认知，我们就知道，我们需要掌握【原创不易，请尊重版权】【本文首发于唐霜的博客】企业在某个业务中，不同的参与者都是如何工未经授权，禁止复制转载。【转载请注明来源】作的。在该业务模块没有上线到业务系统中时本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】，没人能明确的告诉你这个业务模块应该长什【未经授权禁止转载】【作者：唐霜】么样子，你需要走访业务的参与成员，了解他【本文受版权保护】【本文首发于唐霜的博客】们实际是怎么工作的，然后再思考，如果要将【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net这些工作迁移到线上，应该关注哪些方面，是本文作者：唐霜，转载请注明出处。【未经授权禁止转载】用户的操作形式？是界面的友好风格？是信息本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】的准确？但是应该注意一点，如果业务系统致本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】使工作效率降低，那么说明设计该系统的人没【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】有真正掌握企业商业活动的核心要点。

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】

DDD领域驱动设计【原创内容，转载请注明出处】

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

DDD（Domain-Driven De本文作者：唐霜，转载请注明出处。【转载请注明来源】sign）是帮助工程师，应对复杂业务系统【作者：唐霜】【转载请注明来源】设计和开发的思想武器和方法论。它指导了我未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net们如何去和领域专家（熟悉业务的负责人）进【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】行沟通，如何和他们找到一门共通语言，并基【原创不易，请尊重版权】未经授权，禁止复制转载。于该语言构建一套关于领域知识的图谱，并且本文作者：唐霜，转载请注明出处。【作者：唐霜】是按照我们做系统设计的思路构建这套图谱。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【转载请注明来源】转载请注明出处：www.tangshuang.net

建模是DDD的核心方法论，你需要去区分一【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net个业务中的各个概念，为不同的概念建立不同【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】类型的模型，并且找到它们之间的关系，通过著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。建模，建立起我们编程的基础工程，后续所有【版权所有，侵权必究】未经授权，禁止复制转载。的开发，都是在这些模型的基础上完成的。

【转载请注明来源】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】

前后端有别原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。【作者：唐霜】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net

自从前后端分离流行之后，DDD从某些技术本文作者：唐霜，转载请注明出处。【版权所有】唐霜 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 获取更多精彩内容】的态度有了很大的不同。对于后端而言，模块【转载请注明来源】【原创内容，转载请注明出处】相对来说还比较清晰，沿用旧的设计思路，模未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。块的各个功能也能保持一定的高内聚。甚至，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。由于将视图层丢出去，后端甚至不需要考虑视本文作者：唐霜，转载请注明出处。原创内容，盗版必究。图层的问题，只需要保证业务的数据准确和业【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。务的流转准确即可。对于视图层，后端只需要【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】一股脑将每一个功能所需要的数据（VO）以转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。JSON的形式提供Restful接口即可【未经授权禁止转载】【原创不易，请尊重版权】。

【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

对于前端而言，其实经历了多个阶段。起初，未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】前端作为页面的处理方，主要是提供js脚本【原创内容，转载请注明出处】【原创内容，转载请注明出处】，完成一些特定的后端无法完成的交互效果，本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net例如一些建议的滑动下拉效果，一些悬浮效果【未经授权禁止转载】【未经授权禁止转载】等，由于这些效果需要js编写，而后端开发【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。人员不熟悉，就不得不由前端人员完成。之后原创内容，盗版必究。【原创不易，请尊重版权】，随着ajax技术兴起，前端路由技术的出【本文受版权保护】本文作者：唐霜，转载请注明出处。现，页面交互效果开始变得丰富，无刷新的本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net效果成为web应用的主流形式，使得后端人【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】员参与前端工作的可能性越来越低，前端逐渐未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。从作为后端末梢环节的地位独立出来，通过a著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。jax或其他http交互方式，完成与后端原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net的分离。

现在，我们的核心问题是：前端怎么对待业务本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】模块？

【原创内容，转载请注明出处】【未经授权禁止转载】转载请注明出处：www.tangshuang.net

一种成熟的方式是将业务模块组件化，这里的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net组件是具有高内聚设计的业务组件。2017未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】年我在Morningstar工作的时候，【作者：唐霜】转载请注明出处：www.tangshuang.net就已经在采用这种方案。和现在的react【本文受版权保护】【关注微信公众号：wwwtangshuangnet】、vue组件不同，当时我们基于backb原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。one作为框架开发组件，一个组件基于一些【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。数据点完成一个具体的业务（基金数据分析）转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。。这个组件在交付时，需要同时交付前端和后未经授权，禁止复制转载。【未经授权禁止转载】端代码到不同的平台中，作为对应产品的一部【本文首发于唐霜的博客】未经授权，禁止复制转载。分。组件的形式是一种不错的形式，包括我后【版权所有，侵权必究】【原创不易，请尊重版权】面要推荐的方案，本质上也是交付组件。

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

但是，组件不是唯一的业务模块交付形式。我【版权所有，侵权必究】【未经授权禁止转载】在业务中还使用angularjs作为框架【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。开发应用，一般情况下，我们会根据路由来划【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。分模块，一个模块拥有相同的路有根地址，模原创内容，盗版必究。转载请注明出处：www.tangshuang.net块内的各个功能或处理节点都是该路由的子路原创内容，盗版必究。【作者：唐霜】由。但是，它的模板、controller转载请注明出处：www.tangshuang.net原创内容，盗版必究。、service、样式文件被放在不同的目本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net录下管理，虽然在前端的运行效率变高了，但【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net是对于业务模块而言却变得高耦合低内聚。可本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。能angular的开发团队意识到这个问题【本文受版权保护】【版权所有，侵权必究】，angular2之后，也就是新的基于t转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ypescript的angular框架不未经授权，禁止复制转载。【本文受版权保护】在以这种模式对待业务模块，新的框架下，一未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】个module的相关代码被聚合在一起，并【作者：唐霜】原创内容，盗版必究。且形式上以组件的形式导出，可以说实现了业未经授权，禁止复制转载。未经授权，禁止复制转载。务的高内聚，业务间的低耦合。

稳健的前端业务模块形式【原创内容，转载请注明出处】

【作者：唐霜】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

Angular的module组织形式，我【作者：唐霜】【原创不易，请尊重版权】认为是比较优秀的组织形式。除了代码本身的未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。组织形式之外，我们还要去看业务模块在设计原创内容，盗版必究。本文作者：唐霜，转载请注明出处。上的特征，是否有利于为我们提供一定的灵活本文作者：唐霜，转载请注明出处。原创内容，盗版必究。性，可为将来实现长期可持续迭代更新创造条未经授权，禁止复制转载。【原创不易，请尊重版权】件。

转载请注明出处：www.tangshuang.net【本文受版权保护】本文作者：唐霜，转载请注明出处。

那么，怎么样设计业务模块呢？【转载请注明来源】我提倡一种分层的理念。将业务模块分为数据【作者：唐霜】本文作者：唐霜，转载请注明出处。层、表现层和逻辑层。这也是angular尝试践行的，它首先提本文版权归作者所有，未经授权不得转载。【转载请注明来源】供了可在编译时实现抽象的模板；其次提供了【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。依赖注入的服务层为模块提供视图之外的其他著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】能力，我们可以在服务层做很多事情，比如建【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。立模型，但是它没有提供这方面的指导；最后著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，它内置了基于rxjs的流式数据（状态）【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net管理，基于管道的处理方式，可以让交互和状著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】态的流动可以自由组合，使用起来非常灵活。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net但是，正如我提到的，它没有提供有关分层理【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net念的更深入的指导，它提供了各种工具，让你著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。自己选择是否使用，以及如何使用这些工具来转载请注明出处：www.tangshuang.net【未经授权禁止转载】编写出可长期维护的代码，完全由你的设计或【转载请注明来源】未经授权，禁止复制转载。架构能力决定。

而我则希望提供用于编写出明确分层概念的范【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net式，就像多年前我们写后端服务时，需要进行著作权归作者所有，禁止商业用途转载。【作者：唐霜】分层管理一样，我希望在前端践行DDD的理【原创不易，请尊重版权】【原创内容，转载请注明出处】念。但同时又有别于后端的DDD，前端不需【版权所有】唐霜 www.tangshuang.net【本文受版权保护】要永久存储数据，每一次刷新浏览器，我们都原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。可以通过api接口拿到需要的数据，而且从【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】api请求数据和从数据库查询数据也有一定【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。的差别。我们要构建具有DDD通行理念的，【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。带有前端特色的建模体系。

【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

前端建模【原创不易，请尊重版权】

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

如果你使用vue组件，你会有一种为视图撰本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。写模型的感觉，即ViewModel，它一【作者：唐霜】本文版权归作者所有，未经授权不得转载。定指向视图层（界面与用户交互）。但如我在【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net多个场合提到的一样，vue组件是纯视图层【本文受版权保护】未经授权，禁止复制转载。的要件，如果你把有关业务的代码，写在vu未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。e组件中，你的代码将会是业务逻辑和视图逻本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net辑混杂在一起的代码，你将无法在后来的维护本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net中区分和把握到底要改业务逻辑还是改交互逻【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。辑。实际上，这种操作是很多初级前端的惯用本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】手法，因为大部分初级前端的编程习惯，都是【版权所有，侵权必究】【转载请注明来源】随着意识流，按线性的思维写代码。而真正有【转载请注明来源】【版权所有】唐霜 www.tangshuang.net经验的工程师，一定会在开始写代码之前先思未经授权，禁止复制转载。【作者：唐霜】考将要写作的代码，哪些是用于定义业务对象原创内容，盗版必究。【未经授权禁止转载】的，哪些是用于控制数据流的，哪些是为了完【版权所有，侵权必究】【原创不易，请尊重版权】成界面渲染的，哪些是为了完成用户交互的等【本文受版权保护】著作权归作者所有，禁止商业用途转载。等。而这些思考，用一种思想来概括就是“分本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。层思想”。

有了分层思想之后，开发者才不会认为抽象出【原创内容，转载请注明出处】【转载请注明来源】业务模型是一件麻烦的事。是的，很多初级前【本文受版权保护】【版权所有】唐霜 www.tangshuang.net端觉得自己写的代码非常舒服，并且认为前端【作者：唐霜】【本文受版权保护】建模或把一些不属于视图层的东西提炼出去，【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。是一件增加复杂度，使代码难读难维护的事。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】而实际上，由于他们只关注当下快速实现，而转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net不用考虑可持续维护的问题，所以认为自己的本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。实现是最优解。但往往有些系统，根本不应该【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。让一个经验并不丰富且自以为是的初级前端来【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。写，而应该由经验丰富的工程师来完成。两者【关注微信公众号：wwwtangshuangnet】【作者：唐霜】之间的差距，会使得系统后续的发展呈现截然【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。不同的效果，但讽刺的是，经验不足的开发者【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。进入这样的项目组之后，反而认为自己写的粗【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。糙的代码应该推广开替代已经成熟的体系。所本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】有的一切，都会在实践中被检验出来。分层开本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net发，势在必行。

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

你可能会有疑问，不都是业务模型么，怎么还著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】区分用于展示的和提交的？这可能是前端的特著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net殊之处。后端应用，提交数据到数据库时，具转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net有特定的约束，但是在输出到前端时却没有约原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net束，因此，后端把大部分工作都投入在对数据未经授权，禁止复制转载。【转载请注明来源】库有写入动作的业务逻辑上，而丢给前端的数转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】据，基本上不需要按照视图层的逻辑建模，只本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net要一股脑把数据丢给前端即可。但是前端则不著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。同，视图层具有复杂的交互逻辑，而这些交互【本文受版权保护】原创内容，盗版必究。逻辑依赖业务对象的特征，比如当这个业务对【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】象处于什么样的一个状态时，才能点击某个按【版权所有，侵权必究】【本文首发于唐霜的博客】钮触发一个流转业务。因此，在展示/交互这【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。个层面，前端也需要建模。而提交数据就更不本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net用说了，前端业务表单本身就是极为复杂的一本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。种场景，不建立模型，根本无法对一个表单所本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。要表达的业务对象完成清晰的创建或更新处理本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】。

如何建模？本文版权归作者所有，未经授权不得转载。

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

讲了那么多，那么到底应该如何实施前端建模【转载请注明来源】【作者：唐霜】呢？作为工程师，我们必须掌握一定的方法论转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。，在理论上对我们的设计有一定的自信，才能本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】确保我们的建模方式是对的。DDD为我们提原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】供了建模的方法论，它提供了多个方案（Sc未经授权，禁止复制转载。【原创不易，请尊重版权】heme），比如Entity, Valu未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。e Object, Service, M转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】odules, Aggregate, F著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】actory, Repository等等未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】，这些都是用来构造模型的方案。

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

这么多方案，实际上本质要解决两个问题：著作权归作者所有，禁止商业用途转载。

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

【未经授权禁止转载】

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

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

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

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

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

我们要对业务进行建模，首先要抓住该业务的【未经授权禁止转载】【原创不易，请尊重版权】核心是什么。例如银行转账这个业务，它的核本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】心是什么？是转账的金额，还是账号？它的边【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net界又是什么？例如在转账这个业务中，我是否【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】需要去把两边账号的消费记录拉出来看看？这著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。些，都是我们要在建模的时候解决的问题。D【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】DD告诉我们的方法论，是不要自己闭门造车未经授权，禁止复制转载。【版权所有，侵权必究】，不要从开发人员的角度去设计一个系统，而转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。是要找领域专家（对该业务的实操了如指掌的【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】人）进行了解，建立自己对该业务的知识体系【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，并且和领域专家一起敲定有关这个业务各个【转载请注明来源】著作权归作者所有，禁止商业用途转载。细节的模型体系。

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

回到我们前端。我们实际上要找到这个业务中转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】，存在那些对象，收集到所有对象之后，去一本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】个一个的观察它们，如果它是业务逻辑中的关【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。键对象，就要使用Entity的方案，对它【作者：唐霜】【未经授权禁止转载】进行细致的深入的描述，如果它是一个次要的【转载请注明来源】未经授权，禁止复制转载。或者说固定不变的或者一次性用完的对象，那本文作者：唐霜，转载请注明出处。【转载请注明来源】么就可以使用Value Object的方本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。案（也就是一个普通的对象）。有了这些对象【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。之后，还需要有一个东西把它们聚合在一起，本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。这时我们可以使用Aggreate的方案。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】在这些对象之间，还可能出现一些动作（动词本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】，非静态的），此时我们可以使用Servi未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ce和Factory的方案。我们还需要和【本文首发于唐霜的博客】【原创不易，请尊重版权】服务端交互，拉取数据，填充到模型中，形成【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net更丰富的细节，此时我们可以采用Repos【原创不易，请尊重版权】未经授权，禁止复制转载。itory的方案。

不要被这么多的名词吓到，本质上，放到前端【转载请注明来源】本文作者：唐霜，转载请注明出处。的语境下，你就是需要去创建一些类，并处理转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】好这些类在真实被使用时，它们之间的约束逻【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。辑等等。

【原创不易，请尊重版权】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

建模实践本文作者：唐霜，转载请注明出处。

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

既然本质上是去建立类，那么接下来我们就原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】来看一看如何利用前端的工具js来完成模型著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net的建立。在这之前，我们不得不承认，js不本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】是一门能像java一样写出健壮的系统的语【版权所有，侵权必究】【未经授权禁止转载】言。它有自己的语法特征，而这些语法特征导【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】致我们在完成建模时，需要采取一些非常手段【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】。比如我，就是利用class的stati【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netc属性来完成模型上元数据的定义。

class Account {
  static default = ''
  static type = 'numeric'
}

class Amount {
  static default = 0
  static type = 'number'
}

class TransferModel {
  id = ''
  static from = Account
  static to = Account
  static amount = Amount
}

上面这段代码仅仅是我用来说明建模的一个思转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net路，我没有在生产环境用过这样的代码。首先【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，我们定义了两个类Account账户, 【作者：唐霜】【版权所有，侵权必究】Amount金额。这两个类具有类似的结构【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，因为它们是用来描述这个对象应该具备的一著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】些特征，比如Account这个对象应该是【本文受版权保护】本文版权归作者所有，未经授权不得转载。一个数字字符串，而Amount应该是一个本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。数字。其次，Transfer是一个包含了【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。三个字段的对象，每个字段都对应一个建好模本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。的对象。我们在使用时，主要是去使用Tra本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netnsfer实例化出来的对象，这个对象应该原创内容，盗版必究。转载请注明出处：www.tangshuang.net具备3个字段，且每个字段应该具备哪些规则著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】（约束）都是提前规定好的。

本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

上面是我们对转账这个业务中的对象进行建模转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。。实际上，我们并没有完成转账这个业务，我原创内容，盗版必究。【版权所有，侵权必究】们需要把数据发送给api，以真正完成转账【未经授权禁止转载】【原创内容，转载请注明出处】。所以，我们要在对象之外，建立一个服务，【版权所有】唐霜 www.tangshuang.net【本文受版权保护】用于完成这个业务。

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

class TransferService {
  submitTransfer(id, data) {
    ...
  }
  getTransfer(id) {
    ...
  }
}

这也非常容易理解，我们通过两个方法来完成未经授权，禁止复制转载。原创内容，盗版必究。和API接口的交互，从而使得这个业务完成【作者：唐霜】转载请注明出处：www.tangshuang.net前后端对接，使它在整个系统层面生效。同时本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，我们还提供了一个接口getTransf【转载请注明来源】【本文首发于唐霜的博客】er，它将用于在用户查看自己的转账记录的【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。时候，还原数据。

但上面这些还不够，我们需要有一个东西，把本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。它们串联起来，它们才能真正工作。

class TransferController {
  static model = TransferModel
  static service = TransferService

  async init(id) {
    const data = await this.service.getTransfer(id)
    this.model.setData(id, data)
  }

  async submit() {
    const data = this.model.getData()
    await this.service.submitTransfer(this.model.id, data)
  }
}

这样，我们就模型和服务串起来了。我们可以著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】从这三块代码中，大致看出关于转账这个业务本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net的实际逻辑。但是，我们忽略了另外一个东西转载请注明出处：www.tangshuang.net原创内容，盗版必究。，就是我们现在还没有界面，我们还没有提供著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】给用户怎么进行操作后完成这个转账。因此，【本文受版权保护】原创内容，盗版必究。我们还需要补全这个部分。

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

class TransferView extends React.Component {
  controller = new TransferController()
  componentDidMount() {
    const { id } = this.props
    this.controller.init(id)
  }
  render() {
    return (
      <button onClick={() => this.controller.submit()}>transfer</button>
    )
  }
}

这样，我们就将视图和模型最终串了起来。也【本文首发于唐霜的博客】原创内容，盗版必究。实现了我们最初关于分层的想法。通过分层架本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net构（Layered Architectu【原创不易，请尊重版权】原创内容，盗版必究。re），我们的代码被以不同层的不同理念进【未经授权禁止转载】【转载请注明来源】行组织。有关模型的东西，全都且只在模型层本文作者：唐霜，转载请注明出处。【未经授权禁止转载】处理，我们不需要考虑外部将会如何使用它，原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】我们只需要考虑，我们的建模是否符合真实业【原创内容，转载请注明出处】【原创内容，转载请注明出处】务的需要。这样的代码组织，将颠覆我们传统转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】前端开发的一些经验，然而，这种颠覆显得没【作者：唐霜】【原创内容，转载请注明出处】有什么惊喜，它看上去复杂度增加了，我们反【未经授权禁止转载】未经授权，禁止复制转载。问一句自己，我们是为了分层而分层，还是为【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net了这样分层写出的代码，将有助于我们区分代未经授权，禁止复制转载。【版权所有，侵权必究】码块功能，以利于我们的项目在两年三年的持本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】续迭代维护中，有比较清晰的代码组织，从而【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】让我们的维护更加有效。

未经授权，禁止复制转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】

提炼关系表【原创内容，转载请注明出处】

【原创不易，请尊重版权】【转载请注明来源】【原创不易，请尊重版权】

关系表是指在某个业务逻辑中，涉及多个业务著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。对象，它们之间的存在不同情况下的不同联系【本文受版权保护】著作权归作者所有，禁止商业用途转载。，所最终组成的一个Object对象。这样【本文首发于唐霜的博客】【原创内容，转载请注明出处】说过于抽象，我们用实际的案例来说明问题。

在上述转账系统中，存在着这样的内在逻辑，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。当用户X信用等级为1时，他不能向客户类型未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。为A类的用户转账，因为可能存在信用风险。【未经授权禁止转载】转载请注明出处：www.tangshuang.net此时，实际上，我们要构建一张用于表达信用未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net、客户类型和转账权限之间的关系表，在我的【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net设计里，转账权限是结果，因此，它是值，而【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】信用、客户类型是条件，因此，产生的表可以转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。按如下写：

{
  1: {
    A: false,
    B: true,
  },
  2: {
    A: true,
    B: true,
  },
}

上面的关系表表示了如下关系：信用为1级的原创内容，盗版必究。【未经授权禁止转载】用户，不能向A类用户转账，但可以向B类用【本文受版权保护】原创内容，盗版必究。户转账；信用为2级的用户，可以向A和B类转载请注明出处：www.tangshuang.net原创内容，盗版必究。用户转账。

一般来讲，关系表会非常繁琐，因为它要枚举原创内容，盗版必究。【版权所有，侵权必究】大部分可能性（一个技巧是，不需要列出fa转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netlse的情况，只需要列出true的情况的【版权所有，侵权必究】【本文受版权保护】关系即可），所以感觉节点会很多。但是，它【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。的用处却非常大，你可以使用它避免一大堆的【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。if…else。比如上面这个【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net场景。我们有两种选择，一种是将这个关系写著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。在模型中，另外一种是写在控制器中。例如：

class Credit {
  static default = 1
  static type = enumerate([1, 2])
}

class Stratum {
  static default = 'A'
  static type = enumerate(['A', 'B'])
}

class AccountModel {
  static credit = Credit
  static stratum = Stratum

  canTransfer(toAccount) {
    if (this.credit === 1) {
      return ['B'].includes(toAccount.stratum)
    }
    else {
      return true
    }
  }
}

class TransferModel {
  static from = AccountModel
  static to = AccountModel

  transfer() {
    if (this.from.canTrasfer(this.to)) {
      ...
    }
  }
}

你看，我们在canTransfer方法中【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。通过if…else来进行判断【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net，看上去也是可以的，但是，这里有一个问题原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net是，这段代码无法让我们洞悉业务的详细细节未经授权，禁止复制转载。【未经授权禁止转载】，它像是一段无法被看透的程序，而不是一段转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】业务的描述。接下来我们用关系表来改造它：

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

canTransfer(toAccount) {
  return relationship[this.credit]?.[toAccount.stratum]
}

多么简单的一句话，而这里的relatio著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netnship就是我们上面我们列举的关系表。未经授权，禁止复制转载。未经授权，禁止复制转载。关系表是静态的，不仅程序的运行性能会更好未经授权，禁止复制转载。【本文首发于唐霜的博客】，同时，我们阅读关系表（需要增加对键的含【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net义注释）来掌握业务中都有哪些情况，我们熟原创内容，盗版必究。未经授权，禁止复制转载。知了业务，才能在将来的调整时，将关系表中【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。的true改为false即可。

基于React的DDD框架【本文受版权保护】

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

但以上仅仅是一个思路，要让它工作起来，还未经授权，禁止复制转载。【作者：唐霜】有非常多的工作要做。幸运的是，我已经帮你未经授权，禁止复制转载。原创内容，盗版必究。做了这项工作，我发布了开源的 tyshemo【版权所有，侵权必究】模式库和【关注微信公众号：wwwtangshuangnet】nautil未经授权，禁止复制转载。框架，tyshemo 帮助你完成核心的【本文受版权保护】【本文受版权保护】模型层，nautil 则是基于 tysh【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netemo 提供了完整的 service 和【未经授权禁止转载】原创内容，盗版必究。 controller 建模，以及提炼了未经授权，禁止复制转载。未经授权，禁止复制转载。业务交互的相关编程范式，你可以使用它完成转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。DDD思路的整个链路的实践，同时，又不失【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】去基于react进行开发的乐趣。你可以在这里著作权归作者所有，禁止商业用途转载。看到一份完整的代码示例。【转载请注明来源】

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

本文作者：唐霜，转载请注明出处。【作者：唐霜】【本文首发于唐霜的博客】

面对一个业务模块，我们会把和它相关的所有【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。代码文件放在一个目录下进行管理（除一些需【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。要公用的资源除外）。我们首先要对业务进行【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。建模，如果是简单的一两个模型，我们只需要本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。建立一个.model.js来完成，而如果【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】是一个比较复杂的体系，我们可以创建一个.【转载请注明来源】【转载请注明来源】model文件夹，放置所有相关模型文件，【作者：唐霜】原创内容，盗版必究。比如上图示例中，我们可以创建home.m本文作者：唐霜，转载请注明出处。【作者：唐霜】odel文件夹来管理。建模的同时，我们就著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】会在必要的时候，为模块创建service【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。，规则也是一样。完成建模之后，我们需要撰【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net写控制器controller，在一个co原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ntroller内部，你需要引入mode著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。l和service，nautil的Con【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】troller会自动帮你实例化它们，并且本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】做好观察。除了把model和servic【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。e串联起来，controller还有什么【本文首发于唐霜的博客】【作者：唐霜】用呢？你还可以在controller内建【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。立基于模型的交互。因为对于前端应用来讲，【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。业务除了数据逻辑之外，往往还有交互逻辑，原创内容，盗版必究。【原创不易，请尊重版权】比如“点击这个按钮之后，弹出一个对话框询转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net问用户是否确认转账，如果用户点确认，那么【本文首发于唐霜的博客】【原创不易，请尊重版权】执行转账”，这段交互描述里面，没有确切的转载请注明出处：www.tangshuang.net【转载请注明来源】告诉你弹出框应该长什么样子，用什么颜色，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】字体多大等等，它只描述了有关业务的交互部未经授权，禁止复制转载。【版权所有，侵权必究】分，这个部分与布局和样式无关，是纯粹的描【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。述和业务相关的交互效果。得益于react本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】的抽象能力，我们可以直接在control转载请注明出处：www.tangshuang.net原创内容，盗版必究。ler中，使用jsx完成纯交互的部分，并本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net以组件的形式作为controller的接转载请注明出处：www.tangshuang.net原创内容，盗版必究。口提供给外部使用。这样，有关业务的一切逻著作权归作者所有，禁止商业用途转载。【转载请注明来源】辑，我们就通过controller串联m著作权归作者所有，禁止商业用途转载。【转载请注明来源】odel和service，在一个模块内，【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net脱离布局，完成了。完成controlle【转载请注明来源】原创内容，盗版必究。r之后，我们才开始布局开发，布局开发也就原创内容，盗版必究。本文作者：唐霜，转载请注明出处。是react组件的日常开发，由于我们在c著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。ontroller中导出了交互组件，而这【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】些交互组件已经涵盖了大部分业务逻辑，所以未经授权，禁止复制转载。【原创内容，转载请注明出处】，我们可以做到布局组件和业务无关，是纯粹【原创内容，转载请注明出处】【本文受版权保护】的布局和样式。

【本文受版权保护】本文作者：唐霜，转载请注明出处。【本文受版权保护】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

基于这样的设计，我们在后续的开发中，还可未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】以加入一些特殊的逻辑，例如，我们一个业务著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。模块，可能在PC端也可能在手机端使用，那转载请注明出处：www.tangshuang.net【作者：唐霜】么，此时，我们只需要重写布局组件，而无需未经授权，禁止复制转载。【原创内容，转载请注明出处】再写业务逻辑相关的代码。更多的思想，需要【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】你更深入的了解nautil，以及尝试使用【本文受版权保护】著作权归作者所有，禁止商业用途转载。它作为主力开发工具之后，慢慢体会。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【未经授权禁止转载】

结语【访问 www.tangshuang.net 获取更多精彩内容】

【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】转载请注明出处：www.tangshuang.net

本文虽然标题是谈如何打造前端的模块代码，原创内容，盗版必究。转载请注明出处：www.tangshuang.net但本质上，详细的阐述了我关于DDD的思想【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net的理解，以及自己在DDD的思想基础上构建未经授权，禁止复制转载。原创内容，盗版必究。的一套代码管理范式，并且以前端框架的形式本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net组织起来。我相信，如果你也是在编写复杂的本文作者：唐霜，转载请注明出处。【作者：唐霜】业务系统，并且遇到一些瓶颈的话，一定能从【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。本文中有所收获。当然，由于前端的特殊性，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。我们不能照搬DDD，需要有所变通。我写框【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net架，也只是一种探索，并不代表它是唯一的一未经授权，禁止复制转载。【未经授权禁止转载】种形态。随着产业互联网时代的到来，前端逐【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。渐从大众型交互应用，转向企业型业务系统应【转载请注明来源】原创内容，盗版必究。用，这是大势所趋，也是所谓“互联网下半场【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。”前端立足之本。本文抛砖引玉，相信站在前【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 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 获取更多精彩内容】【转载请注明来源】原创内容，盗版必究。

2021-05-21 8386

唐霜

如何打造更稳健的前端业务模块代码组织形式？