vxxcx——3-2 组件化开发

 

上一节课，我们一起利用小程序自带的一个swiper组件，实现一个模模组的效果非常简单，对不对？因为这个swiper组件是别人帮我们封装好的。我们只需要直接调用就可以，因为接下来我们需要去自定义一些组件，所以说这节课呢，我们一起聊一聊到底什么是组件化开发以及组件化开发当中的一些设计的原则。以便于我们后面能够更好的设计我们自己的组件。其实组建呢，现在是大多数现在的前端的一些框架呀，都在使用的一种方式，尤其是现在大家所熟知的一些像RET也好。view也好，

或者安格尔js也好等等，这些知名的一些前端框架其实都在使用这种组件化开发思想，但是呢，组件化这种开发思想可并不是前端所特有的。其实其他的一些语言或者一些桌面的程序其实都具有组件化开发这样的思想。或者说更确切的说，其实只要有UI层面这样一个展示，我们都可以使用到我们的组件化开发。那到底什么是组件开发呢？其实我这里面总结一段话，我们一起去看一下，我觉得组件其实就是在我们用户的界面的开发领域，或者说在我们的UI这个层面上。组件是一种面向用户的，独立的，

可复用的这样一个交互元素的，这样一个封装，其实组件呢，就是将一段的这样UI的样式。和对应的一些功能作为一个独立的整体，我们去这样去看待它，然后不管这个整体放到哪里去使用，其实它都具有一些相同的功能或者相同的样式。然后达到一个复用的效果，其实整体的思想就相当于是我们的项目，通过一些组件化开发，实现我们相应的功能。然后呢？其实组件和开发有很多的好处，比如说它可以增加我们一些复用性，

提高我们的灵活性，或者提高整个系统的设计。提高开发效率等等等。那么，组件是由哪几部分组成的呢？我们一起看一下，首先组件具有它对应的结构，什么是结构，它其实相当于是我们小程序当中的wsm l。也就是我们内容的部分。那第二呢？它还有相应的逻辑，因为组件里面有一些业务组件，它需要处理相应的逻辑，这样的话，

其实逻辑部分就相当于我们小程序当中开发的gs的部分。第三组件，因为它是应用在用户界面的，所以说也具有一些相应的样式，而这个样式对应到小程序当中，其实就是我们说的微信ss这样一个文件。所以说在小程序当中，一个完整的组件，它具有对应的wsm l结构的部分js逻辑的部分微信ss样式的部分。其实，在小程序当中还具有对应的json文件，也就是对于当前组件的一些配置文件，那么组件化开发具有什么样的意义呢？很多小伙伴可能会这样认为，他认为组件的作用其实就是用于复用的，

如果某一个组件只能被用于一次的话，那它就没有被重复的价值。其中，这种想法是过于片面的组建，并不一定说在某一个项目当中多次使用，我们才把它方程组建。比如说我在我项目当中会使用到一个歌词的组件，其实歌词组件在我项目当中只能用到一次，那我们为什么要放生组件呢？因为当时我考虑的是。这个歌词的功能相对独立，而且呢，我把它放成组件以后，在我用到它的地方，我只需要把它引用进去就可以。

所以说组件在一个项目当中，它有可能是使用到一次的OK，然后我们看看组件化呢，其实是对实现的分层。能够更有效的实现代码的组合方式，其实组建这种方式对我们代码具有一个很好的分离度，我们可以把相对应的一些小功能封装成某一个组件。这样的话，当前这个功能只在这个组件内部就实现就可以。第二个组件化其实会对资源的重组和优化，从而实现项目资源管理的更合理。其实，组件相对独立，而且呢，组件具有高内聚，

低偶合这样的思想。并且组件因为它力度比较小，所以说当测试的时候其实也比较容易，或者说我们优化的时候也会更加的简单合理一些。第三组件有利于单元测试，因为组件力度比较小嘛，而且相对来讲，组件的代码也不会说那么的多，如果我们进行组件单元测试的话，也会更加的容易一些。当我们把每个组件都测试完成以后，然后再拼装成我们一个项目的需求，这样的话，我们项目的稳定性也会提高。第四，

组件对重构比较友好。这是什么意思？比如说我一个组件可能在多个地方会被用到，这样的话，这多个地方都需要改动的话。其实，由由于组件化开发，我只需要改动这一个组件，那么所有引用到当前组件的地方，它都会被改变。我们接下来可能要设计一些自己的组件，应该遵循有哪些原则呢？我们一起看一下，其实在软件工程当中有一个很重要的思想，叫做高内聚低偶合。

其实，在设计组件的时候也是一样的，什么是高内聚呢？高内聚指的就是我在我组建的设计逻辑上可以归为一个单元的一些代码，我们把它封装到一起。尽量保证这个一个段代码主要解决的是一个需求，而在前端开发当中其实最常见的就是一个逻辑单元进行一些对应的封装。另外，什么是低偶合呢？它指的就是组件和组件之间尽量减少这种偶合性，也就是说我们组件要相对独立。功能性呢，相对完整，尽量少去依赖于其他的组件，增强组建自己内部的聚合性，

而降低组件和组件之间这种偶合性。这就是我们所说的高内聚和低五合。另外，组建的职责尽量单一，也就是说某一个组件尽量实现一些它自己的一个单一的功能。而不是在一个组件当中，我要实现各种各样的功能，如果这种情况的话，我们可能需要对当前的组件再进行进一步的拆分。下一个避免过多参数，其实组件它之所以可复用，是因为它里面的很多项是可配置的。比如说对于我前面上一节课，咱们一起用的文本组组件，它的播放的形式，

播放的时间，间隔的时间，我们都是可以通过参数去配置。这样的话，组件在每一次引用的时候也具有一些个性化的配置，但是我们要注意，如果一个组件配置过多，或者说对于这些配置你没有。很好的设计，一些默认参数的话，它可能会给你的调用者带来一些麻烦，然后我们看一看，在我们这个项目当中，我们使用到过哪些组件，或者说我们自己封装了哪些自定义的组件。

我们一起去看一下，首先歌单组件在我的项目的首页会有一个歌单列表，对应的每一个歌单其实都是由这几部分组成的，分别是上面的图片。然后呢，下面对应的歌单的名称以及当前歌单的播放的数量，这个其实大家看每一个其实是不是都是一样的，那么我就可以把当前这个歌单封装成一个组件，在每一次用它的时候，只要去复用它就可以。同时，我们要注意，对于歌单组件是有一个细节的，就是说播放的这个播放数量，其实服务器给我们返回的数量并不是这个样子的。

而是异常状的数字，我们需要自己通过代码对我们的数字进行格式化，然后把格式化以后的数据显示到当前我这个歌单组件上面去。这都是我们的组件当中需要考虑的一些细节问题，这是第一个组件，我们再看歌曲组件，当我点到每一歌单里面的时候，会显示当前歌单里面具有哪些歌曲。我们看到，其实每一个歌曲的信息也基本是相同，包括前面的序号，包括歌曲的名称，下面这一个应该是对应的歌手的信息，以及当前的一些专辑的信息。其实也是相同的，

所以说我把歌曲也封装成对应的组件。我们再看，当我歌曲播放的时候，我还封装了一个歌曲的进度条组件，其实进度条组件是由这几部分组成的，首先有一个播放的进度，然后呢，播放进度的。左边白色区域显示的是当前已经播放过的进度，而右边的灰色区域显示的当前未播放进度。同时上面这个圆的滑块是可以滑动的，调整当前进度，在进度条的左边和右边会显示出对应的已经播放的时间。和当前歌曲的总的时长，我们再往下看，

这就是刚才我提到的歌词组件。当歌曲播放到对应的时间的时候。对应的歌词会红色的方式高亮去显示。OK，然后呢？在我们的发现过程当中，我们一起封装了博客的卡片组件，就是说在博客的列表当中，其实每一个列表都对应的卡片。卡片其实这个功能也是比较固定的，包括当前发布博客的人的图像，他的博客的名称，发布的时间。博客的文字内容以及对应的图片，然后呢，

当我点击到对应的博客里面的时候，我可以查看到当前博客的详情以及对应的屏幕的列表。这个时候其实上面用到的这个卡片和我们列表当中的卡片是一样的，这就是一个复用的效果OK，在博客功能当中，我们还封装了博客控制组件。这个组件能够实现对于每一条博客信息的评论以及分享，这个组件呢，在我们博客列表这个界面当中会用到，另外呢，在我们博客正文这个界面其实。我们也会用到这个组件。可能有小伙伴会有这样的问题啊，我为什么不把博客控制组件一起封装到博客卡片组件里面，大家有没有发现在两个截图当中，

其实博客控制组件它的位置是不同的。这是我把它封装成一个独立组件的第一个考虑，第二个考虑，当前我们的评论和分享可能只适用于我们当前博客的功能。因为后面呢，可能有的同学可能也想对歌曲信息进行评论或者分享的话，那么我这个组件是不是其实也可以在音乐这个功能当中进行复用啊？这都是我把当前这个功能抽取成一个独立组件，这些考虑。再往下看，我还封装了一个底部的弹窗组件。当我们想发布一个博客的时候，其实首先我们需要当前用户的授权。只有授权过的用户才能够发布博客，这时候在底部会弹出对应的一个底部弹出框。

另外，在我写评论的时候，其实也是在底部弹出框当中。去写对应的评价的信息，这个时候其实这个底部弹出框也是可复用的。然后呢，登录组件，其实我对应的还封装一个登录组件，为什么会这样？因为当我在发布博客的时候，我首先需要检查当前用户是否授权过。如果没有授权过的话，我需要获取你当前微信的授权信息，另外如果当前你只是作为一个游客去浏览我当前的博客。当你点击评论这个按钮的时候，

我还是需要去检查当前你用户是否授权过信息，所以说我把登录信息封装成一个公共的组件。另外，我们看在我们博客的这个首页上面，我还封装了一个搜索组件，当然在我这个项目当中可能只有这一个部分需要搜索。如果在项目的其他部分还需要搜索功能的话，其实这个组件也是可以去复用的OK，这就是我们当前项目当中使用到的所有组件。通过这一节课的学习呢，相信大家对组件化开发有了一个初步的认识，并且也都了解了我们在项目当中，我们需要自定义哪些组件？OK，那从下一个开始，

我们开始封装我们的第一个组件，大家一起加油吧。