React语境下前端DDD的思考

广告位招租
扫码页面底部二维码联系

首发于 https://mp.weixi【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。n.qq.com/s/3oa6pDQVr本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】xKWI7IrN5ZKRQ

未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】ang.net【版权所有,侵权必究】【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。ngnet】
转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。ng.net原创内容,盗版必究。【原创不易,请尊重版权】

导语:笔者在react项目中尝试使用DD原创内容,盗版必究。【转载请注明来源】D方法论,为业务对象建模,以更好的理解和未经授权,禁止复制转载。【原创内容,转载请注明出处】把握业务。本文从对业务的思考、react【原创内容,转载请注明出处】【未经授权禁止转载】项目的特征出发,阐述笔者在项目中进行的前著作权归作者所有,禁止商业用途转载。【作者:唐霜】端DDD探索,以抛砖引玉,和读者一起思考【本文受版权保护】著作权归作者所有,禁止商业用途转载。前端DDD的理解和方法。

原创内容,盗版必究。【转载请注明来源】

前言

笔者所处的业务团队服务于腾讯投资M&am【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】p;A部门,其中系统涉及的投资相关业务在【版权所有,侵权必究】未经授权,禁止复制转载。国内具有典型意义,是覆盖一级市场、二级市著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。场、基金的多品类全流程的投资系统,其中包【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。含了对投资项目本身的业务处理,也包含了投【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】资流程的工作处理(类比OA系统),还包括【转载请注明来源】【转载请注明来源】了其他大部分系统需要考虑的技术建设(例如【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】基于安全性考虑的数据、合同文件、电子签等【版权所有,侵权必究】【版权所有,侵权必究】)。这些方方面面的建设使得这套系统在除了著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。技术本身之外,对业务的掌握能力非常重要。【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。虽然技术团队跟随产品团队完成技术开发,但【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。是在一些具体问题上,如果对业务不熟悉,很著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。难真正处理好开发过程中的某些具体的逻辑代转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net码,而对于投资系统而言,准确实现业务是最转载请注明出处:www.tangshuang.net【作者:唐霜】基本的要求,否则带来的风险可想而知。这也【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net给我们技术团队带来了巨大挑战,如何在如此【本文受版权保护】本文版权归作者所有,未经授权不得转载。复杂的系统中,比较合理的掌握每一个技术细【原创不易,请尊重版权】【未经授权禁止转载】节背后的业务逻辑,确保业务实现的准确呢?

原创内容,盗版必究。【转载请注明来源】【作者:唐霜】【转载请注明来源】

我把目光瞄准了DDD,这个由Eric E【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。vans在《Domain-Driven 【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.netDesign: Tackling Com【原创内容,转载请注明出处】【转载请注明来源】plexity in the Heart未经授权,禁止复制转载。【作者:唐霜】 of Software》(2004)总未经授权,禁止复制转载。【转载请注明来源】结提出的一整套概念和方法论。在阅读人民邮【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net电出版社出版的翻译版本之后,我开始收集各本文作者:唐霜,转载请注明出处。原创内容,盗版必究。种资料学习和思考,探索在前端践行DDD的著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net可能性。我想,基于DDD的理念,可以帮助本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。我所处的团队合理的形成良好的业务沟通规范原创内容,盗版必究。本文作者:唐霜,转载请注明出处。和业务逻辑沉淀流程,通过DDD在技术方面【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】的指导,帮助我们构建更加稳固的业务系统。【作者:唐霜】【原创不易,请尊重版权】基于这样的想法,我开启了相关的探索。

【本文受版权保护】【转载请注明来源】

什么是DDD?

Domain-Driven Design【作者:唐霜】原创内容,盗版必究。是从实际业务出发,站在解决领域问题的角度未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。去思考和设计系统的方法论。在我看来,它包本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。含了两个方面的内容:沟通方法论和研发方法本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】论。

未经授权,禁止复制转载。【原创不易,请尊重版权】【转载请注明来源】

Eric从另一个角度让我们技术人员重新思本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。考自己的工作方式,对于面临复杂业务的系统本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。开发的技术人员,不能一上来就开始进行系统转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】设计和代码实现,他们要做的第一步,应该是本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】和领域专家一道,基于某种大家都能理解的专【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。业语言,构建出一套领域模型,这也就是我所【本文首发于唐霜的博客】【原创内容,转载请注明出处】讲的“沟通方法论”。而这个步骤,是我们现转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。在的很多开发团队完全没有考虑过的事情。首【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。先,这里的“领域”(Domain)是指一【本文受版权保护】转载请注明出处:www.tangshuang.net类事物的集合,比如我们常讲的金融领域、通未经授权,禁止复制转载。未经授权,禁止复制转载。信领域、数学领域等等。你可以很明显的感知未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。到,“领域”意味着“边界”,意味着某些“【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】共性”和某些“特性”。领域专家就是这些特【版权所有】唐霜 www.tangshuang.net【转载请注明来源】定业务领域的资深工作者,对该领域的业务非【转载请注明来源】【版权所有,侵权必究】常了解,是该领域的行家。要让技术人员和领原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。域专家坐在一起构建出对应业务的领域模型,【版权所有】唐霜 www.tangshuang.net【本文受版权保护】必须摒弃他们各自在自己工作范围内的狭义概转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】念,大家找到一种相互都可以理解的概念表达原创内容,盗版必究。【原创不易,请尊重版权】方式,来最终确认各自提出的问题和回答对方本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】都能准确理解。这在我看来,就是世界上最高转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。效的沟通方式,没有之一。

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】【作者:唐霜】

我们可以使用DSL(领域专用语言)来完成著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】这一沟通,领域专家和技术专家(姑且这么叫【版权所有,侵权必究】【本文首发于唐霜的博客】吧~)基于统一语言,构建领域模型,可想而著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】知,这一模型是无法直接作为代码运行的。开本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net发人员要做的,是基于该领域模型,用代码将【版权所有】唐霜 www.tangshuang.net【本文受版权保护】其准确实现。而Eric充分考虑到一个系统【原创不易,请尊重版权】【作者:唐霜】在技术实现时,和现实世界存在差异,因此,原创内容,盗版必究。【本文首发于唐霜的博客】提出了非常多的技术建模方案(Scheme原创内容,盗版必究。【原创内容,转载请注明出处】)和配套的架构理念,让技术专家在和领域专【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。家构建领域模型时,有意无意的引导领域专家本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net一起构建出更加符合后期技术实现的模型架构【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】体系。

【本文首发于唐霜的博客】原创内容,盗版必究。【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】【版权所有,侵权必究】ang.net

图1 统一语言、领域模型与代码实现的关系

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

因此,DDD不是某种架构,而是一种设计,著作权归作者所有,禁止商业用途转载。【作者:唐霜】不同的业务团队,可以基于这种设计实现一种【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。符合DDD的架构,来帮助自己更好的构建自原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。己的系统。阅读上书过程中,我反复意识到,【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net这本书是写给技术人员的看上去都是技术字眼【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。但实际上是在传播工作方法的一本方法论书籍【未经授权禁止转载】【本文首发于唐霜的博客】,如果有这样的想法,那么在阅读此书,特别原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net是后面的章节时,就不会越来越混乱,因为你原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。不再是在这本书中去找到某些具体的实现或架【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】构,而是在思考如何去发现规律。它不能帮助本文版权归作者所有,未经授权不得转载。【转载请注明来源】你完成某个架构,但是它可以帮助你思考如何转载请注明出处:www.tangshuang.net【作者:唐霜】设计这个架构。

【访问 www.tangshuang.n【本文首发于唐霜的博客】【版权所有,侵权必究】et 获取更多精彩内容】【本文首发于唐霜的博客】【本文首发于唐霜的博客】

现在,回到我们的业务中,为什么DDD正好【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。可以帮助我解决复杂业务的系统设计呢?

【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】et 获取更多精彩内容】【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】

业务的技术语义

技术上讲,什么是业务?

【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ang.net著作权归作者所有,禁止商业用途转载。

业务(Business) 专指商业活动,转载请注明出处:www.tangshuang.net转载请注明出处: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.tangshua本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】ng.net【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。

业务逻辑 是只用代码实现的真实业务的规则【本文受版权保护】著作权归作者所有,禁止商业用途转载。映射。简单说,一个业务中,存在什么逻辑,原创内容,盗版必究。【原创内容,转载请注明出处】可以通过在纸上画出不同业务对象之间的联系【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。和约束,并将这些联系和约束一条条列出来,本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net形成一个列表,而这列表中的每一条,就是一【本文受版权保护】【转载请注明来源】条规则,这些规则的总和,就是这个业务的全【原创内容,转载请注明出处】原创内容,盗版必究。部业务逻辑。既然是一条条的规则,那么我们著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】就可以在代码层面对规则进行管理。对于前端未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】开发者来说,最熟悉的规则管理,莫过于路由【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。管理。

【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【作者:唐霜】【版权所有】唐霜 www.tangshu【未经授权禁止转载】本文作者:唐霜,转载请注明出处。ang.net

业务系统 本质上是基于人机交互的管理工具【未经授权禁止转载】【版权所有,侵权必究】。不同角色在系统中管理的内容不同,但总体【原创不易,请尊重版权】未经授权,禁止复制转载。上,是进行基于业务上下游数据进行职权范围未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。内的业务管理活动。
【本文首发于唐霜的博客】 而从我个人的感官上,业务系统的开发是最【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net复杂的,为什么呢?

【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】【转载请注明来源】转载请注明出处:www.tangshua原创内容,盗版必究。原创内容,盗版必究。ng.net转载请注明出处:www.tangshua【版权所有,侵权必究】【版权所有,侵权必究】ng.net

我们前端开发对不同的前端应用的开发有非常【未经授权禁止转载】【作者:唐霜】明显的感知差别,我把前端应用归纳为3类,【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】分别是业务系统、通用应用、工具类应用,它【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。们虽然都是前端应用,但是在开发工作中呈现转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。出来的关注度却非常不同。

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。ng.net原创内容,盗版必究。原创内容,盗版必究。

表1 业务系统、通用应用和工具类应用的横【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】向对比

【原创内容,转载请注明出处】【访问 www.tangshuang.n【本文首发于唐霜的博客】【未经授权禁止转载】et 获取更多精彩内容】【原创不易,请尊重版权】
【版权所有,侵权必究】【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】ang.net【关注微信公众号:wwwtangshua【版权所有,侵权必究】【本文首发于唐霜的博客】ngnet】

由于开发过程中,关注的重点的不同,以至于【未经授权禁止转载】未经授权,禁止复制转载。在开发时,解决问题的思路也迥异。

【本文受版权保护】【作者:唐霜】【作者:唐霜】

图2 业务系统、通用应用和工具类应用开发转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。时解决问题的思路对比

【作者:唐霜】【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】ang.net【版权所有,侵权必究】
【未经授权禁止转载】【未经授权禁止转载】本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshua未经授权,禁止复制转载。【转载请注明来源】ng.net

这种解决问题的思路差异,决定了我们在开发本文作者:唐霜,转载请注明出处。【转载请注明来源】工作中方法论的差异。而业务系统涉及对象多【转载请注明来源】本文版权归作者所有,未经授权不得转载。,联系密,维度广等特征,导致在实际开发时转载请注明出处:www.tangshuang.net【本文受版权保护】,其复杂度比其他类应用高很多。(但在难度【未经授权禁止转载】【未经授权禁止转载】上往往并不高,业务系统常常不需要实现非常本文版权归作者所有,未经授权不得转载。【转载请注明来源】多需要基于特殊技术才能实现的功能。)

未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。

总结起来,业务系统之所以复杂的因素,我认【未经授权禁止转载】【原创内容,转载请注明出处】为主要有以下一些方面:

著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。
  • UI交互的不复杂与反复实现的矛盾
  • 【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。
  • 特定业务逻辑对原有架构的挑战
  • 著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】ang.net
  • 可持续维护(长期稳定性)与破坏性共存
  • 【关注微信公众号:wwwtangshua【原创不易,请尊重版权】未经授权,禁止复制转载。ngnet】【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】
  • 模块与模块间数据、事件通知耦合
  • 著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】【未经授权禁止转载】
  • 业务准确性要求高与需求多变之间的时间争夺
  • 【未经授权禁止转载】【作者:唐霜】本文版权归作者所有,未经授权不得转载。
  • 前后端耦合
  • 本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】ngnet】

基于这些因素,我需要谨慎对待我所开发的每本文作者:唐霜,转载请注明出处。原创内容,盗版必究。一个功能,因为对于业务而言,这一功能可能【转载请注明来源】著作权归作者所有,禁止商业用途转载。会在5年甚至10年后还要继续使用,而如果【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】功能不够健壮,或者设计之初没有充分考虑业【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net务发展后所需要的扩展能力,很有可能在之后原创内容,盗版必究。转载请注明出处:www.tangshuang.net的迭代中给自己挖下巨大的坑。我想,这是很【作者:唐霜】【版权所有,侵权必究】多开发普适性强的大众类产品的同学无法体会【未经授权禁止转载】本文作者:唐霜,转载请注明出处。到的。

【版权所有,侵权必究】【关注微信公众号:wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。ngnet】

前端语境下DDD的价值主张

前端需要DDD吗?

著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【作者:唐霜】ngnet】【本文首发于唐霜的博客】【原创内容,转载请注明出处】

这个问题可以细化为,前端需要与业务方领域未经授权,禁止复制转载。【原创不易,请尊重版权】专家进行沟通吗?在设计系统或功能时,需要原创内容,盗版必究。【作者:唐霜】基于沟通结构的领域模型展开完成模块的搭建【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】吗?我们需要在前端建模吗?我们需要在前端【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】分层吗?等等。我无法给出标准答案,但我在本文作者:唐霜,转载请注明出处。【作者:唐霜】思考,如今的前端开发,特别是类似和我一样【本文首发于唐霜的博客】原创内容,盗版必究。的业务系统项目中,如果我们仍然是按照设计【本文受版权保护】本文作者:唐霜,转载请注明出处。稿完成实现,是否能准确满足需求?或者说,【原创不易,请尊重版权】未经授权,禁止复制转载。对于前端开发的同学而言,我们是否有必要掌【作者:唐霜】【版权所有,侵权必究】握业务细节,通过一整套的方法论,在代码中【原创内容,转载请注明出处】【本文首发于唐霜的博客】将这些细节管理起来?

本文版权归作者所有,未经授权不得转载。【本文受版权保护】未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。

我想从另一个角度为前端的同学描绘他的工作转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】场景:

【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net【作者:唐霜】ngnet】【访问 www.tangshuang.n未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】未经授权,禁止复制转载。

图3 前端开发人员的沟通域

【本文受版权保护】【版权所有,侵权必究】未经授权,禁止复制转载。未经授权,禁止复制转载。
【访问 www.tangshuang.n【转载请注明来源】【未经授权禁止转载】et 获取更多精彩内容】【访问 www.tangshuang.n【未经授权禁止转载】本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】【未经授权禁止转载】【本文受版权保护】

上图中,我描述了前端开发的同学在整个业务【关注微信公众号:wwwtangshuangnet】【作者:唐霜】开发过程中所处的境地。黑色圆圈表示在这过本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。程中出现的角色,黑色实线表示与前端沟通时著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。两个角色的联系,虚线圈表示当问题发生时参【未经授权禁止转载】未经授权,禁止复制转载。与该问题讨论的相关角色和内容。可以看到,【本文受版权保护】未经授权,禁止复制转载。前端的同学在与不同的角色进行沟通时,常常原创内容,盗版必究。【未经授权禁止转载】需要切换思维和角度,他所要面临的问题,所【本文受版权保护】【版权所有,侵权必究】处的境地,如果没有一套方法论支撑,很难在【转载请注明来源】【未经授权禁止转载】繁杂的工作中不迷失。

本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】

前端可以DDD吗?

转载请注明出处:www.tangshua【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.netng.net著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】

包括Eric著作在内,讨论DDD多半是在【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】后端环境下。作为思想武器,DDD可以帮我【本文首发于唐霜的博客】原创内容,盗版必究。们思考如何去设计业务系统架构,前端是否只转载请注明出处:www.tangshuang.net【本文受版权保护】需要基于后端接口输出渲染界面就可以了呢?【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】或许,前端根本无法按照DDD进行设计吧。

【未经授权禁止转载】本文作者:唐霜,转载请注明出处。【本文受版权保护】【原创不易,请尊重版权】

但随着业务的深入,我发现如今的业务系统(未经授权,禁止复制转载。原创内容,盗版必究。基于B/S架构),渐渐的靠近重客户端的方【版权所有,侵权必究】【未经授权禁止转载】向(类似C/S架构中的C端)。前端代码中未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net的业务逻辑逐渐越来越丰富,甚至很多逻辑只【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net能由前端完成,后端无能为力,或者前后端一【版权所有,侵权必究】转载请注明出处:www.tangshuang.net起推进时成本更高。运行在C端的前端代码,本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】承载的业务逻辑与UI混杂在一起,导致组件未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。或controller的代码被撑的越来越【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】大,越来越无法维护。我曾指出过,基于vu转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】e写的应用,当业务足够复杂时,你根本无法本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】区分vue组件中哪些是业务的,哪些是交互【版权所有,侵权必究】【原创内容,转载请注明出处】的。而这种情况持续下去,便是组件的不可维【作者:唐霜】转载请注明出处:www.tangshuang.net护,代码的腐化。

本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.n【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。ng.net

作为前端开发者,我们需要思考,我们如何让本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】我们的代码组织更健壮,更能体现业务的核心【转载请注明来源】【转载请注明来源】逻辑。基于沟通域的思考,我认为,前端所关【作者:唐霜】【转载请注明来源】注的主要内容包含:业务模型、数据服务、U本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。I交互组件体系。

本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】

 

【转载请注明来源】【本文首发于唐霜的博客】

图4 前端关注的主要内容

【本文首发于唐霜的博客】【作者:唐霜】【版权所有,侵权必究】转载请注明出处:www.tangshua【作者:唐霜】【未经授权禁止转载】ng.net
【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。ang.net【作者:唐霜】【本文首发于唐霜的博客】

前端开发注定不可能只关注业务模型,在前端原创内容,盗版必究。【原创不易,请尊重版权】,特别是web领域,除业务之外关注由后端【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。吐出的数据和界面交互是一件必须的事。甚至转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】有这样一种情况,产品文档中指出,“用户点【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】击该按钮时,需要弹出二次确认窗口,点击确【转载请注明来源】【版权所有,侵权必究】认后该签署流转为已完成”。在这个描述中,未经授权,禁止复制转载。未经授权,禁止复制转载。用户点击按钮弹出确认对话框,是否属于业务未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。逻辑呢?从传统后端的角度,当然不属于,但【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】是,如果去掉这个交互逻辑,能否完整表达这【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】一业务过程呢?这是一个值得思考的问题,前未经授权,禁止复制转载。未经授权,禁止复制转载。端如果要实施DDD,不可能照搬后端的实践【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】。前后端要解决的问题大不相同:

【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。et 获取更多精彩内容】【访问 www.tangshuang.n【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】et 获取更多精彩内容】

表2 前后端要解决的问题对比

【版权所有】唐霜 www.tangshu原创内容,盗版必究。【转载请注明来源】ang.net【关注微信公众号:wwwtangshua【作者:唐霜】本文版权归作者所有,未经授权不得转载。ngnet】【原创不易,请尊重版权】转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ng.net
【原创内容,转载请注明出处】【本文首发于唐霜的博客】【版权所有,侵权必究】未经授权,禁止复制转载。

这也就意味着,在前端语境下,我们关注的内【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。容范畴比后端还要大。

【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ang.net原创内容,盗版必究。【未经授权禁止转载】

图5 前后端DDD范畴对比

【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】ang.net著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【版权所有】唐霜 www.tangshu原创内容,盗版必究。【未经授权禁止转载】ang.net
【本文受版权保护】未经授权,禁止复制转载。【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】ngnet】

这些思考反过来促使我问自己:对于前端而言本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。,DDD的价值是什么?前端工程师需要重新【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】审视自己的这一职位,从视觉交互的实现者陷未经授权,禁止复制转载。【原创内容,转载请注明出处】阱中跳出来,正视自己作为工程师的一面。解【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】决业务项目中的关键问题,持续的与后端一道【本文首发于唐霜的博客】【转载请注明来源】提供稳定可靠的业务服务,这才是前端工程师【本文首发于唐霜的博客】原创内容,盗版必究。的本职。而这些都是我从DDD中发现的,对【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。于前端而言,实施DDD有肉眼可见的好处:

本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。
  • 稳定的业务知识体系
  • 未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】原创内容,盗版必究。
  • 可传承的代码体系
  • 【未经授权禁止转载】【作者:唐霜】【本文首发于唐霜的博客】
  • 脱离UI的单元测试
  • 【转载请注明来源】【转载请注明来源】
  • 跨端开发、多端共用的便捷性
  • 【转载请注明来源】【本文受版权保护】【原创内容,转载请注明出处】
  • 明确的团队分工
  • 【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshua原创内容,盗版必究。【版权所有,侵权必究】ngnet】
  • 需求变更的快速响应
  • 【版权所有,侵权必究】【关注微信公众号:wwwtangshua【转载请注明来源】未经授权,禁止复制转载。ngnet】
  • 持续敏捷
  • 本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netang.net

这些好处对于需要持续迭代的项目团队而言,【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】非常有价值,特别是需要持续支撑业务团队在未经授权,禁止复制转载。【作者:唐霜】下线完成更多以前无法完成的任务的价值,是转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】业务系统最不可替代的。

【访问 www.tangshuang.n【未经授权禁止转载】【原创内容,转载请注明出处】et 获取更多精彩内容】未经授权,禁止复制转载。

前端领域建模

我们在腾讯投资系统TIM中践行前端建模已【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。经超过两年,这期间的收益与之前一股脑通过本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】数据绑定的方式相比,可谓天差地别。在此前转载请注明出处: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责一个业务功能,只有他知道这业务里面的逻【本文受版权保护】【未经授权禁止转载】辑到底有哪些,其他同学即使重新研读代码,本文版权归作者所有,未经授权不得转载。转载请注明出处: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念?

【本文受版权保护】【原创不易,请尊重版权】原创内容,盗版必究。

图6 前端领域建模的首要问题是划清核心与【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。边界

【本文受版权保护】【本文受版权保护】【本文首发于唐霜的博客】未经授权,禁止复制转载。
【关注微信公众号:wwwtangshua未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。ngnet】【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netang.net本文版权归作者所有,未经授权不得转载。【作者:唐霜】

使用OOP的范式进行建模是比较常见且直接【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net的方式,通过建立形形色色的class来创著作权归作者所有,禁止商业用途转载。【转载请注明来源】建一个又一个的对象。关键的问题在于,这些未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。对象的核心是什么,边界又在哪里?这些都是【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】我们必须在一开始考虑清楚的。

原创内容,盗版必究。【作者:唐霜】著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】

建模方法

DDD给我们提供了一些具体的建模方案,例本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。如ENTITY、VALUE OBJECT【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】、SERVICE、AGGREGATE、R本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。EPOSITORY、FACTORY等等。

【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netngnet】【关注微信公众号:wwwtangshua【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】ngnet】本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ng.net

图7 DDD的建模方案

原创内容,盗版必究。转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netng.net
原创内容,盗版必究。转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ng.net【原创内容,转载请注明出处】【转载请注明来源】

在建立对象模型时,根据对象在业务中所表达著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net的意义,选择其中对应的方案来进行建模。例本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】如,我们为一个投资对象进行建模,首先需要本文作者:唐霜,转载请注明出处。【未经授权禁止转载】区分,投资对象的边界在哪里,比如一个投资【版权所有,侵权必究】原创内容,盗版必究。中我们可能要走一些审批流程,会产生一些特【作者:唐霜】本文作者:唐霜,转载请注明出处。殊数据,它们是否属于该投资对象的核心?其【作者:唐霜】著作权归作者所有,禁止商业用途转载。次,我们需要了解一个投资它都由哪些资源构本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】成,比如其中有一个字段叫做“投资主体”,未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。投资主体即在投资中作为合同上付钱的那一家原创内容,盗版必究。【未经授权禁止转载】公司出现,它自己本身也具有自己的一些属性转载请注明出处:www.tangshuang.net【本文受版权保护】,那么投资主体是否是投资这个对象的核心资【原创内容,转载请注明出处】【作者:唐霜】源呢?我们应该处理投资主体?是用一个普通【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。的JS对象来表达,还是创建一个子模型来管原创内容,盗版必究。【原创不易,请尊重版权】理?类似这样的思考,在我们的建模过程中常【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。常发生,而且,有的时候,并不能一击即中,【原创不易,请尊重版权】未经授权,禁止复制转载。有的时候需要在迭代更新中进行调整。

【作者:唐霜】【访问 www.tangshuang.n未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】

在长期摸索实践中,我们形成了一套标准的建【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】模步骤(如下图)。在这一标准步骤中,我们【作者:唐霜】原创内容,盗版必究。抽象出了建模的基类,基于这些基类进行ex本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。tends,根据每个对象的特征,选择性使【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】用某些建模手段。具体如下:

【版权所有,侵权必究】【原创内容,转载请注明出处】

图8 前端领域建模步骤

【访问 www.tangshuang.n【本文受版权保护】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】ang.net原创内容,盗版必究。本文作者:唐霜,转载请注明出处。
【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。ang.net原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua【原创不易,请尊重版权】【版权所有,侵权必究】ng.net

在上图中,完整呈现了我们在代码层面实现领【版权所有,侵权必究】【本文首发于唐霜的博客】域模型的所有素材。建模的最小单位是Att【原创不易,请尊重版权】转载请注明出处:www.tangshuang.netribute,即原子属性,原子属性描述一【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。个字段(Field)或属性(Proper转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。ty)的具体属性,即元数据中的某一项。M本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。eta是最小的模型,由Attribute【未经授权禁止转载】原创内容,盗版必究。组成,即关于单个字段的模型。Attrib【版权所有,侵权必究】【转载请注明来源】ute和Meta不单独存在,它们是颗粒度未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net最小的素材,Attribute一般不可复本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】用(或者说没必要),Meta可限制性复用【版权所有,侵权必究】原创内容,盗版必究。

【原创不易,请尊重版权】【版权所有,侵权必究】

在上图中,Model和本文讲的领域模型概原创内容,盗版必究。原创内容,盗版必究。念稍有不同,Model是代码层面可以表达【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。完整业务对象的最小单位,它由Meta和其未经授权,禁止复制转载。【本文受版权保护】他资源组成。其他资源包括代码层面的方法(【本文首发于唐霜的博客】未经授权,禁止复制转载。概念上的Factory)、静态属性(概念本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】上的Value Object)等。另外,未经授权,禁止复制转载。未经授权,禁止复制转载。和后端模型最大的不同,前端模型必须为UI著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。视图层留足空间,我们为Model提供了响原创内容,盗版必究。【本文首发于唐霜的博客】应式能力,以便在与UI结合时,可以观察到未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net模型内变化,以触发界面的更新。具体从代码【本文受版权保护】【本文受版权保护】层面,我们用Mobx进行举例。

【版权所有】唐霜 www.tangshu【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【访问 www.tangshuang.n【本文受版权保护】【作者:唐霜】et 获取更多精彩内容】未经授权,禁止复制转载。

图9 两个简易模型

原创内容,盗版必究。原创内容,盗版必究。【版权所有,侵权必究】
【版权所有,侵权必究】【本文受版权保护】

上图中,我们创建了两个模型Todo和To【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】doList,其中TodoList是对T本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】odo的聚合,我们会在下文讲。这是两个再本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。普通不过的class进行建模,现在的问题转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。是,如果我们在前端使用这两个模型,我们无本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。法与我们已有的UI框架配合使用,比如在r【版权所有,侵权必究】未经授权,禁止复制转载。eact中或vue中使用。有没有一种方法转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net,可以让我们可以以最小的代价扩展模型的能本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】力呢?我们使用mobx这个库对模型进行改【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。造。

转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netng.net本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。

图10 基于Mobx的简易模型

【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】
【作者:唐霜】【作者:唐霜】【原创内容,转载请注明出处】

使用mobx提供的装饰器,我们以最少的改本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net动增强模型。这一改动几乎不会对原始模型的【作者:唐霜】【原创不易,请尊重版权】原有阅读产生任何干扰,但却使得该模型是可【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。被观察的。再配合mobx的工具,就可以与【原创不易,请尊重版权】【本文受版权保护】UI框架配合,就可以在应用中无缝对接。

本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。ng.net

图11 基于Mobx的模型和UI对接

【访问 www.tangshuang.n【本文受版权保护】本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。
著作权归作者所有,禁止商业用途转载。【作者:唐霜】

与后端框架不同,后端以Controlle【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。r作为入口,对模型和视图进行消费。而在前【本文首发于唐霜的博客】【未经授权禁止转载】端,主要的消费者是UI框架,视图是入口,著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。模型需要被实例化为UI状态后消费。因此,【原创内容,转载请注明出处】【本文首发于唐霜的博客】像Mobx这样,提供与UI框架对接的工具【作者:唐霜】【关注微信公众号:wwwtangshuangnet】,是比较合理的设计方式。不过,这已经超出【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net建模本身的话题,此处只是延伸。

【转载请注明来源】原创内容,盗版必究。【作者:唐霜】【版权所有,侵权必究】

我们回到建模步骤,在前端建模过程中,我认原创内容,盗版必究。转载请注明出处:www.tangshuang.net为最难的一点在于,如何划定一个模型的边界本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】。很多场景下,一个业务对象的某个逻辑,又本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。依赖于另外一个业务对象的某个信息,跨模型【关注微信公众号:wwwtangshuangnet】【转载请注明来源】的关系如何去描述?实践中,我们通过嵌套模【转载请注明来源】【未经授权禁止转载】型来表达,也就是聚合Aggregate。【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。通过Aggregate,我们把高于业务对本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net象本身的逻辑进行梳理。一般而言,一个聚合转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。根囊括了该业务的所有实体,也就是说,它界【原创内容,转载请注明出处】【转载请注明来源】定了该业务在核心实体上的边界,该业务只在【原创不易,请尊重版权】【本文首发于唐霜的博客】这些对象之间运转。

【转载请注明来源】【版权所有,侵权必究】【转载请注明来源】

但业务的运转不仅只包含实体,也包含业务的未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。流转逻辑,即概念上的领域事件,以及背后的【原创内容,转载请注明出处】【本文受版权保护】领域服务,说人话就是业务对象在该业务运转未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net过程中发生变化。对于前端而言,与后端对接【原创不易,请尊重版权】【原创内容,转载请注明出处】数据也是很关键的一个点,我们基于Resp本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ository方案建立可响应式的接口数据原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net管理方案,创建Service单例来在整个【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】应用中响应事件,流转业务对象的状态,从而【本文受版权保护】【本文首发于唐霜的博客】让界面跟着业务的流转而发生变化。

本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。

以上的建模成果被组织在一个Module(未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】模块)中,一个模块不是一个单一文件,它是转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net有特定目录结构的一系列文件组成的功能单元【原创内容,转载请注明出处】原创内容,盗版必究。。不过需要注意,这里的Module和我们著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net应用开发中通常讲的Module概念上稍有本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net不同,这里的Module主要是对领域模型【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。完成代码实现后组成的组织单元,本质上,它【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。还是建模的一部分,和我们通常意义上的业务【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。模块(包含UI等)有所区别。

【未经授权禁止转载】【本文首发于唐霜的博客】【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】et 获取更多精彩内容】

在React项目中设计业务模块

作为优秀的视图驱动库,react实现了完著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。美的从数据到视图的映射。对比vue的优势【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】在于,它对数据本身的形式没有要求,在vu【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】e中,你给定的数据包含getter(Ob【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】ject.defineProperty)本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】或由Proxy创建抑或由特定的class【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。实例化而来,会导致vue丢失部分响应式的著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】能力,而react中没有这层限制,因此,【关注微信公众号:wwwtangshuangnet】【转载请注明来源】在我们实施DDD的过程中,更有亲和力。

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

但react虽然解决了数据到视图的映射,【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】却没有在反过来的视图到数据的映射上提供方转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net案。我们在react中,会在onClic【原创内容,转载请注明出处】【版权所有,侵权必究】k等基于它内置的合成事件系统中执行回调函原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】数来完成视图到数据的处理,然而这种处理显本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。然是不利于建模的。因此,在react本身转载请注明出处:www.tangshuang.net原创内容,盗版必究。之外,我创建了一套基于RxJS的单例服务转载请注明出处:www.tangshuang.net【未经授权禁止转载】来处理来自交互的事件与模型层的绑定。在具【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。体的react组件中,我只暴露给组件它渲本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】染和交互需要用到的数据(状态)和事件接口原创内容,盗版必究。【本文受版权保护】

【本文受版权保护】原创内容,盗版必究。原创内容,盗版必究。【访问 www.tangshuang.n原创内容,盗版必究。未经授权,禁止复制转载。et 获取更多精彩内容】

我称这种独立于react组件本身之外的体【原创不易,请尊重版权】【转载请注明来源】系为“无视图交互模型”。该模型在撰写时,【转载请注明来源】著作权归作者所有,禁止商业用途转载。站在视图层的角度,处理业务模型的实例化、【本文首发于唐霜的博客】【原创内容,转载请注明出处】修改等,处理来自视图层的交互事件等等,但【版权所有】唐霜 www.tangshuang.net【本文受版权保护】是,在该模型中,没有任何具体的UI实现。

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

如果你还有印象,你可能还记得我在前文问到【本文受版权保护】本文版权归作者所有,未经授权不得转载。“用户点击按钮弹出确认对话框,是否属于业【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。务逻辑呢?”,在“无视图交互模型”的设计【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net下,我们可以将“用户点击按钮弹出对话框”【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】这一交互转化为模型的一个部分,在该模型中著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。,它提供了用户点击动作的接口,而该接口处【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。理时会流转模型内持有的其他具体业务模型,本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net进而达到需求文档中所描述的这一要求。但在本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】具体UI中,这个按钮长什么样子,在哪个位转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】置,弹出框样式,都需要在UI层(组件中)本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。具体去实现,而在实现时,开发者不需要考虑【未经授权禁止转载】【原创内容,转载请注明出处】该按钮点击事件的具体效果,只需要调用模型【本文受版权保护】【本文受版权保护】接口即可。

【关注微信公众号:wwwtangshua未经授权,禁止复制转载。转载请注明出处:www.tangshuang.netngnet】【原创内容,转载请注明出处】【原创内容,转载请注明出处】

截止到这一步,你会发现,在我们的业务模块本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。中,还没有任何有关UI的具体实现,但是,【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。我们几乎已经把需求文档中有关业务的实体对本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net象、某些与业务流转相关的交互,都用代码表转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】达出来了。

本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。

图12 项目中实现业务模块的具体流程

本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。
【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。

从需求分析,基于统一语言建立领域模型,到【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。具体代码去实现领域模型,再到建立无视图交本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】互模型,到这里,我们有关业务的建模基本完未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。成,但我们还没有任何的界面效果。对于以前【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net我们拿起react就开撸的开发方式而言,著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。简直不可思议,怎么界面都还没有就已经一大【本文首发于唐霜的博客】原创内容,盗版必究。堆代码了?

【关注微信公众号:wwwtangshua【本文受版权保护】【版权所有】唐霜 www.tangshuang.netngnet】【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ang.net

我们的系统包含PC端、APP端和微信内嵌【转载请注明来源】【版权所有,侵权必究】H5,APP端和H5端交互基本相同,稍有著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。些细节差异,但PC和移动端的差异大的就不【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net止一点点。然而,对于某一业务模块而言,两【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。端的交互虽然不同,却在业务逻辑上(包含基【原创内容,转载请注明出处】【作者:唐霜】于业务逻辑的交互逻辑)是必须一致的,否则【本文受版权保护】【版权所有】唐霜 www.tangshuang.net业务本身就会出现问题。

【本文首发于唐霜的博客】【关注微信公众号:wwwtangshua【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netngnet】【本文首发于唐霜的博客】

上图中,虚线的右侧即我们多端共用的部分,未经授权,禁止复制转载。【原创内容,转载请注明出处】业务模型在各端复用并非完全为了代码重用,【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。更多的是为了保证业务的一致性。而虚线的左【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。侧,则是我们常见的react组件体系的编未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。写。对于不同端,我们的组件很少有能复用的本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】,基本上各自一套,但却能够保证在业务逻辑未经授权,禁止复制转载。【版权所有,侵权必究】上没有出入。一旦业务(数据和交互)被业务【本文受版权保护】【未经授权禁止转载】模型规范下来,对于不同端的视图层,就是换【转载请注明来源】未经授权,禁止复制转载。皮操作(有点夸张)。

【版权所有】唐霜 www.tangshu原创内容,盗版必究。【本文受版权保护】ang.net原创内容,盗版必究。原创内容,盗版必究。【原创不易,请尊重版权】

这一体系给了我们很多想象的空间,虽然我们原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。团队目前并没有再深入,但是我个人的角度而【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net言,我们可以在这一模式基础上,做到更容易【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。的业务单元测试、基于后端输出的统一UI 原创内容,盗版必究。本文作者:唐霜,转载请注明出处。DSL、业务模块服务化、小程序等等。

转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。ng.net【原创不易,请尊重版权】转载请注明出处:www.tangshua【本文受版权保护】本文作者:唐霜,转载请注明出处。ng.net本文版权归作者所有,未经授权不得转载。

基于DDD的前端应用架构分层

分层也是DDD的重要思想,在Eric原书转载请注明出处:www.tangshuang.net原创内容,盗版必究。中,他对系统分层做了梳理,同时,在行业中【原创内容,转载请注明出处】【原创内容,转载请注明出处】,后续继承者们对该分层进行了扩展,主要包转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】括:依赖倒置四层架构、六边形架构、Cle【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。an Architecture等。四层架著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】构典型示意描述如图:

【版权所有,侵权必究】【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。

图13 遵循DDD的系统分层架构示意图

原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【作者:唐霜】原创内容,盗版必究。
【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】【本文首发于唐霜的博客】【版权所有,侵权必究】

对应到前端,与后端不同的是,前端是胖UI未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net瘦数据,前端不需要去考虑数据的存储读写所【原创不易,请尊重版权】原创内容,盗版必究。带来的一系列问题。但是,在整体的分层划分本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】上,前后端具有一致性。

本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshua【未经授权禁止转载】原创内容,盗版必究。ng.net【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【本文受版权保护】ang.net【本文首发于唐霜的博客】

图13 遵循DDD的系统分层架构示意图

【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net本文版权归作者所有,未经授权不得转载。
未经授权,禁止复制转载。原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。

在我以前的前端应用开发中,也有分层的思想【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】,但是分层实践很微弱,大部分情况下还是把原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net所有逻辑杂糅到react组件和状态管理中著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】。这也是我们以前的代码在开发完一段时间后原创内容,盗版必究。转载请注明出处:www.tangshuang.net可维护性就极速变弱的原因。而按照DDD的【转载请注明来源】转载请注明出处:www.tangshuang.net设计,我们将代码分层组织和管理。其中的核著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net心层是领域层,这一层决定了整个应用的大部原创内容,盗版必究。原创内容,盗版必究。分代码逻辑,虽然在控制层和UI层也有一些【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。逻辑,但是它们多是处理交互的,与具体的业【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。务无关。它完整的描述了这一系统所反应的业【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net务面貌。也正因如此,在多端复用(例如PC本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。和APP两端写同一个业务)时,只需要重写本文版权归作者所有,未经授权不得转载。【作者:唐霜】UI层,而不需要再写其他层。

【本文首发于唐霜的博客】【关注微信公众号:wwwtangshua【本文受版权保护】本文作者:唐霜,转载请注明出处。ngnet】【转载请注明来源】【原创内容,转载请注明出处】

结语

复杂的业务系统无论前端还是后端,都面临着【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】巨大的挑战,除了系统本身的功能之外,最大本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。的风险在于业务逻辑需要被准确实现的同时,原创内容,盗版必究。【版权所有,侵权必究】给研发团队的实现时间却很紧张,紧随而来的【原创内容,转载请注明出处】【转载请注明来源】系统的代码在长时间迭代中,越来越难以维护转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。。DDD从沟通和研发两个角度为我们提供方【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。法论,是面对复杂业务时的思想工具。它启发【版权所有】唐霜 www.tangshuang.net【作者:唐霜】了我们,让我们在工作方式上不再莽撞的马上未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net开始写代码,而是先与业务方深入沟通,掌握【转载请注明来源】未经授权,禁止复制转载。业务的知识网络,基于统一语言进行领域建模本文作者:唐霜,转载请注明出处。【未经授权禁止转载】,之后再来考虑如何在react中结合,开转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。发整个应用。在前端语境下,由于前端关注的【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】内容的异质性,我们不可能直接照搬后端的D【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】DD实践,不得不探索前端DDD的特殊途径【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】。基于DDD的设计,我们的架构剖离出不同著作权归作者所有,禁止商业用途转载。【本文受版权保护】的分层,在领域层和控制层完完全全描述了业【本文受版权保护】【版权所有】唐霜 www.tangshuang.net务需求,因此,可以不考虑UI层就可以进行转载请注明出处:www.tangshuang.net【本文受版权保护】业务编程,并实施有效的业务单元测试。而对转载请注明出处:www.tangshuang.net原创内容,盗版必究。于跨端复用而言,就是换UI壳的处理,内在原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。的业务逻辑代码可直接复用。

【作者:唐霜】【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。ngnet】

以上是我在前端DDD话题下的探索,大部分【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】是概念上的梳理,没有具体的实践代码,很大【作者:唐霜】未经授权,禁止复制转载。的原因在于DDD的实践没有统一标准,一旦【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。需要整理,就需要把很多的代码牵扯出来,也【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】不是很好举例。DDD也不是唯一的选择,它未经授权,禁止复制转载。【本文受版权保护】给了我们启发,也允许我们在它的基础上持续原创内容,盗版必究。转载请注明出处:www.tangshuang.net颠覆。本文的理解也仅限本人在工作中的总结转载请注明出处:www.tangshuang.net【本文受版权保护】与思考,并不一定正确,如有不足之处,欢迎【版权所有,侵权必究】原创内容,盗版必究。大家批评指正。

【版权所有,侵权必究】未经授权,禁止复制转载。【本文受版权保护】

2021-09-13 14611

为价值买单,打赏一杯咖啡

本文价值146.11RMB
已有3条评论
  1. 林德根 2021-12-09 17:24

    tyshemo 能够用在生产环境了么

    • 否子戈 2021-12-10 15:35

      可以的,我们项目现在就在用,已经跑了2年了

  2. 1188 2021-09-13 20:51

    真美.