前端开发作为独立开发系统进行工作的，不过本文作者：唐霜，转载请注明出处。【作者：唐霜】10年，2012年前后，我还在用php输【原创内容，转载请注明出处】原创内容，盗版必究。出页面，基于jquery做一些胶水工作。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。然而到了2015年时，前端已经基本上脱离【原创内容，转载请注明出处】【转载请注明来源】后端，形成了自己的开发体系，实现了前端路本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。由，仅通过ajax与后端交互，拉取必要的【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。数据；同时ES6的发布加速了前端在编程语未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】言上的成熟，随着模块标准化，前端已经具备未经授权，禁止复制转载。【作者：唐霜】了与其他编程语言基本一致的生态体系，虽然原创内容，盗版必究。【未经授权禁止转载】还比较年轻。2018年时，前端已经发展出【作者：唐霜】本文版权归作者所有，未经授权不得转载。比较成熟的工程化体系，已经可以在业务开发著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。中，作为独立的工程项目进行项目管理。20著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】22年时，前端已经开始逐步往基于服务端的本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net能力发展，例如基于服务端渲染的框架、基于【本文受版权保护】【版权所有，侵权必究】服务端的协同等等，这些标志着前端开发者可本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】以逐渐脱离后端的约束，在开发工作中利用前转载请注明出处：www.tangshuang.net原创内容，盗版必究。端的技术解决产品从前到后的闭环。随着前端【未经授权禁止转载】【未经授权禁止转载】开发进入深水区，我们越来越发现，前端开发本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】在模式上需要一场新革命，因为没有成熟的模【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】式，前端编程从始至终都处于编程鄙视链的底未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。端，系统级的c/c++/rust鄙视底层【原创内容，转载请注明出处】【作者：唐霜】服务级的go/java，而go/java本文作者：唐霜，转载请注明出处。原创内容，盗版必究。们又鄙视业务级的php/ruby，最终整【原创不易，请尊重版权】【本文受版权保护】个后端都鄙视前端（不过可能他们对客户端开【转载请注明来源】本文版权归作者所有，未经授权不得转载。发一窍不通，所以对android和ios【原创不易，请尊重版权】【版权所有，侵权必究】开发又没有发言权）。这一鄙视链的根源，在【作者：唐霜】【版权所有】唐霜 www.tangshuang.net于前端基于js语言并没有形成“规模级模式原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】”，简单讲，java生态的spring就转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net是“规模级模式”，即使在后端鄙视链末尾的著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。php，也有laravel这样的框架支撑本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。一个模式，因此，后端程序员往往在掌握一门【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。框架或技术时，总是按照一定的模式进行编程【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】，他们不会认为这样做有任何不对，甚至规范本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。上要求一定要这样做。而在前端编程领域，完著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】全没有这样的规模级模式，前端的编程具有随著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。意性，我称之为“意识流编程”，可以想到哪著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。里写到哪里，只要最终实现其效果即可。虽然【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net在一些场景下这种思维不会带来问题，甚至还【本文首发于唐霜的博客】【转载请注明来源】能快速上新，但是当一个项目运行许久之后，【本文受版权保护】未经授权，禁止复制转载。这种方式就会带来极大的问题。我这两年在研【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。究相关课题时，经常会在知乎、乐问上了解前转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】端开发者们的烦恼，其中非常大的一部分提到本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。“怎么才能更好的管理业务代码和UI代码”本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】，这个问题背后的本质，是前端没有规模级模【版权所有，侵权必究】【原创不易，请尊重版权】式，来对前端编程的设计、思考、实现进行约本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】束，或者应该反过来说，“前端目前的编程设本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】计、思考和实现，没有形成一种业界共识，没【转载请注明来源】【版权所有】唐霜 www.tangshuang.net有形成广泛性认可的编程模式”。

对于我自己而言，我不断思考的是，“前端的【作者：唐霜】【原创内容，转载请注明出处】规模级模式应该是怎样？”这里面有很多问题【转载请注明来源】本文版权归作者所有，未经授权不得转载。，本文我将主要集中火力，讲解在我们最常见著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】的业务系统开发中可遵循的分层模式。为什么原创内容，盗版必究。【本文首发于唐霜的博客】只讲业务系统呢？因为据我观察，目前整个前【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net端行业，业务系统开发占据主导地位，而大部原创内容，盗版必究。【转载请注明来源】分前端初学者，都是从接触vue、reac【转载请注明来源】【本文首发于唐霜的博客】t之类的前端工具库开始，因此，我认为规模【版权所有，侵权必究】【原创不易，请尊重版权】级模式，从业务系统突破最为可观。在过去的本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。几年里，我对前端业界的观察，有非常多的开本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。发者是在开发类似“后台管理系统”一类的产著作权归作者所有，禁止商业用途转载。【作者：唐霜】品，这类产品其实不能叫“后台管理”，而更【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。多的是一种业务呈现，如果单纯是“后台管理本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。”，那么更多的是一种“配置系统”，但是我转载请注明出处：www.tangshuang.net【版权所有，侵权必究】们都知道，我们在开发的系统，不单单是“配本文版权归作者所有，未经授权不得转载。【本文受版权保护】置”，而是对业务的承载。业务系统往往包含【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。这些方面：业务本身的定义、流转、审批，业本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。务的数据呈现，衍生数据的呈现，与业务相关【原创内容，转载请注明出处】【版权所有，侵权必究】的外部行业数据的呈现。从功能上讲，既要基【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。础的具有体验的产品所需的功能，同时也需要本文作者：唐霜，转载请注明出处。【转载请注明来源】具备与业务相关的具有特殊性质的功能，比如【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】在一些数据敏感的系统中，需要开发一些类似【版权所有，侵权必究】【原创内容，转载请注明出处】计算器、数据模板之类的功能，在一些需要进本文作者：唐霜，转载请注明出处。【未经授权禁止转载】行通知的系统中，需要开发一些类似邮件模板本文作者：唐霜，转载请注明出处。原创内容，盗版必究。、消息推送的功能，在一些宏观数据系统中，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。需要开发类似大屏的监测功能等等。由此可见本文作者：唐霜，转载请注明出处。【本文受版权保护】，这类系统，往往整体难度不高，但是却常常【版权所有】唐霜 www.tangshuang.net【本文受版权保护】规模巨大，且在某些细节点上又有比较高的难【作者：唐霜】【转载请注明来源】度。

要从代码层面比较好的把控复杂业务系统的开本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】发，需要有比较好的架构规划。但对前端而言未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net，整个行业中没有成熟的可供借鉴的模式，更著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net别提有一种类似spring一样的行业通用【本文受版权保护】【关注微信公众号：wwwtangshuangnet】的具有广泛共识的模式。因此，如何对代码进【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】行架构，比较考验经验，只有长期接触和思考本文版权归作者所有，未经授权不得转载。【转载请注明来源】此类项目开发的工程师，才能具有宏观视野的【本文受版权保护】本文作者：唐霜，转载请注明出处。描绘出完整的可供借鉴的范式。但是，就目前【转载请注明来源】【原创不易，请尊重版权】而言，没有百花齐放，就没有可能讲哪一种最【版权所有，侵权必究】【作者：唐霜】好，哪一种不足，我下文所讲仅我一家之言。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。我长期参与此类项目开发，积累了非常多自己【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net的想法，而我自己也是善于总结，所以冒昧聊未经授权，禁止复制转载。【本文受版权保护】一聊我所思考的一些结论。

前端的问题

单纯写一段代码，只有能够按照接口将其实现【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。，并无不妥。但在我们工作中，往往不是只写【本文受版权保护】【原创不易，请尊重版权】一段代码那么简单，而是要写无数段代码。而【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。在写这些代码段时，我们常常需要考虑它们相原创内容，盗版必究。本文作者：唐霜，转载请注明出处。互之间的联系，这些联系网使得每一段代码之【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。间关系复杂。且为了避免相同逻辑被不同实现【本文首发于唐霜的博客】未经授权，禁止复制转载。，我们常常需要写可复用的代码，这就更加剧了代码之间的穿插，也就【原创内容，转载请注明出处】【作者：唐霜】是说，代码之间的联系不仅仅有业务层面的逻【访问 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效的组织逻辑，使得很多代码铁饼一块，在稍【本文受版权保护】【关注微信公众号：wwwtangshuangnet】微有一段时间的沉积之后，就难以管理和重构原创内容，盗版必究。【原创不易，请尊重版权】。

我们经常有这样的困惑，如果把代码写在一个【关注微信公众号：wwwtangshuangnet】【本文受版权保护】文件里，虽然是很多很乱，但是起码可以在一【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net个文件内读完所有逻辑；而如果我们把代码抽未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。离到多个文件中，虽然阅读流会被文件的跳跃未经授权，禁止复制转载。【版权所有，侵权必究】打断，但是在代码的管理上显得更舒服，如果转载请注明出处：www.tangshuang.net【版权所有，侵权必究】对代码比较熟，可以非常高效的处理和修改代本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】码。这就是一对矛盾了，我们既希望阅读代码本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net流畅，以帮助我们理解业务，但是同时又席位【未经授权禁止转载】【本文首发于唐霜的博客】代码的管理高效，以帮助我们可以在需求发生【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。变更时高效的修改代码。这一对矛盾的本质根转载请注明出处：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的，但是在实际操作中，我们往往会心里明白原创内容，盗版必究。原创内容，盗版必究。，手却不自觉的把代码写的杂糅在一起，最终转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net变成耦合度很高的代码。实际上，在分层上，【转载请注明来源】【版权所有】唐霜 www.tangshuang.net我们往往遵循这样的一种原则：依赖是单向的。文件A中的代码依赖了文件B中的代码，但【作者：唐霜】原创内容，盗版必究。B绝对不会返回来依赖A，这种单向依赖关系【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】，可以确保在撰写内层代码时，其目的是简洁【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】的清晰的，其实现也是比较薄的。从这一点上【作者：唐霜】本文版权归作者所有，未经授权不得转载。讲，对于前端的开发者而言，就非常不习惯，【版权所有，侵权必究】转载请注明出处：www.tangshuang.net我们经常习惯于写大文件，一个文件把一个页【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net面所有的东西都写在一起。单向依赖可以有效【未经授权禁止转载】【作者：唐霜】的解决一些代码乱串的问题，让你减少一些出本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】错的情况。但是，当我们在阅读代码时，我们【本文受版权保护】【转载请注明来源】应该从外层往内读，先读依赖代码，再读被依原创内容，盗版必究。本文作者：唐霜，转载请注明出处。赖代码。基于这种阅读顺序，我们还有另外一【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】个原则，就是组合大于继承的原则。继承的问题在于，我们会一层一层的著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】堆叠逻辑，