# 组件介绍

# 概述

  • 组件化开发是框架的一大特点,那么为什么我们要进行组件化开发?为什么要费时费力的去开发一个个功能独立的小组件呢?看过市面上各种各样的框架,无一不是采用传统的方式去研发一个项目,随便打开一个页面,首先映入眼帘的都是一堆杂乱无章的HTMLCSSJS代码,首先看着心里就不舒服,另外大量的代码进行堆砌,导致项目开发完成后维护成本也非常高,改个BUG或者新增一些功能要去代码里面去找,尤其是当前你开发完的项目让后后面的人再去维护的时候,会有一种让人奔溃的感觉,特别是对新手来说,那更是心里面万马奔腾,一万个不愿意。那么我们是否有办法解决这个传统开发中的痛点,让代码变得简洁的同时又降低了维护成本,再者让后来者在看你代码的时候有种欣赏的感觉,简洁明了,易于上手呢?
  • 办法肯定有的,那就是组件化开发,我们将项目中经常使用的功能点进行拆解包装,封装一个个独立的小组件,当然组件中可以包括独立的HTMLCSSJS,功能完全独立,组件可以理解为一个独立元素,他是功能模块的细胞一个重要的组成部分,最后有一个个单独个性化的细胞组件共同组成一个完整的模块界面。
  • 举例说明,上传图片在项目开发中是必不可少需要实现的功能,传统的项目开发中我们都会在表单中写入上传文件html代码、css样式、js请求处理等等,如果页面中只有一个上传图片还有,如果页面中有很多需要上传图片的,那么可以想象,单单一个上传功能得有多少代码量,同时还有保证每个上传参数的独立性,这时封装一个上传图片的组件就是最好的选择,简简单单一行代码就可以解决上传文件一系列复杂的功能,后期哪怕需要升级上传文件的功能,我们只需要优化和更新组件即可,不用去每个页面去找然后一个个的去修改。

# 组件原理

组件是一个独立而又富有生命力的单体结构,包括HTMLCSSJS数据渲染数据处理等等,每个组件都需要单独去建立文件,定义好组件名称、组件参数以及组件功能,开发组件也是一件非常费力而又复杂的功能,因为首先要保证能够实现预期的功能,同时还要保证组件具有灵活性独立性高效性可维护性,当需要时可以直接引入UI表单界面,不需要时直接移除组件即可,方便快捷,我们仍以上传图片这个组件为例,看看页面是如何调用的。

  • 组件使用方式: <widget:uploadSingleImage name="avatar|头像|90x90|admin|建议上传尺寸450x450" th:value="${info['avatar']}"/>这个就是我们框架自定义封装的组件,一个复杂的上传图片的功能,就直接实现了完成的上传图片的功能了,是不是不可思议,非常的简单,其实这里只是做了组件的引入,一系列复杂的功能都交由组件去完成了,我们不用再写那么多冗余而又复杂的代码,只是需要时会使用即可。
  • 效果展示:
  1. 单图片上传

    mixureSecure

  2. 多图片上传

    mixureSecure

总结:当前上传图片组件中还包括图片裁剪,详细的使用我们将在下面的《图片上传》一栏中做详细的表述;