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

 

前言

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

 

有必要组件化吗

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

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

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

模块化大体有如下几个优势：

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

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

 

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

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

组件不论大小，小到一个按钮，大到一个页面均可以当作一个个组件。不要以为小东西就不必写成组件，由于一个组件的功能越简单，那么使用它的时候也就越容易，并且可以使用到它的场景将越多。因此若是你写出了一个功能十分全面且复杂的组件，不要高兴，由于它也许只会被使用一次。这个时候就须要把功能复杂的组件拆分红更小功能的组件，而这个功能复杂的组件将使用这些功能更小的组件去实现。

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

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

组件一但编写完成而且被运用了无数次以后，请不要随意去修改组件了，由于这样会影响到全部使用了改组件的地方。除非需求变动，整个项目中的搜索框都须要改变样式，这个时候就能够发挥组件的威力了，修改一次组件便可。但修改时不要破坏组件的扩展性。

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

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

这是react的官方教程文档。你能够从中获得不少组件化开发的启发。

 

在项目中使用组件

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

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

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

 

写在最后

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

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