再议：通用功能页面的组件化编码流程

背景

我们传统开发功能页面时候，往往会拆分为多个组件来开发，这样不仅项目的结构比较清晰，而且易于代码维护和团队协作。所以组件化编码真的特别重要，那么在进行组件化编码的过程中，如果进行组件化拆分？具有的编码流程是怎样的？今天就给大家来介绍一下。

流程

• 拆分组件

如下可以拆分以下3个组件： 容器组件（红色）、头部组件Header、列表list组件

• 实现静态组件

实现静态页面的效果，主要是写: html + css

• 实现动态组件

1. 动态实现初始化数据的展示
2. 动态实现js交互效果（比如点击事件）

总结

其实整体总结下来，我们在开发功能页面的时候，要先有全局的思想，先按照功能页面进行拆分组件，其次把静态页面画出来，最后就是实现动态数据和交互工作。