前端组件化开发实践总结，查缺补漏

对于大型的公司来说，公司的网站、APP、桌面应用、Web 端应用等的设计风格都是一样的，同样的组件会在不同平台中使用，这个时候团队之间可以共享一套组件库，复用到各端平台上，减少重复开发的成本。React 和 Vue 都支持创建跨平台的应用，这时组件化开发就显得更重要了：

使用组件化开发之后，代码也容易维护了，如果页面某个部分出了问题，那么我们可以针对出现问题的组件进行修复，多次用到这个组件的地方也都会一起修复了。

最后，设计师在设计产品界面的时候，会把重复出现的 UI 也做成『组件』，这个组件的概念几乎和前端中的组件一模一样，这时可以跟设计师交流想法，看看他/她是怎么规划组件的，这样也减少了在开发时，设计规划组件的时间。

​

接下来分享一下我在组件化开发中总结的经验：

一、组件的规划

---

在正式进行前端应用开发之前，需要有充分的时间来分析，看看页面上的哪些内容需要做成组件。这一步只需要大致规划一下：

• 如果公司设计师提供了详细的设计规范，那么直接按照规范中的组件来开发就可以了。

• 如果只有设计稿，那么就看看哪些内容有 2 次或更多次在其它页面中用到了，这些大概率需要设计为组件。

• 如果连设计稿都没有，那么可以用市面上现成的组件库，例如 ant design。

• 如果没有设计稿，还要自己从零开发，那么可以根据通用的套路，把基础组件，例如按钮、菜单等，规划出来，并把可能会多次用到的页面内容，也规划出来，例如导航，底部信息、联系方式区域，这样可以只改动需要变化的部分，不影响其它部分。

这一步不用太过详细，浪费太多时间，后续开发的时候如果遇到不确定是否要写成组件的部分，可以直接把这部分代码写到大的组件里，如果其它组件又用到了，再把它抽离成组件。

二、组件代码管理

---

组件的代码应该遵循就近原则，也就是说：

• 和组件有关的 HTML、CSS 、JS 代码和图片等静态资源应该放在同一个目录下，方便引用。

• 组件里的代码应该只包括跟本组件相关的 HTML 模板、CSS 样式和 JS 数据逻辑。

• 所有的组件应放到一个统一的『组件文件夹中』。

如果组件之间有可以复用的 HTML 和 CSS，那么这个复用的部分可以直接定义成一个新的组件。

如果组件之间有可以复用的 JS 数据逻辑，那么可以把公用的数据逻辑抽离出来，放到公共的业务逻辑