前端组件化思想

摘要

组件化思想是一个非常重要的思想，由于对组件化的概念不深刻，在ui 改版的过程中，只看到了眼前，并没有考虑到后期维护和二次开发，从而影响了团队的开发进度，所以在此总结了组件化开发的一些基本思想，来时刻警醒自己。

什么是组件化？

组件化没有官方严格的定义，因为这三个字已经是一个很直白的单词了，在开发中我们经常听到造轮子，这些轮子就可以叫作一个组件，如果在一个项目中，也可能会按照功能需求进行划分组件，所以没有严格的界限，我们可以把它定义为一段由独立功能组成的代码集合，在任何地方都可以使用。

为什么要组件化？

组件化并不是前端所特有的，一些其他的语言或者桌面程序等，都具有组件化的先例。确切的说，只要有UI层的展示，就必定有可以组件化的地方。简单来说，组件就是将一段UI样式和其对应的功能作为独立的整体去看待，无论这个整体放在哪里去使用，它都具有一样的功能和样式，从而实现复用，这种整体化的细想就是组件化。不难看出，组件化设计就是为了增加复用性，灵活性，提高系统设计，从而提高开发效率。

怎么实现组件化开发？

在了解了组件只是代码集合之后，下一步理所当然就是想知道各个组件之间如何无耦合的进行通讯。其实就是造轮子的一个过程，封装的组件是一个独立的个体。组件化思想是伴随着前端发展的一个不可或缺的设计思想，目前几大流行框架也都非常好的实现了组件化，比如React，Vue。这里我进行的是 Semantic-ui 的组件开发（过程很 emm…）
,对于 ui框架组件化的开发
要求：
1、开发组件的时候命名要符合规范。严格禁止业务逻辑命名，一个好的命名是要描述它是什么，而不是像什么。比如：公司采用的前端框架是 Semantic-ui 前端框架，每一个组件都是以"ui"开头，所以我们在开发 ui 组件的时候，也必须遵循它的编写原则。其实质就是对 semantic-ui 的一个扩充。
2、功能独立，无耦合。我们即要确保我们的功能独立，同时也要确保它的唯一性。我就是将组件绑定到了弹窗中，所以必须重新开发组件，所以特此谨记。
3、封装的组件必须是最简单位，避免过于臃肿，比如：表单中的每一个字段都可以封装成一个组件，然后再给他加状态（类名），对它进行扩充。

总结
个人认为在一个大型前端项目中，这种组件化的抽象设计是很重要的，不仅增加了复用性提高了工作效率，从某种程度上来说也反应了程序员对业务和产品设计的理解，一旦有问题或者需要功能扩展时，你就会发现之前的设计会有很多局限性，所以组件化思想是必不可少的。