前端组件化

在大型软件系统中，web应用的先后端已经实现了分离，而随着REST软件架构的发展，后端服务逐步倾向于微服务，简单来讲就是将一个大型后端服务，拆分红多个小服务，它们分别部署，下降了开发的复杂性，并且提升了系统的可伸缩性。而前端方面，随着技术的发展，开发的复杂度也愈来愈高，传统开发模式老是存在着开发效率低，维护成本高等的弊端。

那么前端组件化开发都经历了哪些阶段呢？

 

2、 前端组件化开发发展之路

 

一、交互少的静态页面时期：公共模块和CSS

 

 

 

这是一个很古老的时代，那时的前端页面就是一些基本的HTML标签以及JS和CSS，页面上大部分都是一些静态的文字，就在这个时期，前端JS和CSS已经出现了组件化，或许更多的应该成为模块化，即开发者把不一样模块的或者公共的JS和CSS放在不一样的文件中，而后在页面引入并使用，这种方式也沿用至今。

 

二、繁琐的早期动态页面时期：动态引入

 

 

 

因为静态页面不能在页面上存储数据，阅读者也不知足于基本的页面交互，更但愿页面可以活起来，且可以把交互的数据存储起来，因而出现了不少服务端技术，好比ASP，JSP。这些技术的出现使得前端页面活起来了，用户能够根据本身的需求进行数据的交互。

 

然而这时的页面上充斥着业务逻辑，随着业务逻辑的增多，页面的内容也愈来愈多，愈来愈复杂。在这个时期前端组件化开发获得了必定的发展，开发者已经不知足于简单的将JS和CSS文件模块化，开始把一些公用的页面逻辑独立开来，而后经过页面动态引入的方式进行使用，好比公共的页面头(header)和尾(footer)以及数据库的链接(DatabaseConn.jsp)等。

 

三、后端为主的MVC时期：Tag标签

 

 

因为早期动态页面时期的业务逻辑都写在页面上，随着逻辑的增多，页面愈来愈复杂，维护起来也愈来愈难。因而以servlet为表明的MVC时代逐渐登上历史舞台，这时页面上的逻辑都被转入到servlet中，使得View层的表现更加简洁，也更加的易于阅读，从而达到了开发的分层。

 

而随着Struts以及spring的出现，MVC的开发方式达到鼎盛时期，前端View层的展示也变得愈来愈简单，没有了复杂的业务逻辑，前端的组件化方式主要是taglib标签，好比jsp标签，Struts标签等，把HTML代码和业务逻辑打包成一个标签，而后使用者直接放置在想要的地方，就能够了。但这个时期，整个WEB应用的开发轻前端重后端，那些taglib标签也都是Java代码编写的。

 

四、前端Ajax时期：JS大行其道

 

 

 

 

因为MVC时期的轻前端重后端的思想，前端页面主要以表格的形式展示，若是想要一些很炫的效果，实现起来就比较复杂了，每每要写一大堆的代码，并且很难阅读。AJAX做为早已经出现的技术在这个时候愈来愈受到开发者的青睐，因而出现了不少的JS框架，好比jQuery-UI， easy-UI，miniUI以及大名鼎鼎的ExtJS。

 

这些JS框架的出现使得前端组件化的开发到达了一个新的高度，利用封装Dom，AJAX以及页面交互的方式，一个个的很炫的组件出现了，开发者能够随意的将这些组件应用的页面中，开发变得简单的同时页面也变得愈来愈好看。因为这些交互都由JS来完成，运行在浏览器端，也大大的减小了服务端的压力，同时也提升了性能。

 

五、前端MV*时期：自定义组件

 

 

 

 

 

随着时间的推移，开发者发现，若是想要修改这些（ExtJS，miniUI）JS框架中的组件是很是困难的，所以开发者但愿可以很容易的自定义一些组件。这时以Angular，React为表明的能够自定义组件的JS框架出现了。这些框架的出现不只可让开发者自定义组件，并且可让开发者将已经存在的组件进行封装。

 

不只如此，因为有了npm以及bower这些包管理库，开发者能够很容易的将本身开发的组件publish到这些库中，在使用时只要把他们下载下来（好比npm install）就能够直接使用了。好比：

 

以上的组件化基本以HTML和JS为主，那么CSS怎么作组件化呢？

 

六、CSS组件化：less和sass

 

 

 

前面讲了CSS的模块化基本上是将实现某一模块Dom样式的CSS放在不一样的文件中，显然随着WEB应用的发展，开发者已经很不知足于这种简单的模块化了。 其实关于CSS的组件化，业界也早就已经有了不少探索，好比less，sass等。那么为何CSS也要组件化呢？ 

 

咱们知道CSS是一种扁平的结构，一个Dom可能对应着一个CSS样式，而这些CSS样式颇有可能出现公共的部分，那么提取这些公共的部分也就实现了CSS的组件化，在诸如less和sass出现以前，开发者都是把公共的CSS样式写成一个个公共class，可是这样以后CSS文件的阅读性就变得困难了，固然也不容易修改。而less和sass出现以后，使得CSS的编程能够定义变量，能够实现继承，CSS内容的结构也变得更加清晰，提升了CSS文件的阅读性，更容易让人理解，修改起来也变得简单。

 

3、前端组件化的4个原则

 

前面讲了组件化开发的发展过程，那么咱们该怎么作组件化呢？我认为组件应该遵照如下几个原则：

 

• 标准性

  任何一个组件都应该遵照一套标准，可使得不一样区域的开发人员据此标准开发出一套标准统一的组件。

   

  
  

• 组合性

  组件以前应该是能够组合的。咱们知道前端页面的展现都是一些HTML DOM的组合，而组件在最终形态上也能够理解为一个个的HTML片断。那么组成一个完整的界面展现，确定是要依赖不一样组件之间的组合，嵌套以及通讯。

  
  

• 重用性

  任何一个组件应该都是一个能够独立的个体，可使其应用在不一样的场景中。

  
  

• 可维护性

  任何一个组件应该都具备一套本身的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减小发生bug的概率。

 

4、总结与实践

 

固然组件化开发也并非这么简单就能实践的。

 

• 对开发者的能力有必定的要求，好比传统开发方式可能只要求开发者懂HTML，JS，CSS这些就能够了，而组件化开发方式下还可能要求开发者掌握less，sass，或者ES6等的语法，以及webpack，glup等的前端打包以及构建工具。不过另外一方面，哪一个开发者不但愿本身能掌握更多的本领呢？

   

  
  

• 技术选型，当前前端组件化框架能够说是百家齐放，这就要求技术经理或者架构师具备超前的前瞻性，根据项目需求以及框架的将来发展进行分析选型。

 

以咱们公司目前在作的项目《普元数字化企业云平台》为例，整个前端项目由上海和西安两地的同事共4我的合做开发，在开发之初就确立了要采用一套统一的标准以减小异地开发的沟通成本，以及维护成本，显然组件化开发能够很好的知足此要求。

 

基于此，咱们的前端使用的是Facebook的React技术，React的核心是使用组件定义界面的表现，它突出的就是开发组件化。 以下图所示，界面上的任何表现都对应着组件。组件之间很好的遵照了组件化开发的几个原则，不一样区域的同事开发出的组件都如同同一我的写的，大大下降了异地的沟通成本和维护成本，以及提高了开发效率。