前言

在当今mvvm框架非常流行的时代，页面组件开发已经是每个前端开发人员都必须具备的基本素质。实际上，不仅Web前端领域，甚至Android客户端开发也都使用mvvm的想法。那么如何以组件化的方式思考问题呢？如何在小程序中使用组件是最佳姿势？

是否有必要进行组件化？

根据JQuery时代的方式，使用html + css代码从上到下实现设计并将所有这些代码填充到一个html文件中不好吗？确实，这样的代码“是写作中令人耳目一新的时刻，并保持两行眼泪。”

当需求更改时，我们必须找到相关代码并进行修改。更令人沮丧的是，所有不同模块的js部分也都耦合到一个js文件，这很难修改。

为了编写具有高内聚性和低耦合性的高度可维护的代码，模块化是有效且可行的。无论是操作系统还是大型应用软件，模块化的思想已经渗透到整个计算机科学领域。

模块化大致具有以下优点：

组件化开发是一个好的模块化思想在前端的体现。

如何实现组件化的想法

根据不同的功能模块将获得的设计图分为不同的组件，组件之间可以存在嵌套或平行关系。

无论大小如何，组件都可以视为组件，无论按钮大小还是页面大小。不要认为不需要将小东西写成组件，因为组件的功能越简单，使用起来就越容易，并且可以使用的场景越多。因此，如果您编写了一个非常全面和复杂的组件，请不要高兴，因为它只能使用一次。此时，有必要将功能复杂的组件拆分为较小的功能组件，并将使用这些较小的功能组件来实现此复杂的功能组件。

不要在组件中包含业务逻辑代码。

例如：如果要实现搜索框组件，则用户可以通过键入关键字并单击“搜索”来搜索结果。此时，您自然可以编写逻辑代码，该逻辑代码通过关键字调用接口，然后将搜索结果从接口输入到组件中。除非该项目中的所有搜索框都将调用此界面，并且您不打算将此组件应用于其他项目。否则，这部分逻辑代码不应写在组件中。

一旦组件被写入和使用了无数次，请不要随意修改该组件，因为这会影响所有使用修改后的组件的地方。除非需求更改，否则整个项目中的搜索框都需要更改样式。此时，可以使用组件的电源，并且可以对组件进行一次修改。但修改时不要破坏组件的可扩展性。

编写组件时，有必要充分考虑可伸缩性并公开动态属性。

不可扩展的组件将变得毫无意义。可伸缩性越强，使用组件的可能性就越大，价值也就越大。以搜索框为例，我们可以在搜索框中公开搜索按钮的click事件，然后在使用搜索组件的地方实现click事件的逻辑。

这是react的官方教程文件。您可以从组件开发中获得很多启发。

使用项目中的组件

在团队项目中，使用组件开发时请不要忽略文档的重要性。如果在不使用组件文档的情况下开发组件，则组件的价值将减少一半。由于用户在使用时必须查看组件的源代码以阐明其基本思想，以便可以很好地使用它，因此由他自己重写它的时间和精力成本是相同的。即使您自己使用它，几个月后您也会变得很奇怪。随着时间的流逝，该组件将失去其意义。

请像对待后端开发人员对待api文档一样对待组件描述文档。

有关小程序的详细组件开发教程，请查看我的博客

写在最后

最后推荐小程序 UI组件库，希望为您找到有用的组件。

扫描代码小程序以检查效果。