理解「组合式开发」的真正含义

  • 将不同的核心模块分别抽象，再根据项目需要最终组合在一起的开发方式
  • 可插拔。
  • 删除当前组件，不会影响系统的崩溃，报错，异常
  • 项目集成
  • 细粒度组件的抽象

model调用与实现的分离
image.png

可插拔

根据需求添加或删除任意一个模块，让使用者可以随意插拔任意一个模块；
而且添加或删除任意一个模块，都不会对应用的其他部分产生不可接受的副作用

数据流传递的挑战

  • props 如何传递
  • 模块之间如何共享数据

  • 哪些模块应该暴露接口供使用者自定义

    1. function App (props) {
    2. return (
    3.       <Provider>
    4.           {/* react-router-redux */}
    5.           <ConnectedRouter>
    6.               {/* intl多语言 */}
    7.               <IntlProvider>
    8.                   {/* 路由权限控制 */}
    9.                   <AclRouter>
    10.                       <Route path="/analysis">
    11.             {/* 页面布局 */}
    12.             <BasicLayout>
    13.               <SiderMenu />
    14.               <Content>
    15.                 <PageHeader />
    16.                 <Main />
    17.                 <PageFooter />
    18.               </Content>
    19.             </BasicLayout>
    20.                       </Route>
    21.                   </AclRouter>
    23.                   <Route path="/login" />
    24.                   {/* last of 404 */}
    25.                   <Route render={() => <div>404</div>} />
    26.               </IntlProvider>
    27.           </ConnectedRouter>
    28.       </Provider>
    29.   );
    30. }

redux connect

一个组件如果必须要 connect 到 redux store 才能使用的话，严格意义上来说，就不再是一个组件；

  • 因为这时的组件就对所处的上下文环境有了要求，
  • 一旦脱离了当前应用，组件就无法再顺利地完成自身内部的一些功能，组件所应当拥有的可复用性也就不存在了

隐含的道理是 UI 与数据在架构时应当是分离

  • redux 作为组件和数据之间的粘合剂，一旦二者通过 redux 被连接到了一起，那么这个组件也就不再纯净（pure）了
  • 组件就属于当前项目的一个业务组件，且不再具备通用性
  • 前端应用中的每一个页面都是这样的 connect业务组件

模块化

模块化的本质就是：解耦，降低模块之间的依赖。

当前模块是否和上下文的模块强耦合

  • 其他模块是否需要为了适应这个模块，而做出特殊的调整？

好的模块是为其他模块赋能的；

  • 赋予模块更多的能力，而不需要其他模块做出任何的妥协或变更。

可复用性？当前模块是否能够无缝地迁移到其他的系统，并完成同样的工作？

  • 一个模块封装的是否健壮？
  • 并不会因为组件所处系统的不同，而需要做特殊的调整！

分层思维

软件应用作为一个复杂系统，降低内部复杂度的方式就是：分层。
通过不断地分层将整体复杂度合理地分散在每一个模块中并将其封装起来，
从而降低不同模块集成时的复杂度。

学习是一个不断融会贯通的过程，要理解开发者的技术传达的思想与理念，在实践中应用掌握。