12｜项目结构：为什么要按领域组织文件夹结构？
王沛
你好，我是王沛。今天我们来聊聊如何组织项目文件夹结构。
很多同学在做项目开发时都会有这样的体验：项目初期，做得爽，进展快。但等功能做得差不多了，比如已经完成 90%，会突然感觉进展慢下来了。在剩下 10% 的功能开发上花的时间，可能比前面做 90% 的功能还要多。
这种现象，有人称之为“90-90 定律”。这就导致我们很难预估项目究竟什么时候才能做完。
产生这个现象的原因是多种多样的，但其中一个很重要的原因就在于，随着功能的增加，项目会变得越来越复杂。而在项目的后期，每增加一个新功能，或者修改已有的一些功能，都会带来很大的工作量。毕竟在做这些新的改动时，你需要考虑它们会对已有的功能产生什么影响。
而要改善或者解决这个问题，关键就在于：每增加一个新的功能，整个应用程序的复杂度不应该明显上升。这样才能保证我们的应用程序始终可扩展，可维护。
那么怎么在 React 应用中做到这一点呢？这正是我们这节课要讨论的问题。
软件复杂度的根源：复杂的依赖关系
我们经常会说，某个项目看上去好复杂。那么这个“复杂”，到底该怎么定义呢？
如果仔细思考就会发现，当某个功能需要层层嵌套的模块依赖，那么即使开发时觉得思路很顺，但是自己再回头去看，或者要让别人理解某个功能实现，就不得不去翻阅很深的调用链。这就是让你觉得复杂的直接原因。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文讨论了大型前端应用中项目结构对可扩展性和可维护性的重要性，指出软件复杂度的根源在于复杂的依赖关系。作者建议按领域组织项目文件夹结构，强调模块化的重要性，并提出了按领域组织文件夹结构的方法。通过引入扩展点机制，作者解决了模块之间的硬依赖问题，实现了模块间的松耦合。文章强调了管理系统复杂度的重要性，为读者提供了在React应用中降低复杂度的实用建议。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Hooks 核心原理与实战》，新⼈⾸单¥59
《React Hooks 核心原理与实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(28)
- 最新
- 精选
陈好人用一个注册的方式实现控制反转，确实是可以避免硬链接。不过有另一个问题，比方说我就不能直观看到article的组成了，同时，调试上会不会引来新的复杂度？作者回复: 关于 article 的组成，在我们项目中会有静态的分析工具，能够直观的看到一个扩展点被哪些模块进行了扩展。也能看到一个 feature 内部，使用了哪些扩展点。所以这个问题是可以解决的。 在调试上，因为扩展点本身和 article view 这个组件是几乎没有直接联系的，只是通过传递了一些参数。所以调试时只需要调试扩展模块就可以了，实际的使用不会有调试上的困难。
2021-06-22411
SenjougaharaSamaExtension 有用但用处很小，解决场景是删除被依赖模块时直接删除原模块文件，而不需要改动依赖文件。但如果依赖文件就只依赖这一个模块，那删除模块后，一样需要但依赖文件中移除extension ，理论不用删也能运行，但这多余的代码以及对其他人review 都增加了困惑作者回复: 并不是多余的代码，它让已有模块具备了扩展能力。不意味着一定有人去扩展。
2021-07-144
jsSoftware请问老师，利用的扩展点机制注册的，会导致项目启动慢吗？因为项目启动的时候，需要允许注册引擎，将扩展点实际代码，全部加装，导致项目懒加载机制失效？作者回复: 好问题。 1. 扩展注册这个过程非常快，10ms 级别，可以忽略。 2. 懒加载。文中的例子，确实扩展点部分的代码需要在主代码执行的时候全部加载，但是其它部分的懒加载还能正常实现。当然，扩展点部分，也可以通过一定的机制，只有在扩展点被调用时才去加载相关代码。
2021-07-2722
林斌useArticle 函数是在自己组件内实现，及时不加 article.footer，也必须调用这个api， 也就是说要删除这个功能的时候还要回到这个文件中进行相关的删除操作。没感觉哪里分离了作者回复: useArticle 是容器组件中调用的 API，footer 是允许加入 comment 这样的扩展功能。对于 comment，是不需要回到文件中删除相关代码的。
2021-07-27
何用Extension Point 可以用广告位招租形象地解释2021-06-2313
小个子外星人：）没有太理解，下次再看一遍2021-06-265- 何用extension point 的思路可以，将事件通信的机制用在了组件渲染的场景。register 就好比注册事件，Extension 就好比派发事件，依次将register的组件渲染在指定区域，但也不无缺点，比如对类型支持不友好2021-06-234
༺程༻js-plugin的用处感觉比较大。 但是在react组件中，<Extension name="article.footer" args={article} /> 这样的写法，确实我不太能理解。就像是一个容器组件，通过传入不同的参数，返回不同的组件。因为我使用ts，感觉这样又少了类型检擦。2021-06-2214
焱焱这章没怎么理解 希望老师能加餐再讲一讲 另外如果配合ts应该怎么扩展这个功能呢2021-07-073
琪琪这章没看懂呢 老师2021-06-241
收起评论