React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
10740 人已学习
新⼈⾸单¥59
登录后,你可以任选2讲全文学习
课程目录
已完结/共 25 讲
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
登录|注册

12|项目结构:为什么要按领域组织文件夹结构?

你好,我是王沛。今天我们来聊聊如何组织项目文件夹结构。
很多同学在做项目开发时都会有这样的体验:项目初期,做得爽,进展快。但等功能做得差不多了,比如已经完成 90%,会突然感觉进展慢下来了。在剩下 10% 的功能开发上花的时间,可能比前面做 90% 的功能还要多。
这种现象,有人称之为“90-90 定律”。这就导致我们很难预估项目究竟什么时候才能做完。
产生这个现象的原因是多种多样的,但其中一个很重要的原因就在于,随着功能的增加,项目会变得越来越复杂。而在项目的后期,每增加一个新功能,或者修改已有的一些功能,都会带来很大的工作量。毕竟在做这些新的改动时,你需要考虑它们会对已有的功能产生什么影响。
而要改善或者解决这个问题,关键就在于:每增加一个新的功能,整个应用程序的复杂度不应该明显上升。这样才能保证我们的应用程序始终可扩展,可维护。
那么怎么在 React 应用中做到这一点呢?这正是我们这节课要讨论的问题。

软件复杂度的根源:复杂的依赖关系

我们经常会说,某个项目看上去好复杂。那么这个“复杂”,到底该怎么定义呢?
如果仔细思考就会发现,当某个功能需要层层嵌套的模块依赖,那么即使开发时觉得思路很顺,但是自己再回头去看,或者要让别人理解某个功能实现,就不得不去翻阅很深的调用链。这就是让你觉得复杂的直接原因。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文讨论了大型前端应用中项目结构对可扩展性和可维护性的重要性,指出软件复杂度的根源在于复杂的依赖关系。作者建议按领域组织项目文件夹结构,强调模块化的重要性,并提出了按领域组织文件夹结构的方法。通过引入扩展点机制,作者解决了模块之间的硬依赖问题,实现了模块间的松耦合。文章强调了管理系统复杂度的重要性,为读者提供了在React应用中降低复杂度的实用建议。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《React Hooks 核心原理与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(28)

  • 最新
  • 精选
  • 陈好人
    用一个注册的方式实现控制反转,确实是可以避免硬链接。不过有另一个问题,比方说我就不能直观看到article的组成了,同时,调试上会不会引来新的复杂度?

    作者回复: 关于 article 的组成,在我们项目中会有静态的分析工具,能够直观的看到一个扩展点被哪些模块进行了扩展。也能看到一个 feature 内部,使用了哪些扩展点。所以这个问题是可以解决的。 在调试上,因为扩展点本身和 article view 这个组件是几乎没有直接联系的,只是通过传递了一些参数。所以调试时只需要调试扩展模块就可以了,实际的使用不会有调试上的困难。

    2021-06-22
    4
    11
  • SenjougaharaSama
    Extension 有用但用处很小,解决场景是删除被依赖模块时直接删除原模块文件,而不需要改动依赖文件。但如果依赖文件就只依赖这一个模块,那删除模块后,一样需要但依赖文件中移除extension ,理论不用删也能运行,但这多余的代码以及对其他人review 都增加了困惑

    作者回复: 并不是多余的代码,它让已有模块具备了扩展能力。不意味着一定有人去扩展。

    2021-07-14
    4
  • jsSoftware
    请问老师,利用的扩展点机制注册的,会导致项目启动慢吗?因为项目启动的时候,需要允许注册引擎,将扩展点实际代码,全部加装,导致项目懒加载机制失效?

    作者回复: 好问题。 1. 扩展注册这个过程非常快,10ms 级别,可以忽略。 2. 懒加载。文中的例子,确实扩展点部分的代码需要在主代码执行的时候全部加载,但是其它部分的懒加载还能正常实现。当然,扩展点部分,也可以通过一定的机制,只有在扩展点被调用时才去加载相关代码。

    2021-07-27
    2
    2
  • 林斌
    useArticle 函数是在自己组件内实现,及时不加 article.footer,也必须调用这个api, 也就是说要删除这个功能的时候还要回到这个文件中进行相关的删除操作。没感觉哪里分离了

    作者回复: useArticle 是容器组件中调用的 API,footer 是允许加入 comment 这样的扩展功能。对于 comment,是不需要回到文件中删除相关代码的。

    2021-07-27
  • 何用
    Extension Point 可以用广告位招租形象地解释
    2021-06-23
    13
  • 小个子外星人:)
    没有太理解,下次再看一遍
    2021-06-26
    5
  • 何用
    extension point 的思路可以,将事件通信的机制用在了组件渲染的场景。register 就好比注册事件,Extension 就好比派发事件,依次将register的组件渲染在指定区域,但也不无缺点,比如对类型支持不友好
    2021-06-23
    4
  • ༺程༻
    js-plugin的用处感觉比较大。 但是在react组件中,<Extension name="article.footer" args={article} /> 这样的写法,确实我不太能理解。就像是一个容器组件,通过传入不同的参数,返回不同的组件。因为我使用ts,感觉这样又少了类型检擦。
    2021-06-22
    1
    4
  • 焱焱
    这章没怎么理解 希望老师能加餐再讲一讲 另外如果配合ts应该怎么扩展这个功能呢
    2021-07-07
    3
  • 琪琪
    这章没看懂呢 老师
    2021-06-24
    1
收起评论
显示
设置
留言
28
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部