[发明专利]组件库的实现方法及装置

说明书

技术领域

本发明涉及数据处理领域，具体而言，涉及一种组件库的实现方法及装置。

背景技术

随着React，Vue等以组件(指令等)为主的优秀前端框架的出现，前端组件化逐渐成为前端开发的迫切需求，当然这一迫切需求也逐渐成为一种主流，一种共识，它不仅提高了前端的开发效率，同时也降低了维护成本。开发者们不需要再面对一堆复杂且难阅读的代码，转而只需要关注以组件方式存在的代码片段。

随着前端技术日新月异的发展，前端组件化开发也经历了很多发展阶段

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

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

2.频繁的早期动态页面时期：动态引入

由于静态页面不能在页面上存储数据，阅读者也不满足于基本的页面交互，更希望页面能够活起来，且能够把交互的数据存储起来，于是出现了很多服务端技术，比如ASP、JSP，这些技术的出现使得前端页面“活”起来了，用户可以根据自己的需求进行数据的交互。

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

3.后端为主的MVC时期：Tag标签

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

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

4.前端AJAX时期：JS大行其道

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

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

5.前端MV*时期：自定义组件

随着时间的推移，开发者发现，如果想要修改这些(ExtJS，miniUI)JS框架中的组件是非常困难的，因此开发者希望能够很容易的自定义一些组件。这时以Vue、React为代表的可以自定义组件的JS框架出现了。这些框架的出现不仅可以让开发者自定义组件，而且可以让开发者将已经存在的组件进行封装。

不仅如此，由于有了npm以及bower这些包管理库，开发者可以很容易的将自己开发的组件publish到这些库中，在使用时只要把他们下载下来(比如npm install)就可以直接使用了。

6.CSS组件化：Less和Sass

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