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

对于我自己而言，我不断思考的是，“前端的【转载请注明来源】【版权所有】唐霜 www.tangshuang.net规模级模式应该是怎样？”这里面有很多问题【版权所有，侵权必究】转载请注明出处：www.tangshuang.net，本文我将主要集中火力，讲解在我们最常见【本文受版权保护】未经授权，禁止复制转载。的业务系统开发中可遵循的分层模式。为什么本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】只讲业务系统呢？因为据我观察，目前整个前【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】端行业，业务系统开发占据主导地位，而大部【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。分前端初学者，都是从接触vue、reac【版权所有】唐霜 www.tangshuang.net【本文受版权保护】t之类的前端工具库开始，因此，我认为规模【原创内容，转载请注明出处】【未经授权禁止转载】级模式，从业务系统突破最为可观。在过去的【访问 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，这类系统，往往整体难度不高，但是却常常【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】规模巨大，且在某些细节点上又有比较高的难【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】度。

要从代码层面比较好的把控复杂业务系统的开【原创不易，请尊重版权】【原创不易，请尊重版权】发，需要有比较好的架构规划。但对前端而言本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，整个行业中没有成熟的可供借鉴的模式，更原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】别提有一种类似spring一样的行业通用未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。的具有广泛共识的模式。因此，如何对代码进【本文首发于唐霜的博客】【版权所有】唐霜 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 获取更多精彩内容】微有一段时间的沉积之后，就难以管理和重构本文作者：唐霜，转载请注明出处。【转载请注明来源】。

我们经常有这样的困惑，如果把代码写在一个【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。文件里，虽然是很多很乱，但是起码可以在一著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】个文件内读完所有逻辑；而如果我们把代码抽【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net离到多个文件中，虽然阅读流会被文件的跳跃本文作者：唐霜，转载请注明出处。【访问 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 获取更多精彩内容】我们往往遵循这样的一种原则：依赖是单向的。文件A中的代码依赖了文件B中的代码，但【原创内容，转载请注明出处】【未经授权禁止转载】B绝对不会返回来依赖A，这种单向依赖关系著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】，可以确保在撰写内层代码时，其目的是简洁【本文首发于唐霜的博客】【本文受版权保护】的清晰的，其实现也是比较薄的。从这一点上【作者：唐霜】【关注微信公众号：wwwtangshuangnet】讲，对于前端的开发者而言，就非常不习惯，【作者：唐霜】著作权归作者所有，禁止商业用途转载。我们经常习惯于写大文件，一个文件把一个页【转载请注明来源】原创内容，盗版必究。面所有的东西都写在一起。单向依赖可以有效【作者：唐霜】著作权归作者所有，禁止商业用途转载。的解决一些代码乱串的问题，让你减少一些出【版权所有】唐霜 www.tangshuang.net【转载请注明来源】错的情况。但是，当我们在阅读代码时，我们【未经授权禁止转载】【转载请注明来源】应该从外层往内读，先读依赖代码，再读被依【本文受版权保护】【关注微信公众号：wwwtangshuangnet】赖代码。基于这种阅读顺序，我们还有另外一转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。个原则，就是组合大于继承的原则。继承的问题在于，我们会一层一层的【关注微信公众号：wwwtangshuangnet】【转载请注明来源】堆叠逻辑，