小程序组件化开发，编写高可维护性的代码

 

前言

在如今mvvm框架大行其道的时代，页面组件化开发已经是每位前端开发人员必备的基本素养。事实上不仅仅是web前端领域，甚至是安卓客户端开发也使用上了mvvm的思想理念。那么怎样去以组件化的方式去思考问题呢？在小程序中怎样使用组件才是最佳的姿势呢？

 

有必要组件化吗

 按照JQuery时代的方式，将设计图从上到下一股脑儿用html+css代码去实现，并且把这些代码全塞进一个html文件中不是很好吗？确实，这样的代码“写时一时爽，维护两行泪。”

当需求变更时，我们不得不满页面的找相关代码然后去修改。更无奈的是所有的不同模块的js部分也都耦合到一个js文件中，修改起来十分吃力。

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

模块化大致有以下几个优点：

• 易扩展性：扩展只需要添加新的模块或者是修改某个已有的模块。
• 高内聚：相关性强的代码被划分到一个模块，大大提高代码的内聚性。
• bug易于排查：在出现bug时我们只需要根据bug的表象却推断可能是哪个模块出现问题，锁定模块后在模块中找出问题根源，而不需要在整个系统中找一个很小的bug。
• 便于分工协作：软件工程就如同盖楼房，考验的是分工协作。模块化可以将一个模块分配给一个人或一个小团队负责。模块之间可以同时开发而且互不影响。

组件化开发就是前端中很好的模块化思想的体现。

 

怎样将组件化思想贯彻下去

将拿到的设计图按照不同的功能模块划分出不同的组件，组件之间可以有嵌套或者并列关系。

组件不论大小，小到一个按钮，大到一个页面都可以看成一个个组件。不要觉得小东西就没必要写成组件，因为一个组件的功能越简单，那么使用它的时候也就越容易，而且能够使用到它的场景将越多。所以如果你写出了一个功能十分全面且复杂的组件，不要高兴，因为它也许只会被使用一次。这个时候就需要把功能复杂的组件拆分成更小功能的组件，而这个功能复杂的组件将使用这些功能更小的组件去实现。

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

例如：你想实现一个搜索框组件，用户输入关键字点击搜索就可以搜索到结果。这个时候你可能顺其自然的把通过关键字调用接口然后从接口中拿到搜索结果的逻辑代码也写到组件中了。除非在这个项目中所有的搜索框都会调用这个接口并且你不打算把这个组件运用到其它项目中。否则这部分逻辑代码不应该写到组件中。

组件一但编写完成并且被运用了无数次之后，请不要随意去修改组件了，因为这样会影响到所有使用了改组件的地方。除非需求变更，整个项目中的搜索框都需要改变样式，这个时候就可以发挥组件的威力了，修改一次组件即可。但修改时不要破坏组件的扩展性。

在编写组件是需要充分考虑扩展性，把动态属性暴露出去。

一个没有扩展性的组件将会变得没有意义，扩展性越强意味着该组件的使用几率越大，价值也就越大。还是以搜索框为例，我们可以把搜索框的搜索按钮点击事件暴露出来，然后在使用搜索组件的地方去实现这个点击事件的逻辑。

这是react的官方教程文档。你可以从中得到很多组件化开发的启发。

 

在项目中使用组件

在团队项目中，采用组件化开发请不要忽视文档的重要性。如果你开发出了一个组件而没有为该组件配上使用说明文档，那么这个组件的价值将降低一半。因为使用者在使用它时必须查看组件的源代码理清它的基本思路才能很好的使用，这样跟他自己重写一遍花费的时间和精力成本是相当的。即使是你自己使用，也许数月后你也会变得十分陌生。久而久之这个组件将失去它存在的意义。

请像后台开发人员对待api文档一样对待组件说明文档。

小程序的详细组件开发教程请查看我的这篇博客

 

写在最后

　　最后推荐一个小程序UI组件库，希望能找到对你有用的组件。

扫描小程序码，可查看效果。